From 3c527f1841c0114cefb5d3e76ba12f566de6d829 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 2 Sep 2022 18:19:40 +0300
Subject: [PATCH] redesign playlist card

---
 src/components/PlaylistsList/PlaylistCard.vue | 41 +++++++++++++++----
 src/views/PlaylistList.vue                    | 16 ++++----
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/components/PlaylistsList/PlaylistCard.vue b/src/components/PlaylistsList/PlaylistCard.vue
index 0254fe9b..e0940037 100644
--- a/src/components/PlaylistsList/PlaylistCard.vue
+++ b/src/components/PlaylistsList/PlaylistCard.vue
@@ -2,10 +2,14 @@
   <router-link
     :to="{ name: 'PlaylistView', params: { pid: props.playlist.playlistid } }"
     :playlist="props.playlist"
-    class="p-card rounded"
+    class="p-card rounded noscroll"
   >
-    <img :src="imguri + props.playlist.thumb"/>
-    <div class="bottom">
+    <img :src="imguri + props.playlist.thumb" />
+    <div class="overlay pad-lg">
+      <div class="p-name">{{ playlist.name }}</div>
+      <div class="p-count">{{ playlist.count }} Tracks</div>
+    </div>
+    <!-- <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
       <div class="count">
         <span v-if="props.playlist.count == 0">No Tracks</span>
@@ -14,11 +18,12 @@
         >
         <span v-else>{{ props.playlist.count }} Tracks</span>
       </div>
-    </div>
+    </div> -->
   </router-link>
 </template>
 
 <script setup lang="ts">
+import play from "@/composables/usePlayFrom";
 import { paths } from "../../config";
 import { Playlist } from "../../interfaces";
 
@@ -31,19 +36,39 @@ const props = defineProps<{
 
 <style lang="scss">
 .p-card {
-  width: 100%;
-  padding: $medium;
   transition: all 0.25s ease;
   position: relative;
   background-color: $playlist-card-bg;
+  height: 10rem;
 
   img {
     width: 100%;
-    aspect-ratio: 1;
+    height: 100%;
+    aspect-ratio: 1/1.2;
     object-fit: cover;
     border-radius: $medium;
   }
 
+  .overlay {
+    position: absolute;
+    top: 0;
+    background-image: linear-gradient(
+      to top,
+      rgba(22, 22, 22, 0.507),
+      transparent 50%
+    );
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    .p-count {
+      opacity: 0.75;
+      font-size: 0.75rem;
+    }
+  }
+
   &:hover {
     background-color: $darkestblue;
   }
@@ -57,7 +82,7 @@ const props = defineProps<{
 
     .count {
       font-size: $medium;
-      opacity: .5;
+      opacity: 0.5;
     }
   }
 }
diff --git a/src/views/PlaylistList.vue b/src/views/PlaylistList.vue
index 33c86987..d30d1a46 100644
--- a/src/views/PlaylistList.vue
+++ b/src/views/PlaylistList.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="p-view">
     <div class="grid">
-      <NewPlaylistCard />
+      <!-- <NewPlaylistCard /> -->
       <PlaylistCard
         v-for="p in pStore.playlists"
         :key="p.playlistid"
@@ -25,16 +25,16 @@ const pStore = usePStore();
   scrollbar-color: $gray2 transparent;
 
   .grid {
-    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
     gap: 1rem;
 
-    @include for-desktop-down {
-      grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    // @include for-desktop-down {
+    //   grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 
-      .name {
-        font-size: 0.9rem;
-      }
-    }
+    //   .name {
+    //     font-size: 0.9rem;
+    //   }
+    // }
   }
 }
 </style>