From 55aa3f182380d82b00af6d9f7141775a825cee35 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 17 Oct 2023 11:45:15 +0800
Subject: [PATCH] refactor: rename `AnimeCard` to `LongCoverCard` * refactor: 
 rename `AnimeCardSkeleton` to `LongCoverCardSkeleton` * style: add hover
 effect to `AnimeCard`

---
 .../LongCoverCard/LongCoverCard.vue}          | 60 +++++++++++--------
 .../LongCoverCard/LongCoverCardSkeleton.vue}  |  0
 src/contentScripts/views/Anime/Anime.vue      | 14 ++---
 3 files changed, 41 insertions(+), 33 deletions(-)
 rename src/{contentScripts/views/Anime/components/AnimeCard.vue => components/LongCoverCard/LongCoverCard.vue} (68%)
 rename src/{contentScripts/views/Anime/components/AnimeCardSkeleton.vue => components/LongCoverCard/LongCoverCardSkeleton.vue} (100%)

diff --git a/src/contentScripts/views/Anime/components/AnimeCard.vue b/src/components/LongCoverCard/LongCoverCard.vue
similarity index 68%
rename from src/contentScripts/views/Anime/components/AnimeCard.vue
rename to src/components/LongCoverCard/LongCoverCard.vue
index 2e228925..40355b8e 100644
--- a/src/contentScripts/views/Anime/components/AnimeCard.vue
+++ b/src/components/LongCoverCard/LongCoverCard.vue
@@ -15,34 +15,43 @@ defineProps<{
 
 <template>
   <div>
+    <!-- Cover -->
     <a
-      rounded="$bew-radius" w-full aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-3" relative
+      rounded="$bew-radius" w-full aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-4" relative
       class="group"
       :href="url" target="_blank" tabindex="-1"
     >
       <div
-        v-if="rank"
-        w-full
-        pos="absolute bottom-0" z-1
-        text="white 7xl shadow-xl"
-        px-2 fw-bold h-150px flex items-end
-        bg="gradient-to-b gradient-from-transparent gradient-to-[rgba(0,0,0,.6)]"
-        rounded-b="$bew-radius"
+        group-hover:shadow group-hover:transform="translate--4px"
+        transition="all ease-in-out 300" rounded="$bew-radius"
+        style="--un-shadow:
+        0 0 0 4px var(--bew-theme-color),
+        8px 8px 0 2px var(--bew-theme-color-60),
+        14px 14px 0 2px var(--bew-theme-color-40)"
       >
-        {{ rank }}
-      </div>
+        <div
+          v-if="rank"
+          w-full
+          pos="absolute bottom-0" z-1
+          text="white 7xl shadow-xl"
+          p-2 fw-bold h-150px flex items-end
+          bg="gradient-to-b gradient-from-transparent gradient-to-[rgba(0,0,0,.6)]"
+          rounded-b="$bew-radius"
+        >
+          {{ rank }}
+        </div>
 
-      <div
-        overflow-hidden
-        rounded="$bew-radius"
-        aspect="12/16"
-        mb-4
-        pos="relative"
-        bg="$bew-fill-3"
-      >
+        <div
+          overflow-hidden
+          rounded="$bew-radius"
+          aspect="12/16"
+          mb-4
+          pos="relative"
+          bg="$bew-fill-3"
+        >
 
-        <!-- anime genres -->
-        <!-- <div
+          <!-- anime genres -->
+          <!-- <div
           v-if="tags && tags?.length > 0"
           pos="absolute bottom-0" w-full h-180px flex items-end z-1
           opacity="0 group-hover:100"
@@ -69,11 +78,11 @@ defineProps<{
           </div>
         </div> -->
 
-        <img
-          :src="`${removeHttpFromUrl(cover)}@466w_622h.webp`"
-          :alt="title"
-          rounded="$bew-radius" aspect="12/16" max-w-full w-full
-        >
+          <img
+            :src="`${removeHttpFromUrl(cover)}@466w_622h.webp`"
+            :alt="title"
+            rounded="$bew-radius" aspect="12/16" max-w-full w-full
+          >
 
         <!-- image after hovering -->
         <!-- <div
@@ -99,6 +108,7 @@ defineProps<{
           );
         "
         /> -->
+        </div>
       </div>
     </a>
     <p un-text="lg" my-4>
diff --git a/src/contentScripts/views/Anime/components/AnimeCardSkeleton.vue b/src/components/LongCoverCard/LongCoverCardSkeleton.vue
similarity index 100%
rename from src/contentScripts/views/Anime/components/AnimeCardSkeleton.vue
rename to src/components/LongCoverCard/LongCoverCardSkeleton.vue
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index e254e302..9fae44ce 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 // import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
 import AnimeTimeTable from './components/AnimeTimeTable.vue'
-import AnimeCard from './components/AnimeCard.vue'
-import AnimeCardSkeleton from './components/AnimeCardSkeleton.vue'
 import type { AnimeItem, PopularAnime } from './types'
 import { getUserID, openLinkToNewTab } from '~/utils/main'
 import { numFormatter } from '~/utils/dataFormatter'
@@ -127,7 +125,7 @@ function getPopularAnimeList() {
         <HorizontalScrollView w="[calc(100%+1.5rem)]">
           <div w-full flex>
             <template v-if="isLoadingAnimeWatchList">
-              <AnimeCardSkeleton
+              <LongCoverCardSkeleton
                 v-for="item in 6" :key="item"
                 w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
                 last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
@@ -136,7 +134,7 @@ function getPopularAnimeList() {
                 last:pr-6
               />
             </template>
-            <AnimeCard
+            <LongCoverCard
               v-for="item in animeWatchList"
               :key="item.episode_id"
               :url="item.url"
@@ -178,7 +176,7 @@ function getPopularAnimeList() {
         <HorizontalScrollView w="[calc(100%+1.5rem)]">
           <div w-full flex>
             <template v-if="isLoadingPopularAnime">
-              <AnimeCardSkeleton
+              <LongCoverCardSkeleton
                 v-for="item in 6" :key="item"
                 w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
                 last:w="2xl:1/6 xl:1/5 lg:1/4 md:1/3 sm:1/2 full"
@@ -187,7 +185,7 @@ function getPopularAnimeList() {
                 last:pr-6
               />
             </template>
-            <AnimeCard
+            <LongCoverCard
               v-for="item in popularAnimeList"
               :key="item.episode_id"
               w="2xl:[calc(100%/6-1.5rem)] xl:[calc(100%/5-1.5rem)] lg:[calc(100%/4-1.5rem)] md:[calc(100%/3-1.5rem)] sm:[calc(100%/2-1.5rem)] [calc(100%-1.5rem)]"
@@ -223,7 +221,7 @@ function getPopularAnimeList() {
           {{ $t('anime.recommended_for_you') }}
         </h3>
         <div grid="~ 2xl:cols-6 xl:cols-5 lg:cols-4 md:cols-3 sm:cols-2 cols-1 gap-6">
-          <AnimeCard
+          <LongCoverCard
             v-for="item in recommendAnimeList"
             :key="item.episode_id"
             :url="item.link"
@@ -238,7 +236,7 @@ function getPopularAnimeList() {
           />
 
           <template v-if="isLoadingRecommendAnime">
-            <AnimeCardSkeleton
+            <LongCoverCardSkeleton
               v-for="item in 30" :key="item"
             />
           </template>