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

---
 src/components/cards/MediaCard.vue       | 8 +++++---
 src/views/discover/MediaCardListView.vue | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 4c2d409a..f32618cd 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -29,6 +29,8 @@ const getChipColor = (type: string) => {
       <VImg
         aspect-ratio="2/1"
         :src="props.media?.poster_path"
+        class="h-full w-full object-cover"
+        :class="hover.isHovering ? 'on-hover' : ''"
         cover
       >
         <VChip
@@ -49,7 +51,7 @@ const getChipColor = (type: string) => {
           v-show="hover.isHovering"
         >
           <span class="font-bold">{{ props.media?.year }}</span>
-          <h1 class="text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
+          <h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
             {{ props.media?.title }}
           </h1>
           <p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
@@ -68,7 +70,7 @@ const getChipColor = (type: string) => {
 </template>
 
 <style type="scss">
-.card-img-overlay {
-  box-shadow: 0 0 0 1px #ddd;
+.on-hover img {
+  @apply brightness-50;
 }
 </style>
diff --git a/src/views/discover/MediaCardListView.vue b/src/views/discover/MediaCardListView.vue
index bd378421..09b583a9 100644
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -29,7 +29,7 @@ onMounted(fetchData);
 </script>
 
 <template>
-  <div class="grid gap-3 grid-media-card">
+  <div class="grid gap-4 grid-media-card">
     <MediaCard v-for="data in dataList" 
       :key="data.tmdb_id" 
       :media="data">