From b019fa22c428fe8867357f951a002ce3b7c9eb48 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 27 Aug 2022 22:17:24 +0300
Subject: [PATCH] remove content div margin bottom if alt_np is not shown

---
 src/App.vue                                 | 15 +++++++-------
 src/assets/scss/Global/app-grid.scss        | 12 ++++++++++-
 src/components/LeftSidebar/index.vue        |  2 --
 src/components/RightSideBar/SearchInput.vue | 23 ++++++++++++++-------
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6ec0003a..a30b6cfa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,16 +2,15 @@
   <ContextMenu />
   <Modal />
   <Notification />
-  <div id="app-grid">
+  <div
+    id="app-grid"
+    :class="{
+      showAltNP: settings.use_alt_np,
+    }"
+  >
     <LeftSidebar />
     <NavBar />
-    <div
-      id="acontent"
-      class="rounded"
-      :style="{
-        marginBottom: !settings.use_alt_np ? '-1rem' : '0',
-      }"
-    >
+    <div id="acontent" class="rounded">
       <router-view />
     </div>
     <NowPlayingRight />
diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
index d93fce6c..1113fc28 100644
--- a/src/assets/scss/Global/app-grid.scss
+++ b/src/assets/scss/Global/app-grid.scss
@@ -23,7 +23,7 @@
       "l-sidebar nav"
       "l-sidebar content"
       "l-sidebar content"
-      "l-sidebar bottombar";
+      "l-sidebar content";
     .r-sidebar,
     #tabs,
     #gsearch-input {
@@ -32,6 +32,16 @@
   }
 }
 
+#app-grid.showAltNP {
+  @include tablet-landscape {
+    grid-template-areas:
+      "l-sidebar nav"
+      "l-sidebar content"
+      "l-sidebar content"
+      "l-sidebar bottombar";
+  }
+}
+
 #acontent {
   grid-area: content;
   max-width: 1955px;
diff --git a/src/components/LeftSidebar/index.vue b/src/components/LeftSidebar/index.vue
index a4b320a3..e1169b73 100644
--- a/src/components/LeftSidebar/index.vue
+++ b/src/components/LeftSidebar/index.vue
@@ -6,7 +6,6 @@
     </div>
 
     <nowPlaying v-if="!settings.use_alt_np" />
-    <!-- <Playlists /> -->
   </div>
 </template>
 
@@ -14,7 +13,6 @@
 import Navigation from "@/components/LeftSidebar/Navigation.vue";
 import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
 import Logo from "@/components/Logo.vue";
-// import Playlists from "./components/LeftSidebar/Playlists.vue";
 
 import useSettingsStore from "@/stores/settings";
 
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 44a86b1e..1868e141 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/src/components/RightSideBar/SearchInput.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="gsearch-input" class="rounded">
-    <div id="ginner" tabindex="0" class="bg-primary rounded">
+  <div id="gsearch-input">
+    <div id="ginner" tabindex="0" class="bg-primary rounded-sm">
       <input
         id="globalsearch"
         v-model="search.query"
@@ -11,9 +11,19 @@
       />
       <SearchSvg />
     </div>
-    <div class="buttons rounded bg-primary">
-      <button @click="tabs.switchToQueue"><QueueSvg /></button>
-      <button @click="tabs.switchToSearch"><SearchSvg /></button>
+    <div class="buttons rounded-sm bg-primary">
+      <button
+        @click="tabs.switchToQueue"
+        v-if="tabs.current !== tabs.tabs.queue"
+      >
+        <QueueSvg />
+      </button>
+      <button
+        @click="tabs.switchToSearch"
+        v-if="tabs.current !== tabs.tabs.search"
+      >
+        <SearchSvg />
+      </button>
     </div>
   </div>
 </template>
@@ -27,7 +37,6 @@ import useTabStore from "../../stores/tabs";
 
 const search = useSearchStore();
 const tabs = useTabStore();
-const focused = ref(false);
 let classList: DOMTokenList | undefined;
 
 onMounted(() => {
@@ -46,7 +55,7 @@ function removeFocusedClass() {
 <style lang="scss">
 #gsearch-input {
   display: grid;
-  grid-template-columns: 1fr 7rem;
+  grid-template-columns: 1fr max-content;
   gap: 1rem;
 
   .buttons {