From 64d2c8c466c1cd2275de515e2365e3b4dd297bfb Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Thu, 6 Jan 2022 17:14:28 +0300
Subject: [PATCH] client: auto resize content on search expand

---
 src/App.vue                              | 28 +++++----------------
 src/assets/css/global.scss               | 10 ++++----
 src/components/FolderView/FolderList.vue |  3 +--
 src/components/FolderView/SearchBox.vue  |  4 ++-
 src/components/Search.vue                | 32 +++++++++++++-----------
 src/views/FolderView.vue                 | 12 ++++-----
 6 files changed, 38 insertions(+), 51 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b1eb3eae..aa51e922 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@
       <Navigation :collapsed="collapsed" />
       <PinnedStuff :collapsed="collapsed" />
     </div>
-    <div class="content" :class="{ isMagicFlag: isMagicFlag }">
+    <div class="content">
       <div class="search-box">
         <Search
           v-model:search="search"
@@ -20,7 +20,7 @@
         />
       </div>
 
-      <div class="separator" style="border: none"></div>
+      <!-- <div class="separator no-border"></div> -->
       <router-view />
     </div>
     <div class="r-sidebar">
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { computed, ref } from "@vue/reactivity";
+import { ref } from "@vue/reactivity";
 
 import Navigation from "./components/LeftSidebar/Navigation.vue";
 import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
@@ -44,7 +44,6 @@ import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
 import UpNext from "./components/RightSideBar/UpNext.vue";
 import RecommendedArtist from "./components/RightSideBar/Recommendation.vue";
 
-import state from "@/composables/state.js";
 import perks from "@/composables/perks.js";
 
 export default {
@@ -62,10 +61,6 @@ export default {
 
     perks.readQueue();
 
-    const isMagicFlag = computed(() => {
-      return state.magic_flag.value;
-    });
-    
     function toggleNav() {
       collapsed.value = !collapsed.value;
     }
@@ -91,7 +86,6 @@ export default {
       toggleNav,
       expandSearch,
       collapseSearch,
-      isMagicFlag,
       expandQueue,
       collapsed,
       up_next,
@@ -141,18 +135,8 @@ export default {
 }
 
 .content {
-  position: relative;
-  padding: 0.5rem;
-  padding-top: 3.75rem;
-
-  .search-box {
-    width: calc(100% - 1rem);
-    position: absolute;
-    top: 0;
-    z-index: 1;
-  }
-}
-.isMagicFlag {
-  padding-top: 7.5rem;
+  padding: 0 $small;
+  display: grid;
+  grid-template-rows: auto 1fr;
 }
 </style>
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 37a5a0ba..63b4be70 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -128,11 +128,11 @@ a {
   margin-bottom: 0.5em;
 }
 
-// @media (max-width: 70em) {
-//   .r-sidebar {
-//     display: none;
-//   }
-// }
+@media (max-width: 70em) {
+  .r-sidebar {
+    display: none;
+  }
+}
 
 .image {
   background-position: center;
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index e718ec2d..fb28c489 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -23,8 +23,7 @@ export default {
 
 <style lang="scss">
 .f-container {
-  margin-top: $small;
-  padding: 1rem;
+  padding: $small 1rem 1rem 1rem;
 }
 
 .no_f {
diff --git a/src/components/FolderView/SearchBox.vue b/src/components/FolderView/SearchBox.vue
index d314f126..4ea0a49c 100644
--- a/src/components/FolderView/SearchBox.vue
+++ b/src/components/FolderView/SearchBox.vue
@@ -23,7 +23,9 @@ export default {
 .folder-top {
   padding-bottom: 1rem;
   margin-bottom: 1rem;
-  border-bottom: 1px solid var(--separator);
+  border-bottom: 1px solid $separator;
+  width: calc(100% - 2rem);
+  margin-left: 1rem;
 }
 
 .folder-top .fname {
diff --git a/src/components/Search.vue b/src/components/Search.vue
index ec218c73..d7e39bd7 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -127,7 +127,7 @@ export default {
         icon: "🈁",
       },
     ];
-    const loading = ref(state.loading)
+    const loading = ref(state.loading);
     const searchComponent = ref(null);
     const filters = ref(state.filters);
     const albums = [
@@ -219,7 +219,7 @@ export default {
       options,
       filters,
       searchComponent,
-      loading
+      loading,
     };
   },
 };
@@ -233,9 +233,9 @@ export default {
   height: 2rem;
   border: solid #fff;
   border-radius: 50%;
-  border-bottom: solid  rgb(255, 174, 0);
-  border-top: solid  rgb(255, 174, 0);
-  animation: spin .3s linear infinite;
+  border-bottom: solid rgb(255, 174, 0);
+  border-top: solid rgb(255, 174, 0);
+  animation: spin 0.3s linear infinite;
 
   @keyframes spin {
     0% {
@@ -266,15 +266,15 @@ export default {
 
   .item {
     position: relative;
-    background-color: rgba(39, 37, 37, 0.555);
+    background-color: rgba(34, 33, 33, 0.637);
     padding: 0.5rem;
     border-radius: 0.5rem;
     cursor: pointer;
     margin: 0 $small 0 0;
     display: flex;
     align-items: center;
-    font-size: .9rem;
-    color: rgb(151, 150, 150);
+    font-size: 0.9rem;
+    color: rgb(250, 250, 250);
 
     &:hover {
       background-color: rgb(170, 50, 50);
@@ -289,6 +289,8 @@ export default {
     .filter {
       display: flex;
       margin-left: 3rem;
+      height: 2rem;
+      // border: solid;
 
       .item {
         &:hover {
@@ -381,7 +383,7 @@ export default {
   border: none;
   border-radius: 0.5rem;
   background-color: transparent;
-  color: rgba(255, 255, 255, 0.479);
+  color: rgb(255, 255, 255);
   font-size: 1rem;
   outline: none;
   transition: all 0.5s ease;
@@ -400,7 +402,7 @@ export default {
 
 .right-search .tracks-results {
   border-radius: 0.5rem;
-  background-color: rgb(27, 26, 26);
+  background: #1f0012;
   margin-left: $small;
   padding: $small;
 
@@ -445,7 +447,9 @@ export default {
 
 .right-search .albums-results {
   border-radius: 0.5rem;
-  background-color: rgb(27, 26, 26);
+
+  background: #011327;
+
   margin-left: $small;
   margin-top: $small;
 
@@ -461,7 +465,7 @@ export default {
       align-items: center;
       padding: $small;
       border-radius: $small;
-      background-color: rgb(24, 23, 23);
+      background-color: $card-dark;
       margin-bottom: 1rem;
 
       .album-art {
@@ -487,7 +491,7 @@ export default {
 
 .right-search .artists-results {
   border-radius: 0.5rem;
-  background-color: rgb(27, 26, 26);
+  background: #381900;
   margin: 0 0 0 $small;
 
   .grid {
@@ -501,7 +505,7 @@ export default {
       align-items: center;
       padding: $small;
       border-radius: $small;
-      background-color: rgb(24, 23, 23);
+      background-color: $card-dark;
       margin-bottom: 1rem;
 
       .image {
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index fd68a342..5b40c013 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <SearchBox :path="path"/>
+      <SearchBox :path="path" />
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
-    <div class="separator"></div>
+      <div class="separator" v-if="folders.length && songs.length"></div>
       <SongList :songs="songs" />
     </div>
   </div>
@@ -78,12 +78,10 @@ export default {
 <style lang="scss">
 #f-view-parent {
   position: relative;
-  height: 100%;
   background-color: $card-dark;
-  padding-left: $small;
-  padding-right: $small;
-  padding-top: 5rem;
+  padding: 5rem $small 0 $small;
   overflow: hidden;
+  margin: $small 0 $small 0;
 }
 
 #f-view-parent .fixed {
@@ -95,7 +93,7 @@ export default {
 
 #scrollable {
   overflow-y: scroll;
-  height: calc(100% - $small);
+  height: calc(100% - 1rem);
   padding-right: $small;
 
   .separator {