Update styling to equalize list and grid styles for community posts

kommunarr · Sep 2, 2023 · 81f8dce · 81f8dce
1 parent 673a018
commit 81f8dce
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 91 deletions.
diff --git a/src/renderer/components/ft-auto-grid/ft-auto-grid.scss b/src/renderer/components/ft-auto-grid/ft-auto-grid.scss
@@ -22,7 +22,7 @@
       margin-inline: 0;
       margin-block: 0 16px;
       max-width: 850px;
-      padding-block-end: 3px;
+      padding-block-end: 6px;
     }
   }
 }
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -22,20 +22,23 @@ $community-thumbnail-side-width: 65px;
 
 .author-div {
   display: flex;
+  margin-block-start: -16px;
 
   .authorName {
     font-size: 15px;
     font-weight: bold;
-    margin: 5px 6px 0 5px;
+    margin-block-end: 6px;
   }
 
   .publishedText {
     font-size: 15px;
-    margin: 5px 6px 0 5px;
+    margin-inline: 5px 6px;
+    margin-block-end: 6px;
   }
 }
 
 .postText {
+  margin-block-start: 0;
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
@@ -120,24 +123,9 @@ $community-thumbnail-side-width: 65px;
   }
 }
 
-.ft-list-item.grid {
-  min-height: 0 !important;
-}
-
-.ft-list-item.list {
-  flex-wrap: wrap;
+.ft-list-item.grid, .ft-list-item.list {
+  flex-direction: row;
   justify-content: space-between;
-
-  > :not(.author-div) {
-    margin-inline-start: $community-thumbnail-side-width;
-    flex-basis: 100%;
-  }
-
-  .author-div {
-    height: 24px;
-  }
-
-  .postText {
-    margin-block-start: 6px;
-  }
+  gap: 10px;
+  padding-block-end: 0;
 }
diff --git a/src/renderer/components/ft-community-post/ft-community-post.vue b/src/renderer/components/ft-community-post/ft-community-post.vue
@@ -5,86 +5,90 @@
     :appearance="appearance"
     :class="{ list: listType === 'list', grid: listType === 'grid' }"
   >
-    <div
-      class="author-div"
-    >
+    <div>
       <img
         v-if="authorThumbnails.length > 0"
         :src="getBestQualityImage(authorThumbnails)"
         class="communityThumbnail"
         alt=""
       >
-      <p
-        class="authorName"
+    </div>
+    <div>
+      <div
+        class="author-div"
       >
-        {{ author }}
-      </p>
+        <p
+          class="authorName"
+        >
+          {{ author }}
+        </p>
+        <p
+          class="publishedText"
+        >
+          {{ publishedText }}
+        </p>
+      </div>
       <p
-        class="publishedText"
+        class="postText"
+        v-html="postText"
+      />
+      <tiny-slider
+        v-if="type === 'multiImage' && postContent.content.length > 0"
+        v-bind="tinySliderOptions"
+        class="slider"
       >
-        {{ publishedText }}
-      </p>
-    </div>
-    <p
-      class="postText"
-      v-html="postText"
-    />
-    <tiny-slider
-      v-if="type === 'multiImage' && postContent.content.length > 0"
-      v-bind="tinySliderOptions"
-      class="slider"
-    >
-      <img
-        v-for="(img, index) in postContent.content"
-        :key="index"
-        :src="getBestQualityImage(img)"
-        class="communityImage tns-lazy-img"
-        alt=""
+        <img
+          v-for="(img, index) in postContent.content"
+          :key="index"
+          :src="getBestQualityImage(img)"
+          class="communityImage tns-lazy-img"
+          alt=""
+        >
+      </tiny-slider>
+      <div
+        v-if="type === 'image' && postContent.content.length > 0"
       >
-    </tiny-slider>
-    <div
-      v-if="type === 'image' && postContent.content.length > 0"
-    >
-      <img
-        :src="getBestQualityImage(postContent.content)"
-        class="communityImage"
-        alt=""
+        <img
+          :src="getBestQualityImage(postContent.content)"
+          class="communityImage"
+          alt=""
+        >
+      </div>
+      <div
+        v-if="type === 'video'"
       >
-    </div>
-    <div
-      v-if="type === 'video'"
-    >
-      <ft-list-video
-        :data="data.postContent.content"
-        appearance=""
-      />
-    </div>
-    <div
-      v-if="type === 'poll' || type === 'quiz'"
-    >
-      <ft-community-poll :data="postContent" />
-    </div>
-    <div
-      v-if="type === 'playlist'"
-      class="playlistWrapper"
-    >
-      <ft-list-playlist
-        :data="postContent.content"
-        :appearance="appearance"
-      />
-    </div>
-    <div
-      class="bottomSection"
-    >
-      <span class="likeCount"><font-awesome-icon
-        class="thumbs-up-icon"
-        :icon="['fas', 'thumbs-up']"
-      /> {{ voteCount }}</span>
-      <span class="commentCount">
-        <font-awesome-icon
-          class="comment-count-icon"
-          :icon="['fas', 'comment']"
-        /> {{ commentCount }}</span>
+        <ft-list-video
+          :data="data.postContent.content"
+          appearance=""
+        />
+      </div>
+      <div
+        v-if="type === 'poll' || type === 'quiz'"
+      >
+        <ft-community-poll :data="postContent" />
+      </div>
+      <div
+        v-if="type === 'playlist'"
+        class="playlistWrapper"
+      >
+        <ft-list-playlist
+          :data="postContent.content"
+          :appearance="appearance"
+        />
+      </div>
+      <div
+        class="bottomSection"
+      >
+        <span class="likeCount"><font-awesome-icon
+          class="thumbs-up-icon"
+          :icon="['fas', 'thumbs-up']"
+        /> {{ voteCount }}</span>
+        <span class="commentCount">
+          <font-awesome-icon
+            class="comment-count-icon"
+            :icon="['fas', 'comment']"
+          /> {{ commentCount }}</span>
+      </div>
     </div>
   </div>
 </template>