From 27fa2c631dd24f2e12209b156300a2767ea2682d Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 29 Jun 2023 12:52:32 +0800
Subject: [PATCH] test cards

---
 src/components/cards/MediaCard.vue        | 81 +++++++++++------------
 src/views/discover/MediaCardSlideView.vue | 17 ++---
 2 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 131bf19e..dc5398fb 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -9,51 +9,46 @@ const props = defineProps({
 </script>
 
 <template>
-  <VHover>
-  <template v-slot="{ isHovering }">
-    <VCard
-      class="card-img-overlay"
-      :class="isHovering ? 'bg-opacity-50' : ''"
+  <VCard
+    class="card-img-overlay"
+  >
+    <VImg
+      aspect-ratio="2/1"
+      :src="props.media?.poster_path"
+      cover
     >
-      <VImg
-        aspect-ratio="2/1"
-        :src="props.media?.poster_path"
-        cover
+      <VChip
+        color="success"
+        variant="elevated" 
+        size="small" 
+        class="absolute left-2 top-2">
+          {{ props.media?.type }}
+      </VChip>
+      <VChip
+        color="primary"
+        variant="elevated" 
+        size="small" 
+        class="absolute right-2 top-2">
+          {{ props.media?.vote_average }}
+      </VChip>
+      <VCardText
+        class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer"
       >
-        <VChip
-          color="success"
-          variant="elevated" 
-          size="small" 
-          class="absolute left-2 top-2">
-            {{ props.media?.type }}
-        </VChip>
-        <VChip
-          color="primary"
-          variant="elevated" 
-          size="small" 
-          class="absolute right-2 top-2">
-            {{ props.media?.vote_average }}
-        </VChip>
-        <VCardText
-          class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer"
-        >
-          <span class="text-white font-bold">{{ props.media?.year }}</span>
-          <h1 class="text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
-            {{ props.media?.title }}
-          </h1>
-          <p class="text-white line-clamp-3 overflow-hidden text-ellipsis ...">
-            {{ props.media?.overview }}
-          </p>
-          <div class="flex align-center justify-between">
-            <IconBtn icon="mdi-magnify" color="white"
-            />
-            <IconBtn icon="mdi-heart" color="white" />
-          </div>
-        </VCardText>
-      </VImg>
-    </VCard>
-  </template>
-  </VHover>
+        <span class="text-white font-bold">{{ props.media?.year }}</span>
+        <h1 class="text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
+          {{ props.media?.title }}
+        </h1>
+        <p class="text-white line-clamp-3 overflow-hidden text-ellipsis ...">
+          {{ props.media?.overview }}
+        </p>
+        <div class="flex align-center justify-between">
+          <IconBtn icon="mdi-magnify" color="white"
+          />
+          <IconBtn icon="mdi-heart" color="white" />
+        </div>
+      </VCardText>
+    </VImg>
+  </VCard>
 </template>
 
 <style type="scss">
diff --git a/src/views/discover/MediaCardSlideView.vue b/src/views/discover/MediaCardSlideView.vue
index 898f31a9..1067c4be 100644
--- a/src/views/discover/MediaCardSlideView.vue
+++ b/src/views/discover/MediaCardSlideView.vue
@@ -34,15 +34,16 @@ onMounted(fetchData);
   >
     <VSlideGroupItem v-for="data in dataList" 
       :key="data.tmdb_id"
-      v-slot="{ isSelected, toggle }"
     >
-      <MediaCard 
-        :media="data" 
-        @click="toggle"
-        class="mx-1 media-slide-card" 
-        :color="isSelected ? 'primary' : 'grey-lighten-1'"
-      >
-      </MediaCard>
+      <template v-slot="{ isSelected, toggle }" >
+        <MediaCard
+          :media="data" 
+          @click="toggle"
+          class="mx-2 media-slide-card" 
+          :color="isSelected ? 'primary' : 'grey-lighten-1'"
+        >
+        </MediaCard>
+      </template>
     </VSlideGroupItem>
   </VSlideGroup>
 </template>