From 2fc30aaa71f9acf7fcda5363ee50bb58a8276ae2 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 8 Jan 2025 01:21:46 +0800
Subject: [PATCH] feat(video-card): revert to a five-column video card grid
 layout

---
 src/components/VideoCard/VideoCard.vue                 |  6 +++---
 .../components/VideoCardAuthorAvatar.vue               | 10 +++++-----
 src/components/VideoCard/VideoCardSkeleton.vue         |  4 ++--
 src/contentScripts/views/Home/components/Following.vue |  2 +-
 src/contentScripts/views/Home/components/ForYou.vue    |  2 +-
 src/contentScripts/views/Home/components/Live.vue      |  2 +-
 src/contentScripts/views/Home/components/Ranking.vue   |  2 +-
 .../views/Home/components/SubscribedSeries.vue         |  2 +-
 src/contentScripts/views/Home/components/Trending.vue  |  2 +-
 9 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 331708bf..ce35a140 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -416,7 +416,7 @@ provide('getVideoType', () => props.type!)
               <div flex="~ gap-1 justify-between items-start" w="full" pos="relative">
                 <h3
                   class="keep-two-lines"
-                  text="overflow-ellipsis $bew-text-1"
+                  text="overflow-ellipsis $bew-text-1 lg"
                   cursor="pointer"
                 >
                   <a :href="videoUrl" target="_blank" :title="video.title">
@@ -429,7 +429,7 @@ provide('getVideoType', () => props.type!)
                   ref="moreBtnRef"
                   :class="{ 'more-active': showVideoOptions }"
                   bg="hover:$bew-fill-2 active:$bew-fill-3"
-                  shrink-0 w-30px h-30px m="t--3px r--4px"
+                  shrink-0 w-32px h-32px m="t--3px r--4px"
                   grid place-items-center cursor-pointer rounded="50%" duration-300
                   @click.stop.prevent="handleMoreBtnClick"
                 >
@@ -471,7 +471,7 @@ provide('getVideoType', () => props.type!)
                   <br>
                 </div>
               </div>
-              <div mt-2 flex="~ gap-1 wrap" text="xs">
+              <div mt-2 flex="~ gap-1 wrap" text="sm">
                 <!-- Tag -->
                 <span
                   v-if="video.tag"
diff --git a/src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue b/src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue
index 9abf3b4e..d3aee677 100644
--- a/src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue
+++ b/src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue
@@ -24,10 +24,10 @@ const displayedAvatars = computed(() => {
 <template>
   <div
     :style="{
-      width: Array.isArray(author) && author.length > 1 ? `${28 + (displayedAvatars?.length) * 6}px` : '30px',
-      height: Array.isArray(author) && author.length > 1 ? '28px' : '30px',
+      width: Array.isArray(author) && author.length > 1 ? `${28 + (displayedAvatars?.length) * 6}px` : '34px',
+      height: Array.isArray(author) && author.length > 1 ? '28px' : '34px',
     }"
-    mr-2
+    mr-4
     pos="relative"
     shrink-0
   >
@@ -41,8 +41,8 @@ const displayedAvatars = computed(() => {
       :style="{
         zIndex: displayedAvatars.length - index,
         left: `${index * 6}px`,
-        width: displayedAvatars.length > 1 ? `28px` : '30px',
-        height: displayedAvatars.length > 1 ? `28px` : '30px',
+        width: displayedAvatars.length > 1 ? `28px` : '34px',
+        height: displayedAvatars.length > 1 ? `28px` : '34px',
       }"
       @click.stop=""
     >
diff --git a/src/components/VideoCard/VideoCardSkeleton.vue b/src/components/VideoCard/VideoCardSkeleton.vue
index ba143426..b3a3562f 100644
--- a/src/components/VideoCard/VideoCardSkeleton.vue
+++ b/src/components/VideoCard/VideoCardSkeleton.vue
@@ -13,10 +13,10 @@ defineProps<{
     <div aspect-video bg="$bew-skeleton" rounded="$bew-radius" />
     <div flex mt-5>
       <div
-        m="r-2" w="30px" h="30px" rounded="1/2" bg="$bew-skeleton"
+        m="r-4" w="34px" h="34px" rounded="1/2" bg="$bew-skeleton"
         shrink-0
       />
-      <div w="[calc(100%-30px)]">
+      <div w="[calc(100%-34px)]">
         <div flex="~ col gap-2" mb-4 w-inherit>
           <div w-full h-5 bg="$bew-skeleton" rounded-4px />
           <div w="3/4" h-5 bg="$bew-skeleton" rounded-4px />
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 63be212c..898da295 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -333,7 +333,7 @@ defineExpose({ initData })
 
 <style lang="scss" scoped>
 .grid-adaptive {
-  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 cols-1 gap-5";
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 sm:cols-1 cols-1 gap-5";
 }
 
 .grid-two-columns {
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 05ee7831..87348128 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -406,7 +406,7 @@ defineExpose({ initData })
 
 <style lang="scss" scoped>
 .grid-adaptive {
-  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 cols-1 gap-5";
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 sm:cols-1 cols-1 gap-5";
 }
 
 .grid-two-columns {
diff --git a/src/contentScripts/views/Home/components/Live.vue b/src/contentScripts/views/Home/components/Live.vue
index 165ea0c6..57c3c56f 100644
--- a/src/contentScripts/views/Home/components/Live.vue
+++ b/src/contentScripts/views/Home/components/Live.vue
@@ -203,7 +203,7 @@ defineExpose({ initData })
 
 <style lang="scss" scoped>
 .grid-adaptive {
-  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 cols-1 gap-5";
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 sm:cols-1 cols-1 gap-5";
 }
 
 .grid-two-columns {
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 5945ca84..8fcc66c7 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -262,7 +262,7 @@ defineExpose({ initData })
 }
 
 .grid-adaptive-video {
-  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 sm:cols-1 cols-1 gap-5";
+  --uno: "grid 2xl:cols-4 xl:cols-3 lg:cols-2 md:cols-1 sm:cols-1 cols-1 gap-5";
 }
 
 .grid-adaptive-bangumi {
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index f0d317e6..1a077fdc 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -214,7 +214,7 @@ defineExpose({ initData })
 
 <style lang="scss" scoped>
 .grid-adaptive {
-  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 cols-1 gap-5";
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 sm:cols-1 cols-1 gap-5";
 }
 
 .grid-two-columns {
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index aea8247d..33af7d34 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -165,7 +165,7 @@ defineExpose({ initData })
 
 <style lang="scss" scoped>
 .grid-adaptive {
-  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 cols-1 gap-5";
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 sm:cols-1 cols-1 gap-5";
 }
 
 .grid-two-columns {