From bd38c0e7a2db1c0374f2260bfa4f026ea2185a19 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 10 Jan 2023 18:27:59 +0300
Subject: [PATCH] redesign sidebar search load more buttons to match search
 page

---
 src/assets/scss/Global/basic.scss               |  6 ++++++
 .../RightSideBar/Search/ArtistGrid.vue          | 14 +++++++++-----
 src/components/RightSideBar/Search/LoadMore.vue | 17 +++++++++++++----
 src/components/RightSideBar/Search/Tab.vue      |  4 +---
 .../RightSideBar/Search/TabsWrapper.vue         |  1 -
 .../RightSideBar/Search/TracksGrid.vue          | 12 +++++++++++-
 src/views/SearchView/main.vue                   | 12 +++---------
 7 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss
index c7d0e7e7..0f7f4f7e 100644
--- a/src/assets/scss/Global/basic.scss
+++ b/src/assets/scss/Global/basic.scss
@@ -142,3 +142,9 @@ button {
 .no-select {
   user-select: none;
 }
+
+.load_disabled {
+  pointer-events: all;
+  background: $gray5 !important;
+  opacity: 1;
+}
diff --git a/src/components/RightSideBar/Search/ArtistGrid.vue b/src/components/RightSideBar/Search/ArtistGrid.vue
index 4c05b12a..916b63e9 100644
--- a/src/components/RightSideBar/Search/ArtistGrid.vue
+++ b/src/components/RightSideBar/Search/ArtistGrid.vue
@@ -19,13 +19,15 @@
     </div>
     <div v-else class="t-center"><h5>💔 No results 💔</h5></div>
     <LoadMore
-      v-if="album_grid && search.albums.more"
-      :loader="search.loadAlbums"
+      v-if="search.albums.value.length || search.artists.value.length"
+      :loader="album_grid ? search.loadAlbums : search.loadArtists"
+      :can_load_more="album_grid ? search.albums.more : search.artists.more"
     />
-    <LoadMore
-      v-if="!album_grid && search.artists.more"
+    <!-- <LoadMore
+      v-if="!album_grid"
       :loader="search.loadArtists"
-    />
+      :can_load_more="search.artists.more"
+    /> -->
   </div>
 </template>
 
@@ -53,5 +55,7 @@ defineProps<{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
   gap: 0.75rem;
+  min-height: 10rem;
+  padding-bottom: $small;
 }
 </style>
diff --git a/src/components/RightSideBar/Search/LoadMore.vue b/src/components/RightSideBar/Search/LoadMore.vue
index cf14ccc3..83b938ef 100644
--- a/src/components/RightSideBar/Search/LoadMore.vue
+++ b/src/components/RightSideBar/Search/LoadMore.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="morexx">
-    <button class="btn" @click.prevent="loader()">
-      <div class="text">Load More</div>
+    <button
+      @click.prevent="loader()"
+      :class="{
+        load_disabled: !can_load_more,
+      }"
+    >
+      <div class="text">Load More {{ can_load_more }}</div>
     </button>
   </div>
 </template>
@@ -9,9 +14,8 @@
 <script setup lang="ts">
 defineProps<{
   loader: () => void;
+  can_load_more: boolean;
 }>();
-
-
 </script>
 
 <style lang="scss">
@@ -19,9 +23,14 @@ defineProps<{
   display: grid;
   place-items: center;
   margin-top: $small;
+  background-color: red;
 
   button {
     padding: 0 1rem !important;
+    width: calc(100% + 2rem);
+    border-radius: 0;
+    height: 3rem;
+    background: $darkestblue;
   }
 }
 </style>
diff --git a/src/components/RightSideBar/Search/Tab.vue b/src/components/RightSideBar/Search/Tab.vue
index 9c80753a..d52e6743 100644
--- a/src/components/RightSideBar/Search/Tab.vue
+++ b/src/components/RightSideBar/Search/Tab.vue
@@ -1,7 +1,5 @@
 <template>
-  <div style="height: 100%">
-    <component :is="getComponent()?.component" v-bind="getComponent()?.props" />
-  </div>
+  <component :is="getComponent()?.component" v-bind="getComponent()?.props" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/RightSideBar/Search/TabsWrapper.vue b/src/components/RightSideBar/Search/TabsWrapper.vue
index 5a1d98ee..bb4d71c8 100644
--- a/src/components/RightSideBar/Search/TabsWrapper.vue
+++ b/src/components/RightSideBar/Search/TabsWrapper.vue
@@ -52,7 +52,6 @@ const emit = defineEmits<{
   height: 100%;
   overflow: scroll;
   overflow-x: hidden;
-  padding-bottom: 1rem;
 }
 
 #right-tabs.tabContent {
diff --git a/src/components/RightSideBar/Search/TracksGrid.vue b/src/components/RightSideBar/Search/TracksGrid.vue
index 0c803af0..26cda857 100644
--- a/src/components/RightSideBar/Search/TracksGrid.vue
+++ b/src/components/RightSideBar/Search/TracksGrid.vue
@@ -15,7 +15,11 @@
       />
     </div>
     <div v-else class="t-center"><h5>💔 No results 💔</h5></div>
-    <LoadMore v-if="search.tracks.more" :loader="search.loadTracks" />
+    <LoadMore
+      :loader="search.loadTracks"
+      :can_load_more="search.tracks.more"
+      v-if="search.tracks.value.length"
+    />
   </div>
 </template>
 
@@ -58,3 +62,9 @@ onMounted(() => {
   search.switchTab("tracks");
 });
 </script>
+
+<style lang="scss">
+#tracks-results .morexx {
+  margin-top: 1rem;
+}
+</style>
diff --git a/src/views/SearchView/main.vue b/src/views/SearchView/main.vue
index 89295149..bd65bcdb 100644
--- a/src/views/SearchView/main.vue
+++ b/src/views/SearchView/main.vue
@@ -6,7 +6,7 @@
     <button
       v-if="$route.params.page !== 'tracks'"
       class="load-more"
-      :class="{ 'btn-disabled': !canLoadMore }"
+      :class="{ load_disabled: !canLoadMore }"
       @click="canLoadMore && loadMore()"
     >
       Load more
@@ -143,14 +143,8 @@ onMounted(() => {
     width: calc(100% + 1.25rem);
     border-radius: 0;
     background: $darkestblue;
-    // margin: 0 auto;
-    // margin-bottom: 1rem;
-  }
-
-  .btn-disabled {
-    pointer-events: all;
-    background: $gray !important;
-    opacity: 1;
   }
 }
+
+
 </style>