UI improvements

src/assets/scss/Global/app-grid.scss

@@ -12,24 +12,6 @@
   margin: 0 auto;
   gap: 1rem;
   margin: $small auto;
-
-  // @include for-desktop-down {
-  //   grid-template-columns: min-content 1fr 26rem;
-  // }
-
-  // @include tablet-landscape {
-  //   grid-template-columns: min-content 1fr;
-  //   grid-template-areas:
-  //     "l-sidebar nav"
-  //     "l-sidebar content"
-  //     "l-sidebar content"
-  //     "l-sidebar content";
-  //   .r-sidebar,
-  //   #tabs,
-  //   #gsearch-input {
-  //     display: none;
-  //   }
-  // }
 }
 
 #app-grid.isSmall {
@@ -72,14 +54,16 @@
   }
 }
 
-#app-grid.isSmall #acontent {
-  margin-right: -$small;
-  padding-right: calc($small - 1px);
-}
+#app-grid.isSmall,
+#app-grid.disableSidebar {
+  #acontent {
+    margin-right: -$small;
+    padding-right: calc($small - 1px);
 
-#app-grid.disableSidebar #acontent {
-  margin-right: -$small;
-  padding-right: calc($small - 1px);
+    .search-view {
+      margin-right: -0.8rem;
+    }
+  }
 }
 
 #tabs {

src/assets/scss/moz.scss

@@ -1,4 +1,4 @@
-// Styles that only apply on our dear Firefox
+// Styles that only apply to our dear Firefox
 
 @-moz-document url-prefix() {
   #acontent {
@@ -6,20 +6,22 @@
     padding-right: 1rem;
   }
 
-  #app-grid.isSmall #acontent {
-    margin-right: -$small;
-    padding-right: $medium;
+  #app-grid.isSmall,
+  #app-grid.disableSidebar {
+    #acontent {
+      margin-right: -$small;
+      padding-right: $medium;
+
+      .search-view {
+        margin-right: -0.8rem;
+      }
+    }
   }
 
   #app-grid.isSmall #page-search {
     margin-right: $smaller;
   }
 
-  #app-grid.disableSidebar #acontent {
-    margin-right: -$small;
-    padding-right: $medium;
-  }
-
   #app-grid.disableSidebar #page-search {
     margin-right: $smaller;
   }

src/components/FolderView/SongList.vue

@@ -65,10 +65,6 @@ const props = defineProps<{
   copyright?: string | null;
 }>();
 
-// onUpdated(() => {
-//   console.log(props.tracks[1].index);
-// });
-
 const emit = defineEmits<{
   (e: "playFromPage", index: number): void;
 }>();

src/components/LeftSidebar/NP/HotKeys.vue

@@ -1,6 +1,6 @@
 <template>
   
-  <div class="hotkeys rounded noscroll">
+  <div class="hotkeys rounded-sm noscroll">
     <div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
     <div
       class="image ctrl-btn play-pause"

src/components/RightSideBar/NowPlayingRight.vue

@@ -10,14 +10,14 @@
         <div class="np-artist ellip">
           <span
             v-for="artist in putCommas(
-              queue.currenttrack?.artists || ['Artist']
+              queue.currenttrack?.artists || ['♥ Hello ♥']
             )"
           >
             {{ artist }}
           </span>
         </div>
         <div class="np-title ellip">
-          {{ queue.currenttrack?.title || "Track title" }}
+          {{ queue.currenttrack?.title || "Play something"}}
         </div>
       </div>
     </div>
@@ -25,7 +25,9 @@
     <div class="time">
       <span class="current">{{ formatSeconds(queue.duration.current) }}</span>
       <HotKeys />
-      <span class="full">{{ formatSeconds(queue.currenttrack.length) }}</span>
+      <span class="full">{{
+        formatSeconds(queue.currenttrack ? queue.currenttrack.length : 0)
+      }}</span>
     </div>
   </div>
 </template>

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -17,7 +17,7 @@
         :alt="true"
       />
     </div>
-    <div v-else class="t-center"><h5>🤷</h5></div>
+    <div v-else class="t-center"><h5>💔 No results 💔</h5></div>
     <LoadMore
       v-if="album_grid && search.albums.more"
       :loader="search.loadAlbums"

src/components/RightSideBar/Search/TracksGrid.vue

@@ -12,7 +12,7 @@
         :index="index + 1"
       />
     </div>
-    <div v-else class="t-center"><h5>🤷</h5></div>
+    <div v-else class="t-center"><h5>💔 No results 💔</h5></div>
     <LoadMore v-if="search.tracks.more" :loader="search.loadTracks" />
   </div>
 </template>

src/stores/search.ts

@@ -32,7 +32,7 @@ function scrollOnLoad() {
 export default defineStore("search", () => {
   // @ts-ignore
   const query = ref("");
-  const debouncedQuery = useDebounce(query)
+  const debouncedQuery = useDebounce(query);
   const { startLoading, stopLoading } = useLoaderStore();
   const route = useRoute();
 
@@ -144,7 +144,11 @@ export default defineStore("search", () => {
         artists.more = res.more;
       })
       .then(() => stopLoading())
-      .then(() => scrollOnLoad());
+      .then(() =>
+        setTimeout(() => {
+          scrollOnLoad();
+        }, 500)
+      );
   }
 
   watch(

src/views/Search.vue

@@ -36,7 +36,6 @@ import Main from "@/components/RightSideBar/Search/Main.vue";
 
   #tracks-results {
     margin-right: 1rem;
-    // margin-left: -2.25rem;
   }
 }
 </style>