remove bottom content

src/components/AlbumView/Header.vue

@@ -30,9 +30,9 @@
       </div>
       <div class="bottom">
         <div class="stats">
-          {{ album.count }} Tracks • {{ formatSeconds(album.duration, true) }} •
+          {{ album.artist }} •
           {{ album.date }} •
-          {{ album.artist }}
+          {{ album.count }} Tracks • {{ formatSeconds(album.duration, true) }}
         </div>
         <PlayBtnRect
           :source="playSources.album"
@@ -59,6 +59,7 @@ import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 const props = defineProps<{
   album: AlbumInfo;
+  bio: string | null;
 }>();
 
 const emit = defineEmits<{
@@ -89,7 +90,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
 <style lang="scss">
 .a-header {
   display: grid;
-  grid-template-columns: max-content 1fr;
+  grid-template-columns: 1fr;
   gap: 1rem;
   padding: 1rem;
   height: 100% !important;
@@ -102,7 +103,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
     position: relative;
 
     img {
-      height: 16rem;
+      height: 6rem;
       aspect-ratio: 1;
       object-fit: cover;
       transition: all 0.2s ease-in-out;
@@ -122,7 +123,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
 
     .top {
       .h {
-        opacity: 0.75;
+        opacity: 0.5;
       }
       .title {
         font-size: 2.5rem;
@@ -150,9 +151,8 @@ useVisibility(albumheaderthing, handleVisibilityState);
     }
   }
 
+  // grid-template-columns: 1fr !important;
   @include for-desktop-down {
-    grid-template-columns: 1fr;
-
     .art > img {
       height: 6rem;
       box-shadow: 0 0 1rem $black;

src/components/FolderView/SongList.vue

@@ -25,7 +25,7 @@
         <div class="text">No tracks here</div>
       </div>
     </div>
-    <div class="copyright" v-if="copyright">
+    <div class="copyright" v-if="copyright && copyright()">
       {{ copyright() }}
     </div>
   </div>

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -11,7 +11,14 @@
         :alt="true"
       />
     </div>
-    <LoadMore v-if="search.artists.more" @loadMore="loadMore" />
+    <LoadMore
+      v-if="album_grid && search.albums.more"
+      :loader="search.loadAlbums"
+    />
+    <LoadMore
+      v-if="!album_grid && search.artists.more"
+      :loader="search.loadArtists"
+    />
   </div>
 </template>
 
@@ -28,10 +35,10 @@ defineProps<{
   album_grid?: boolean;
 }>();
 
-function loadMore() {
-  search.updateLoadCounter("artists");
-  search.loadArtists(search.loadCounter.artists);
-}
+// function loadMore() {
+//   search.updateLoadCounter("artists");
+//   search.loadArtists(search.loadCounter.artists);
+// }
 </script>
 
 <style lang="scss">

src/components/RightSideBar/Search/LoadMore.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="morexx">
-    <button @click="loadMore" class="btn">
+    <button class="btn" @click="loader">
       <div class="text">Load More</div>
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-const emit = defineEmits<{
-  (e: "loadMore"): void;
+defineProps<{
+  loader: () => void;
 }>();
 
-function loadMore() {
-  emit("loadMore");
-}
+
 </script>
 
 <style lang="scss">

src/components/RightSideBar/Search/TracksGrid.vue

@@ -11,7 +11,7 @@
         @PlayThis="updateQueue(index)"
       />
     </TransitionGroup>
-    <LoadMore v-if="search.tracks.more" @loadMore="loadMore" />
+    <LoadMore v-if="search.tracks.more" :loader="search.loadTracks" />
   </div>
 </template>
 
@@ -24,11 +24,6 @@ import useSearchStore from "../../../stores/search";
 const queue = useQStore();
 const search = useSearchStore();
 
-function loadMore() {
-  search.updateLoadCounter("tracks");
-  search.loadTracks(search.loadCounter.tracks);
-}
-
 function updateQueue(index: number) {
   queue.playFromSearch(search.query, search.tracks.value);
   queue.play(index);