Correct styling

FreeTubeApp · Oct 8, 2023 · 633cdec · 633cdec
1 parent 308c7ee
commit 633cdec
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 86 deletions.
diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -1,36 +1,35 @@
 /* stylelint-disable property-no-vendor-prefix */
 @use '../../scss-partials/_ft-list-item';
 
-$community-thumbnail-side-width: 65px;
-
 .ft-list-post.list {
-  box-sizing: border-box;
   margin-inline: 0 auto;
-  flex-direction: column;
-  justify-content: space-between;
+  flex-direction: row;
+  min-block-size: 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;
-  padding-block-end: 6px;
   .authorName {
     font-size: 15px;
     font-weight: bold;
     margin-block-end: 6px;
-    margin-inline: 5px 6px;
+    margin-inline: 0 6px;
     .authorNameLink {
       color: inherit;
       text-decoration: none;
@@ -55,7 +54,7 @@ $community-thumbnail-side-width: 65px;
   display: block;
   flex-direction: column;
   font-size: 15px;
-  margin-block-start: 4px;
+  margin-block: 8px 6px;
   max-inline-size: 210px;
   text-align: start;
 

diff --git a/src/renderer/components/ft-community-post/ft-community-post.vue b/src/renderer/components/ft-community-post/ft-community-post.vue
@@ -1,12 +1,10 @@
 <template>
-  <div
+  <ft-card
     v-if="!isLoading"
-    class="ft-list-post ft-list-item outside card list"
+    class="ft-list-post ft-list-item card list"
     :appearance="appearance"
   >
-    <div
-      class="author-div"
-    >
+    <div>
       <template
         v-if="authorThumbnails.length > 0"
       >
@@ -29,60 +27,36 @@
           alt=""
         >
       </template>
-      <p
-        class="authorName"
+    </div>
+    <div>
+      <div
+        class="author-div"
       >
-        <router-link
-          v-if="authorId"
-          :to="`/channel/${authorId}`"
-          class="authorNameLink"
+        <p
+          class="authorName"
         >
-          {{ author }}
-        </router-link>
-        <template
-          v-else
+          <router-link
+            v-if="authorId"
+            :to="`/channel/${authorId}`"
+            class="authorNameLink"
+          >
+            {{ author }}
+          </router-link>
+          <template
+            v-else
+          >
+            {{ author }}
+          </template>
+        </p>
+        <p
+          class="publishedText"
         >
-          {{ author }}
-        </template>
-      </p>
+          {{ publishedText }}
+        </p>
+      </div>
       <p
-        class="publishedText"
-      >
-        {{ 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=""
-      >
-    </tiny-slider>
-    <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=""
+        class="postText"
+        v-html="postText"
       />
       <tiny-slider
         v-if="type === 'multiImage' && postContent.content.length > 0"
@@ -107,34 +81,65 @@
         >
       </div>
       <div
-        v-if="type === 'poll' || type === 'quiz'"
+        v-if="type === 'video'"
       >
-        <ft-community-poll :data="postContent" />
+        <ft-list-video
+          :data="data.postContent.content"
+          appearance="result"
+          force-list-type="list"
+        />
+        <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=""
+          >
+        </tiny-slider>
+        <div
+          v-if="type === 'image' && postContent.content.length > 0"
+        >
+          <img
+            :src="getBestQualityImage(postContent.content)"
+            class="communityImage"
+            alt=""
+          >
+        </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>
       <div
-        v-if="type === 'playlist'"
-        class="playlistWrapper"
+        class="bottomSection"
       >
-        <ft-list-playlist
-          :data="postContent.content"
-          :appearance="appearance"
-        />
+        <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
-      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>
+  </ft-card>
 </template>
 
 <script src="./ft-community-post.js" />

diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
@@ -12,7 +12,7 @@
   margin-inline: 0;
   margin-block: 0 16px;
   padding-block: 0;
-  inline-size: 75%;
+  inline-size: 90%;
 }
 
 @media screen and (max-width: 680px) {