From 2e45ef168410407f30a9fe83c1c3da7265de4f9f Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 29 Jun 2023 08:21:08 +0800
Subject: [PATCH] fix cards

---
 src/components/cards/MediaCard.vue        |  2 +-
 src/styles/styles.scss                    | 10 ++++++++++
 src/views/discover/MediaCardListView.vue  | 10 ++++------
 src/views/discover/MediaCardSlideView.vue | 14 +-------------
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 064919ec..a0405115 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -9,7 +9,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <VResponsive aspect-ratio="1/2" max-width="11rem">
+  <VResponsive aspect-ratio="1/2">
     <VCard>
       <VImg
         :src="props.media?.poster_path"
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 4444f9de..39dd4777 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -2,3 +2,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.grid-media-card {
+  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
+}
+
+.media-slide-card {
+  position: relative;
+  flex: 0 0 auto;
+  max-width: 11rem;
+}
diff --git a/src/views/discover/MediaCardListView.vue b/src/views/discover/MediaCardListView.vue
index 4338bd41..dbc01a19 100644
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -29,10 +29,8 @@ onMounted(fetchData);
 </script>
 
 <template>
-  <VRow>
-    <VCol v-for="data in dataList" :key="data.tmdb_id" cols="6" md="3" lg="2">
-      <MediaCard :media="data">
-      </MediaCard>
-    </VCol>
-  </VRow>
+  <div class="grid gap-3 grid-media-card">
+    <MediaCard v-for="data in dataList" :key="data.tmdb_id" :media="data">
+    </MediaCard>
+  </div>
 </template>
diff --git a/src/views/discover/MediaCardSlideView.vue b/src/views/discover/MediaCardSlideView.vue
index 1603b748..898f31a9 100644
--- a/src/views/discover/MediaCardSlideView.vue
+++ b/src/views/discover/MediaCardSlideView.vue
@@ -39,21 +39,9 @@ onMounted(fetchData);
       <MediaCard 
         :media="data" 
         @click="toggle"
-        class="mx-1" 
-        height="22rem"
-        width="11rem"
+        class="mx-1 media-slide-card" 
         :color="isSelected ? 'primary' : 'grey-lighten-1'"
       >
-        <div class="d-flex fill-height align-center justify-center">
-          <VScaleTransition>
-            <v-icon
-              v-if="isSelected"
-              color="white"
-              size="48"
-              icon="mdi-close-circle-outline"
-            ></v-icon>
-          </VScaleTransition>
-        </div>
       </MediaCard>
     </VSlideGroupItem>
   </VSlideGroup>