From 92172fe1c042ce27c8e7c324d4a1066df1a66a78 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 7 Dec 2022 18:21:45 +0300
Subject: [PATCH] hide SEE ALL button when albums are few

+ remove album color from album card bg
---
 src/components/AlbumView/ArtistAlbums.vue     | 12 ++++--
 .../RightSideBar/Search/PlaylistsGrid.vue     | 42 -------------------
 src/components/shared/AlbumCard.vue           | 40 +++---------------
 3 files changed, 14 insertions(+), 80 deletions(-)
 delete mode 100644 src/components/RightSideBar/Search/PlaylistsGrid.vue

diff --git a/src/components/AlbumView/ArtistAlbums.vue b/src/components/AlbumView/ArtistAlbums.vue
index 4a9b0d20..d94191b8 100644
--- a/src/components/AlbumView/ArtistAlbums.vue
+++ b/src/components/AlbumView/ArtistAlbums.vue
@@ -1,10 +1,8 @@
 <template>
-  <div
-    class="artist-albums"
-  >
+  <div class="artist-albums">
     <h3>
       <span>{{ title }} </span>
-      <span class="see-more">SEE ALL</span>
+      <span class="see-more" v-if="maxAbumCards <= albums.length">SEE ALL</span>
     </h3>
     <div class="cards">
       <AlbumCard v-for="a in albums.slice(0, maxAbumCards)" :album="a" />
@@ -45,5 +43,11 @@ defineProps<{
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     gap: 5rem 0;
   }
+
+  .album-card {
+    &:hover {
+      background-color: $gray;
+    }
+  }
 }
 </style>
diff --git a/src/components/RightSideBar/Search/PlaylistsGrid.vue b/src/components/RightSideBar/Search/PlaylistsGrid.vue
deleted file mode 100644
index 27eac62a..00000000
--- a/src/components/RightSideBar/Search/PlaylistsGrid.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="albums-results bg-primary">
-    <div class="grid">
-      <PCard
-        v-for="album in search.albums.value"
-        :key="`${album.albumartists}-${album.title}`"
-        :album="album"
-      />
-    </div>
-    <LoadMore v-if="search.albums.more" @loadMore="loadMore()" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import useSearchStore from "../../../stores/search";
-
-const search = useSearchStore();
-
-function loadMore() {
-  search.updateLoadCounter("albums");
-  search.loadAlbums(search.loadCounter.albums);
-}
-</script>
-
-<style lang="scss">
-.right-search .albums-results {
-  border-radius: 0.5rem;
-  margin-top: $small;
-  padding: $small;
-  overflow-x: hidden;
-
-  .result-item:hover {
-    background-color: $gray4;
-  }
-
-  .grid {
-    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    flex-wrap: wrap;
-    gap: 0.75rem;
-  }
-}
-</style>
diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue
index 318858f6..f1d8794e 100644
--- a/src/components/shared/AlbumCard.vue
+++ b/src/components/shared/AlbumCard.vue
@@ -1,22 +1,11 @@
 <template>
-  <router-link
+  <RouterLink
     :to="{
       name: 'AlbumView',
       params: { hash: album.albumhash },
     }"
-    class="result-item"
-    :class="{
-      nocontrast: album.colors ? isLight(album.colors[0]) : false,
-    }"
+    class="album-card"
   >
-    <div
-      class="bg rounded"
-      :style="{
-        backgroundColor: `${
-          album.colors[0] ? album.colors[0] : 'rgb(72, 72, 74)'
-        }`,
-      }"
-    ></div>
     <div class="with-img">
       <img class="rounded-sm shadow-lg" :src="imguri + album.image" alt="" />
       <PlayBtn
@@ -41,17 +30,16 @@
         </RouterLink>
       </div>
     </div>
-  </router-link>
+  </RouterLink>
 </template>
 
 <script setup lang="ts">
 import { paths } from "../../config";
 import { Album } from "../../interfaces";
-import { isLight } from "@/composables/colors/album";
 import PlayBtn from "./PlayBtn.vue";
 
-import useAlbumStore from "@/stores/pages/album";
 import { playSources, Routes } from "@/composables/enums";
+import useAlbumStore from "@/stores/pages/album";
 
 const imguri = paths.images.thumb.large;
 defineProps<{
@@ -60,20 +48,13 @@ defineProps<{
 </script>
 
 <style lang="scss">
-.result-item.nocontrast {
-  &:hover {
-    color: $black;
-  }
-}
-
-.result-item {
+.album-card {
   display: grid;
   gap: $small;
   padding: $medium;
   border-radius: 1rem;
   height: fit-content;
   position: relative;
-  color: $white;
 
   .with-img {
     position: relative;
@@ -103,17 +84,8 @@ defineProps<{
     }
   }
 
-  .bg {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    opacity: 0;
-  }
-
   &:hover {
-    .bg {
-      opacity: 1;
-    }
+    background-color: $gray4;
   }
 
   img {