From d565ed12724ad29a18c99a026b533eb6d32b7c7a Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 29 Jun 2023 12:33:30 +0800
Subject: [PATCH] fix MediaCard

---
 src/components/cards/MediaCard.vue | 51 +++++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index a0405115..131bf19e 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -9,12 +9,55 @@ const props = defineProps({
 </script>
 
 <template>
-  <VResponsive aspect-ratio="1/2">
-    <VCard>
+  <VHover>
+  <template v-slot="{ isHovering }">
+    <VCard
+      class="card-img-overlay"
+      :class="isHovering ? 'bg-opacity-50' : ''"
+    >
       <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"
+        >
+          <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>
-  </VResponsive>
+  </template>
+  </VHover>
 </template>
+
+<style type="scss">
+.card-img-overlay {
+  box-shadow: 0 0 0 1px #ddd;
+}
+</style>