feat: show more video cards in each row

BewlyBewly · Jan 7, 2025 · e21ecc0 · e21ecc0
1 parent 0e282ce
commit e21ecc0
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 20 deletions.
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
@@ -398,7 +398,7 @@ provide('getVideoType', () => props.type!)
               <div flex="~ gap-1 justify-between items-start" w="full" pos="relative">
                 <h3
                   class="keep-two-lines"
-                  text="lg overflow-ellipsis $bew-text-1"
+                  text="overflow-ellipsis $bew-text-1"
                   cursor="pointer"
                 >
                   <a :href="videoUrl" target="_blank" :title="video.title">
@@ -453,17 +453,17 @@ provide('getVideoType', () => props.type!)
                   <br>
                 </div>
               </div>
-              <div mt-2 flex="~ gap-1">
+              <div mt-2 flex="~ gap-1 wrap" text="xs">
                 <!-- Tag -->
                 <span
                   v-if="video.tag"
-                  text="$bew-theme-color sm" lh-6 p="x-2" rounded="$bew-radius" bg="$bew-theme-color-20"
+                  text="$bew-theme-color" lh-6 p="x-2" rounded="$bew-radius" bg="$bew-theme-color-20"
                 >
                   {{ video.tag }}
                 </span>
                 <span
                   v-if="video.publishedTimestamp || video.capsuleText"
-                  bg="$bew-fill-1" p="x-2" rounded="$bew-radius" text="sm $bew-text-3" lh-6
+                  bg="$bew-fill-1" p="x-2" rounded="$bew-radius" text="$bew-text-3" lh-6
                   mr-1
                 >
                   {{ video.publishedTimestamp ? calcTimeSince(video.publishedTimestamp * 1000) : video.capsuleText?.trim() }}

diff --git 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` : '34px',
-      height: Array.isArray(author) && author.length > 1 ? '28px' : '34px',
-      marginRight: '12px',
+      width: Array.isArray(author) && author.length > 1 ? `${28 + (displayedAvatars?.length) * 6}px` : '30px',
+      height: Array.isArray(author) && author.length > 1 ? '28px' : '30px',
     }"
+    mr-2
     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` : '34px',
-        height: displayedAvatars.length > 1 ? `28px` : '34px',
+        width: displayedAvatars.length > 1 ? `28px` : '30px',
+        height: displayedAvatars.length > 1 ? `28px` : '30px',
       }"
       @click.stop=""
     >
@@ -57,7 +57,7 @@ const displayedAvatars = computed(() => {
       <!-- Following Flag -->
       <div
         v-if="item.followed && !Array.isArray(author)"
-        pos="absolute top-22px left-24px"
+        pos="absolute top-18px left-20px"
         w-14px h-14px
         bg="$bew-theme-color"
         border="2 outset solid white"
@@ -67,7 +67,7 @@ const displayedAvatars = computed(() => {
         <div color-white text-sm class="i-mingcute:check-fill w-8px h-8px" />
       </div>
       <div
-        v-else-if="isLive" pos="absolute top-22px left-24px"
+        v-else-if="isLive" pos="absolute top-18px left-20px"
         w-14px h-14px
         bg="$bew-theme-color"
         rounded="1/2" grid place-items-center

diff --git a/src/components/VideoCard/VideoCardSkeleton.vue b/src/components/VideoCard/VideoCardSkeleton.vue
@@ -13,7 +13,7 @@ defineProps<{
     <div aspect-video bg="$bew-skeleton" rounded="$bew-radius" />
     <div flex mt-5>
       <div
-        m="r-2" w="34px" h="34px" rounded="1/2" bg="$bew-skeleton"
+        m="r-2" w="30px" h="30px" rounded="1/2" bg="$bew-skeleton"
         shrink-0
       />
       <div w="[calc(100%-30px)]">
@@ -63,7 +63,7 @@ defineProps<{
         <div mt-4 flex="~ col gap-2">
           <div flex="~ items-center justify-start" w-inherit>
             <div
-              m="r-2" w="34px" h="34px" rounded="1/2" bg="$bew-skeleton"
+              m="r-2" w="30px" h="30px" rounded="1/2" bg="$bew-skeleton"
               shrink-0
             />
 

diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
@@ -216,7 +216,7 @@ function isMusic(item: FavoriteResource) {
           <Loading v-if="isFullPageLoading" w-full h-full pos="absolute top-0 left-0" mt--50px />
         </Transition>
         <!-- favorite list -->
-        <div grid="~ 2xl:cols-4 xl:cols-3 lg:cols-2 md:cols-1 gap-5" m="t-55px b-6">
+        <div grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 sm:cols-1 cols-1 gap-5" m="t-55px b-6">
           <TransitionGroup name="list">
             <VideoCard
               v-for="item in favoriteResources"

diff --git 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-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 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
@@ -406,7 +406,7 @@ defineExpose({ initData })
 
 <style lang="scss" scoped>
 .grid-adaptive {
-  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 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
@@ -203,7 +203,7 @@ defineExpose({ initData })
 
 <style lang="scss" scoped>
 .grid-adaptive {
-  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 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
@@ -262,7 +262,7 @@ defineExpose({ initData })
 }
 
 .grid-adaptive-video {
-  --uno: "grid 2xl:cols-4 xl:cols-3 lg:cols-2 md: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-adaptive-bangumi {

diff --git 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-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 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
@@ -165,7 +165,7 @@ defineExpose({ initData })
 
 <style lang="scss" scoped>
 .grid-adaptive {
-  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+  --uno: "grid 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 cols-1 gap-5";
 }
 
 .grid-two-columns {