Fix/improve community post list styling

src/renderer/components/ft-community-post/ft-community-post.js

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
+import FtCard from '../ft-card/ft-card.vue'
 import FtCommunityPoll from '../ft-community-poll/ft-community-poll.vue'
 
 import autolinker from 'autolinker'
@@ -13,6 +14,7 @@ import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 export default defineComponent({
   name: 'FtCommunityPost',
   components: {
+    'ft-card': FtCard,
     'ft-list-playlist': FtListPlaylist,
     'ft-list-video': FtListVideo,
     'ft-community-poll': FtCommunityPoll
@@ -42,8 +44,15 @@ export default defineComponent({
     }
   },
   computed: {
-    listType: function () {
-      return this.$store.getters.getListType
+    tinySliderOptions: function() {
+      return {
+        items: 1,
+        arrowKeys: false,
+        controls: false,
+        autoplay: false,
+        slideBy: 'page',
+        navPosition: 'bottom'
+      }
     }
   },
   created: function () {

src/renderer/components/ft-community-post/ft-community-post.scss

@@ -1,39 +1,57 @@
 /* stylelint-disable property-no-vendor-prefix */
 @use '../../scss-partials/_ft-list-item';
 
-.outside {
-  margin: auto;
-  inline-size: 40%;
-  @media screen and (max-width: 768px) {
-    inline-size: 100%;
+.card {
+  position: relative;
+  inline-size: 75%;
+  margin-block: 0 20px;
+  padding-block: 0 1em;
+  padding-inline: 1em 2em;
+  box-sizing: border-box;
+  // derived from the ft-card width of 85% (subtract from 100% & divide by two)
+  margin-inline-start: 7.5%;
+
+  @media only screen and (max-width: 600px) {
+    inline-size: 85%;
   }
 }
 
-.ft-list-post {
-  box-sizing: border-box;
+.ft-list-post.list {
+  margin-inline: 0 auto;
+  flex-direction: row;
+  min-block-size: 0;
+  min-inline-size: 100%;
+  padding-block: 0;
+  padding-inline: 0;
+  gap: 6px;
 }
 
 .communityImage {
   block-size: 100%;
   inline-size: 100%;
+  margin-block-start: 6px;
 }
 
 .communityThumbnail {
   -webkit-border-radius: 50%;
   border-radius: 50%;
   block-size: 55px;
+  margin-block-start: 1em;
   margin-inline-end: 5px;
   inline-size: 55px;
 }
 
 .author-div {
   display: flex;
+  .authorName, .publishedText {
+    padding-block-start: 0;
+  }
 
   .authorName {
     font-size: 15px;
     font-weight: bold;
-    margin-block: 5px 0;
-    margin-inline: 5px 6px;
+    margin-block-end: 6px;
+    margin-inline: 0 6px;
     .authorNameLink {
       color: inherit;
       text-decoration: none;
@@ -42,13 +60,14 @@
 
   .publishedText {
     font-size: 15px;
-    margin-block: 5px 0;
     margin-inline: 5px 6px;
+    margin-block-end: 6px;
   }
 }
 
 .postText {
-  overflow-wrap: anywhere;
+  margin-block: 6px;
+  overflow-wrap: normal;
   white-space: pre-wrap;
 }
 
@@ -57,15 +76,10 @@
   display: block;
   flex-direction: column;
   font-size: 15px;
-  margin-block-start: 4px;
+  margin-block: 8px 0;
   max-inline-size: 210px;
   text-align: start;
 
-  @media screen and (max-width: 680px) {
-    margin-inline-start: 0;
-    text-align: start;
-  }
-
   .likeBar {
     border-radius: 4px;
     block-size: 8px;
@@ -132,9 +146,11 @@
   }
 }
 
-.ft-list-item.grid {
-  min-block-size: 0 !important;
-  padding-block-end: 20px;
+@media screen and (max-width: 680px) {
+  .ft-list-post.list {
+    margin-inline-start: 0;
+    text-align: start;
+  }
 }
 
 .sliderContainer {

src/renderer/components/ft-community-post/ft-community-post.vue

@@ -1,127 +1,135 @@
 <template>
-  <div
+  <ft-card
     v-if="!isLoading"
-    class="ft-list-post ft-list-item outside"
-    :appearance="appearance"
-    :class="{ list: listType === 'list', grid: listType === 'grid' }"
+    class="card"
   >
     <div
-      class="author-div"
+      class="ft-list-post ft-list-item list"
+      :appearance="appearance"
     >
-      <template
-        v-if="authorThumbnails.length > 0"
-      >
-        <router-link
-          v-if="authorId"
-          :to="`/channel/${authorId}`"
-          tabindex="-1"
-          aria-hidden="true"
+      <div>
+        <template
+          v-if="authorThumbnails.length > 0"
         >
+          <router-link
+            v-if="authorId"
+            :to="`/channel/${authorId}`"
+            tabindex="-1"
+            aria-hidden="true"
+          >
+            <img
+              :src="getBestQualityImage(authorThumbnails)"
+              class="communityThumbnail"
+              alt=""
+            >
+          </router-link>
           <img
+            v-else
             :src="getBestQualityImage(authorThumbnails)"
             class="communityThumbnail"
             alt=""
           >
-        </router-link>
-        <img
-          v-else
-          :src="getBestQualityImage(authorThumbnails)"
-          class="communityThumbnail"
-          alt=""
-        >
-      </template>
-      <p
-        class="authorName"
-      >
-        <router-link
-          v-if="authorId"
-          :to="`/channel/${authorId}`"
-          class="authorNameLink"
-        >
-          {{ author }}
-        </router-link>
-        <template
-          v-else
-        >
-          {{ author }}
         </template>
-      </p>
-      <p
-        class="publishedText"
-      >
-        {{ publishedText }}
-      </p>
-    </div>
-    <p
-      class="postText"
-      v-html="postText"
-    />
-    <div class="sliderContainer">
-      <swiper-container
-        v-if="type === 'multiImage' && postContent.content.length > 0"
-        ref="swiperContainer"
-        init="false"
-        class="slider"
-      >
-        <swiper-slide
-          v-for="(img, index) in postContent.content"
-          :key="index"
-          lazy="true"
+      </div>
+      <div>
+        <div
+          class="author-div"
+        >
+          <p
+            class="authorName"
+          >
+            <router-link
+              v-if="authorId"
+              :to="`/channel/${authorId}`"
+              class="authorNameLink"
+            >
+              {{ author }}
+            </router-link>
+            <template
+              v-else
+            >
+              {{ author }}
+            </template>
+          </p>
+          <p
+            class="publishedText"
+          >
+            {{ publishedText }}
+          </p>
+        </div>
+        <p
+          class="postText"
+          v-html="postText"
+        />
+        <div class="sliderContainer">
+          <swiper-container
+            v-if="type === 'multiImage' && postContent.content.length > 0"
+            ref="swiperContainer"
+            init="false"
+            class="slider"
+          >
+            <swiper-slide
+              v-for="(img, index) in postContent.content"
+              :key="index"
+              lazy="true"
+            >
+              <img
+                :src="getBestQualityImage(img)"
+                class="communityImage"
+                alt=""
+                loading="lazy"
+              >
+            </swiper-slide>
+          </swiper-container>
+        </div>
+        <div
+          v-if="type === 'image' && postContent.content.length > 0"
         >
           <img
-            :src="getBestQualityImage(img)"
+            :src="getBestQualityImage(postContent.content)"
             class="communityImage"
             alt=""
-            loading="lazy"
           >
-        </swiper-slide>
-      </swiper-container>
-    </div>
-    <div
-      v-if="type === 'image' && postContent.content.length > 0"
-    >
-      <img
-        :src="getBestQualityImage(postContent.content)"
-        class="communityImage"
-        alt=""
-      >
-    </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>
+        </div>
+        <div
+          v-if="type === 'video'"
+        >
+          <ft-list-video
+            :data="data.postContent.content"
+            appearance="result"
+            force-list-type="list"
+          />
+        </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>
-  </div>
+  </ft-card>
 </template>
 
 <script src="./ft-community-post.js" />