fix album and artist card search results responsiveness

src/assets/scss/Global/index.scss

@@ -15,7 +15,7 @@ body {
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-family: "SF Compact Display" !important;
+  font-family: "SFCompactDisplay" !important;
   font-size: 1rem;
   image-rendering: -webkit-optimize-contrast;
   width: calc(100vw - 1rem);

src/assets/scss/index.scss

@@ -9,6 +9,6 @@
 
 
 @font-face {
-    font-family: "SF Compact Display";
+    font-family: "SFCompactDisplay";
     src: url("../sf-compact.woff") format("woff");
 }

src/components/FolderView/SongList.vue

@@ -6,9 +6,6 @@
         <div class="disc-number" v-if="$route.name === Routes.folder">
           In this folder
         </div>
-        <div class="disc-number" v-if="$route.name === Routes.playlist">
-          &nbsp;
-        </div>
       </div>
       <div class="songlist">
         <SongItem

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="artists-results" v-if="search.artists.value.length">
+  <div class="artists-results">
-    <div class="search-results-grid">
+    <div class="search-results-grid" v-if="album_grid == true">
+      <AlbumCard v-for="a in search.albums.value" :key="a.albumid" :album="a" />
+    </div>
+    <div class="search-results-grid" v-else>
       <ArtistCard
         v-for="artist in search.artists.value"
         :key="artist.image"
@@ -14,10 +17,17 @@
 
 <script setup lang="ts">
 import useSearchStore from "../../../stores/search";
+
+import AlbumCard from "@/components/shared/AlbumCard.vue";
 import ArtistCard from "../../shared/ArtistCard.vue";
 import LoadMore from "./LoadMore.vue";
+
 const search = useSearchStore();
 
+defineProps<{
+  album_grid?: boolean;
+}>();
+
 function loadMore() {
   search.updateLoadCounter("artists");
   search.loadArtists(search.loadCounter.artists);
@@ -25,18 +35,14 @@ function loadMore() {
 </script>
 
 <style lang="scss">
-.right-search .artists-results {
+.artists-results {
   display: grid;
   margin: 0 1rem;
+}
 
-  .xartist {
+.search-results-grid {
-    background-color: $gray;
+  display: grid;
-
+  grid-template-columns: repeat(3, 1fr);
-    .artist-image {
+  gap: 0.75rem;
-      width: 7rem;
-      height: 7rem;
-      object-fit: cover;
-    }
-  }
 }
 </style>

src/components/RightSideBar/Search/Main.vue

@@ -5,7 +5,7 @@
         <TracksGrid />
       </Tab>
       <Tab name="albums">
-        <AlbumGrid />
+        <ArtistGrid :album_grid="true" />
       </Tab>
       <Tab name="artists">
         <ArtistGrid />
@@ -15,7 +15,6 @@
 </template>
 
 <script setup lang="ts">
-import AlbumGrid from "./AlbumGrid.vue";
 import ArtistGrid from "./ArtistGrid.vue";
 import Tab from "./Tab.vue";
 import TabsWrapper from "./TabsWrapper.vue";
@@ -36,11 +35,7 @@ import TracksGrid from "./TracksGrid.vue";
     font-size: 2rem;
     color: $white;
   }
-  .search-results-grid {
+
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.75rem;
-  }
 
   .input {
     display: flex;

src/components/shared/AlbumCard.vue

@@ -6,17 +6,11 @@
     }"
     class="result-item"
   >
-    <div class="img">
+    <img class="rounded" :src="imguri + album.image" alt="" />
-      <div
+    <div>
-        class="album-art image"
+      <h4 class="title ellip">{{ album.title }}</h4>
-        :style="{
+      <div class="artist ellip">{{ album.artist }}</div>
-          backgroundImage: `url(&quot;${imguri + album.image}&quot;)`,
-        }"
-      ></div>
-      <div class="play shadow-lg image"></div>
     </div>
-    <div class="title ellip">{{ album.title }}</div>
-    <div class="artistsx ellipsis">{{ album.artist }}</div>
   </router-link>
 </template>
 
@@ -32,60 +26,31 @@ defineProps<{
 
 <style lang="scss">
 .result-item {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  gap: $small;
-  align-items: center;
   padding: $small;
-  border-radius: 0.75rem;
-  text-align: left !important;
   background-color: $gray4;
-  color: #ffffffde !important;
   transition: all 0.5s ease;
-  min-width: 8.5rem;
+  border-radius: .7rem;
 
-  .img {
+  img {
-    position: relative;
+    width: 100%;
-
+    height: auto;
-    &:hover {
-      .play {
-        visibility: visible;
-      }
   }
 
-    .play {
+  h4 {
-      width: 3rem;
+    margin: 0;
-      height: 3rem;
-      background-color: $gray;
-      border-radius: 1rem;
-      position: absolute;
-      left: 2rem;
-      bottom: 2.5rem;
-      background-image: url("../../assets/icons/play.svg");
-      background-size: 2rem;
-      background-position: 60% 50%;
-      visibility: hidden;
-    }
-
-    .album-art {
-      height: 7.5rem;
-      width: 7.5rem;
-      border-radius: 0.5rem;
-      margin-bottom: 0.5rem;
-    }
   }
 
   .title {
-    width: 7rem;
+    margin-bottom: $smaller;
-    margin-bottom: 0.25rem;
     font-size: 0.9rem;
-    font-weight: bold;
   }
 
-  .artistsx {
+  .artist {
-    width: 7rem;
     font-size: 0.8rem;
     text-align: left;
-    color: #ffffffbd;
+    opacity: .75;
   }
 }
 </style>

src/components/shared/ArtistCard.vue

@@ -3,7 +3,6 @@
     <img
       class="artist-image shadow-sm"
       :src="imguri + artist.image"
-      alt=""
       loading="lazy"
     />
     <div>
@@ -30,13 +29,10 @@ defineProps<{
   overflow: hidden;
   position: relative;
 
-  min-width: 8.5em;
-  height: 11em;
   border-radius: 0.75rem;
-  display: flex;
+  display: grid;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
+  padding: 1rem $small;
   cursor: pointer;
 
   .artist-image {
@@ -66,5 +62,15 @@ defineProps<{
 
 ._is_on_sidebar {
   background-color: $gray4 !important;
+
+  .artist-image {
+    width: 7rem;
+    height: 7rem;
+
+    @include for-desktop-down {
+      width: 6rem;
+      height: 6rem;
+    }
+  }
 }
 </style>

src/layouts/HeaderContentBottom.vue

@@ -113,6 +113,10 @@ function toggleBottom() {
 
     .ap-page-content {
       padding-bottom: 16rem;
+      
+      @include for-desktop-down {
+        min-height: calc(100vh - 38.75rem);
+      }
     }
   }
 

src/views/FolderView.vue

@@ -33,7 +33,7 @@ import { isSameRoute } from "@/composables/perks";
 const loader = useLoaderStore();
 const FStore = useFStore();
 
-const scrollable = ref(null);
+const scrollable = ref<any>(null);
 
 function getFolderName(route: RouteLocationNormalized) {
   const path = route.params.path as string;
@@ -47,7 +47,6 @@ onBeforeRouteUpdate((to, from) => {
   FStore.fetchAll(to.params.path as string)
 
     .then(() => {
-      console.log("fetched");
       scrollable.value.scrollTop = 0;
     })
     .then(() => {

src/views/playlist/index.vue

@@ -35,7 +35,7 @@ onMounted(() => {
   playlist.fetchArtists(route.params.pid as string);
 });
 
-onUnmounted(() => playlist.reset());
+onUnmounted(() => playlist.resetArtists());
 </script>
 
 <style lang="scss"></style>