modify spacing in grids

src/App.vue

@@ -19,7 +19,7 @@
       <router-view />
     </div>
     <NowPlayingRight />
-    <SearchInput v-if="settings.use_sidebar && xl" />
+    <!-- <SearchInput v-if="settings.use_sidebar && xl" /> -->
     <RightSideBar v-if="settings.use_sidebar && xl" />
   </section>
 </template>

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

@@ -1,17 +1,16 @@
 #app-grid {
   display: grid;
   grid-template-columns: min-content 1fr 29rem;
-  grid-template-rows: 43px calc(100vh - (8.5rem + 13px)) max-content;
+  grid-template-rows: 43px calc(100vh - (6.5rem + 13px)) max-content;
   grid-template-areas:
-    "l-sidebar nav search-input"
+    "l-sidebar nav r-sidebar"
     "l-sidebar content r-sidebar"
     "bottombar bottombar bottombar";
   height: 100%;
-  gap: 1rem;
+  gap: 0 1.5rem;
   padding: $small 0;
-  margin: 0 auto;
+  // margin: 0 auto;
   margin-top: -$small;
-  max-width: 1720px;
   padding-top: $small;
 }
 
@@ -21,17 +20,17 @@
   max-width: 100%;
 }
 
-#app-grid.addBorderRight {
-  border-right: solid 1px $gray4;
-  padding-right: $medium;
-}
+// #app-grid.addBorderRight {
+//   // border-right: solid 1px $gray4;
+//   // padding-right: $medium;
+// }
 
 #app-grid.isSmall {
   grid-template-columns: min-content 1fr;
   grid-template-areas:
     "l-sidebar nav"
     "l-sidebar content"
-    "l-sidebar content";
+    "bottombar bottombar";
 }
 
 #app-grid.showAltNP {
@@ -39,7 +38,7 @@
     grid-template-areas:
       "l-sidebar nav"
       "l-sidebar content"
-      "l-sidebar bottombar";
+      "bottombar bottombar";
   }
 }
 
@@ -48,17 +47,17 @@
   grid-template-areas:
     "l-sidebar nav"
     "l-sidebar content"
-    "l-sidebar content";
+    "bottombar bottombar";
 }
 
 #acontent {
   grid-area: content;
-  // overflow: hidden;
-  margin-right: calc(0rem - ($medium + 2px));
-  padding-right: calc($medium);
-  height: 100%;
-  // outline: solid;
-  // margin-top: -$small;
+  // margin-right: calc(0rem - ($medium + 2px));
+  // padding-right: calc($medium);
+  // height: 100%;
+
+  overflow: auto;
+
 
   .nav {
     margin: $small;
@@ -88,10 +87,10 @@
   grid-area: r-sidebar;
 }
 
-#gsearch-input {
-  // display: none !important;
-  grid-area: search-input;
-}
+// #gsearch-input {
+//   // display: none !important;
+//   grid-area: search-input;
+// }
 
 .topnav {
   grid-area: nav;
@@ -105,12 +104,11 @@
   background-color: rgb(22, 22, 22);
   height: 100vh;
   margin-top: -$small;
-  margin-left: -$small;
+  // margin-left: -$small;
 }
 
 .b-bar {
   grid-area: bottombar;
-  width: calc(100% + 1.25rem);
-  margin-left: -$small;
+  width: 100%;
   margin-bottom: -$small;
 }

src/assets/scss/Global/index.scss

@@ -28,14 +28,15 @@ body {
     "Segoe UI Symbol";
   font-size: 1rem;
   image-rendering: -webkit-optimize-contrast;
-  width: calc(100vw - 1rem);
-  overflow: hidden;
   height: calc(100vh - 1rem);
+  width: calc(100vw - 1.5rem);
+  overflow: hidden;
 
   #app {
     width: 100%;
     height: 100%;
     margin: 0 auto;
+    max-width: 1720px;
   }
 
   a {

src/components/FolderView/FolderList.vue

@@ -23,6 +23,6 @@ defineProps<{
 #f-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-  gap: $medium;
+  gap: 1.5rem;
 }
 </style>

src/components/PlaylistsList/PlaylistCard.vue

@@ -30,12 +30,18 @@ const props = defineProps<{
 
 <style lang="scss">
 .p-card {
-  background-color: $playlist-card-bg;
+  background-color: $gray5;
   display: grid;
   grid-template-rows: 1fr max-content;
   padding: 1rem;
   gap: $small;
 
+  &:hover {
+    transition: all .25s ease;
+    background-color: $darkestblue;
+    background-blend-mode: screen;
+  }
+
   img {
     width: 100%;
     aspect-ratio: 1;

src/components/RightSideBar/Main.vue

@@ -1,11 +1,12 @@
 <template>
   <div
-    class="r-sidebar rounded border"
+    class="r-sidebar border"
     :style="{
       marginBottom: !settings.show_alt_np ? '-1rem' : '',
     }"
   >
-    <div class="r-content">
+  <SearchInput />
+    <div class="r-content noscroll">
       <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
         <DashBoard />
       </div>
@@ -25,6 +26,7 @@ import Queue from "./Queue.vue";
 import DashBoard from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";
 import useSettingsStore from "@/stores/settings";
+import SearchInput from "./SearchInput.vue";
 
 const tabs = useTabStore();
 const settings = useSettingsStore();
@@ -34,10 +36,26 @@ const settings = useSettingsStore();
 .r-sidebar {
   width: 100%;
   overflow: hidden;
+  // padding: $small;
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  // gap: 1rem;
+  margin-top: -$small;
+  border-top: none;
+  border-bottom: none;
+  background-color: rgb(22, 22, 22);
+  padding-bottom: 1rem;
+
+  .gsearch-input {
+    height: 42px;
+    margin: $small;
+    margin-bottom: 1rem;
+  }
 
   .r-content {
     width: 100%;
     height: 100%;
+    background-color: $gray;
 
     .r-search {
       height: 100%;

src/components/RightSideBar/NowPlayingRight.vue

@@ -9,13 +9,13 @@
             :to="{
               name: Routes.album,
               params: {
-                hash: queue.currenttrack.albumhash,
+                hash: queue.currenttrack?.albumhash || ' ',
               },
             }"
           >
             <img
               class="rounded-sm"
-              :src="paths.images.thumb.small + queue.currenttrack.image"
+              :src="paths.images.thumb.small + queue.currenttrack?.image"
               alt=""
             />
           </RouterLink>
@@ -26,16 +26,16 @@
           <div class="with-title">
             <div class="time time-current">
               <span>
-                {{ formatSeconds(queue.duration.current) }}
+                {{ formatSeconds(queue.duration?.current) }}
               </span>
             </div>
             <div class="tags">
               <div class="title ellip">
-                {{ queue.currenttrack.title }}
+                {{ queue.currenttrack?.title || 'Hello there' }}
               </div>
               <ArtistName
-                :artists="queue.currenttrack.artist"
-                :albumartist="queue.currenttrack.albumartist"
+                :artists="queue.currenttrack?.artist || []"
+                :albumartist="queue.currenttrack?.albumartist || 'Welcome to alice'"
                 class="artist"
               />
             </div>

src/components/RightSideBar/SearchInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="gsearch-input">
+  <div class="gsearch-input">
     <div id="ginner" tabindex="0" class="bg-primary">
       <button
         :title="
@@ -72,7 +72,7 @@ function removeFocusedClass() {
 </script>
 
 <style lang="scss">
-#gsearch-input {
+.gsearch-input {
   display: grid;
   grid-template-columns: 1fr max-content;
   border-radius: 3rem;

src/layouts/HeaderAndVList.vue

@@ -1,9 +1,10 @@
 <template>
+  <!-- JCOMMENT: 64 is single item height, 24 is gap height -->
   <div class="header-list-layout">
     <div
       v-bind="containerProps"
-      style="height: calc(100vh - 8.75rem)"
-      :style="{ paddingTop: !no_header ? headerHeight - 64 + 16 + 'px' : 0 }"
+      style="height: calc(100vh - 8.5rem); margin-top: 1rem"
+      :style="{ paddingTop: !no_header ? headerHeight - 64 + 24 + 'px' : 0 }"
       @scroll="handleScroll"
     >
       <div
@@ -18,7 +19,7 @@
         <div class="header rounded" style="height: 64px" v-if="!no_header">
           <div
             ref="header"
-            :style="{ top: -headerHeight + 64 - 16 + 'px' }"
+            :style="{ top: -headerHeight + 64 - 24 + 'px' }"
             class="header-content"
           >
             <slot name="header"></slot>
@@ -45,6 +46,7 @@
             updateQueue(t.data.index !== undefined ? t.data.index : t.index)
           "
         />
+        <div class="bottom-padding" style="height: 64px"></div>
       </div>
     </div>
   </div>

src/views/FolderView.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@vue/reactivity";
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
 import useQueueStore from "@/stores/queue";
@@ -25,7 +24,6 @@ const loader = useLoaderStore();
 const folder = useFolderStore();
 const queue = useQueueStore();
 
-const scrollable = ref<any>(null);
 
 function playFromPage(index: number) {
   queue.playFromFolder(folder.path, folder.allTracks);
@@ -38,7 +36,6 @@ onBeforeRouteUpdate((to, from) => {
     .fetchAll(to.params.path as string)
 
     .then(() => {
-      scrollable.value.scrollTop = 0;
       folder.resetQuery();
     })
     .then(() => {

src/views/PlaylistList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="p-view">
+  <div id="p-view" class="noscroll">
     <div class="grid">
       <PlaylistCard
         v-for="p in pStore.playlists"
@@ -22,10 +22,11 @@ const pStore = usePStore();
 <style lang="scss">
 #p-view {
   scrollbar-color: $gray2 transparent;
+  margin: 1rem 0;
 
   .grid {
     grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
-    gap: 1rem;
+    gap: 2.5rem 1.75rem;
   }
 }
 </style>