diff --git a/src/App.vue b/src/App.vue
index 2615bfb7..d4c365e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,7 @@
-
+
@@ -43,14 +43,14 @@ import { readLocalStorage, writeLocalStorage } from "@/utils";
// @small-components
import Modal from "@/components/modal.vue";
-import ContextMenu from "@/components/contextMenu.vue";
+import ContextMenu from "@/components/ContextMenu.vue";
import Notification from "@/components/Notification.vue";
// @app-grid-components
import NavBar from "@/components/nav/NavBar.vue";
import LeftSidebar from "./components/LeftSidebar/index.vue";
import RightSideBar from "@/components/RightSideBar/Main.vue";
-import NowPlayingRight from "@/components/RightSideBar/NowPlayingRight.vue";
+import BottomBar from "@/components/BottomBar.vue";
const queue = useQStore();
const router = useRouter();
diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
index 36035370..491fea72 100644
--- a/src/assets/scss/Global/app-grid.scss
+++ b/src/assets/scss/Global/app-grid.scss
@@ -1,3 +1,5 @@
+$g-border: solid 1px $gray5;
+
#app-grid {
display: grid;
grid-template-columns: min-content 1fr 29rem;
@@ -9,7 +11,7 @@
gap: 0 1.5rem;
height: 100%;
- border: solid 1px $gray3;
+ border: $g-border;
border-top: none;
border-bottom: none;
margin: 0 auto;
@@ -26,7 +28,7 @@
.r-sidebar {
grid-area: r-sidebar;
- border-left: solid 1px $gray3;
+ border-left: $g-border;
}
.topnav {
@@ -41,11 +43,12 @@
grid-template-rows: 1fr max-content;
// border-top: none !important;
// border-bottom: none !important;
- border-right: solid 1px $gray3;
+ border-right: $g-border;
}
.b-bar {
grid-area: bottombar;
+ border-top: $g-border;
}
// ====== MODIFIERS =======
diff --git a/src/assets/scss/moz.scss b/src/assets/scss/moz.scss
index 5156eecf..2e5a157a 100644
--- a/src/assets/scss/moz.scss
+++ b/src/assets/scss/moz.scss
@@ -14,23 +14,7 @@
}
}
- // #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 #page-search {
- // margin-right: $smaller;
- // }
+ #app-grid.noSidebar > #acontent {
+ padding-right: 1rem !important;
+ }
}
diff --git a/src/components/RightSideBar/NowPlayingRight.vue b/src/components/BottomBar.vue
similarity index 91%
rename from src/components/RightSideBar/NowPlayingRight.vue
rename to src/components/BottomBar.vue
index 1ae3d2c6..2b7a41da 100644
--- a/src/components/RightSideBar/NowPlayingRight.vue
+++ b/src/components/BottomBar.vue
@@ -31,11 +31,13 @@
@@ -69,12 +71,12 @@ import { formatSeconds } from "@/utils";
import { Routes } from "@/composables/enums";
import useSettingsStore from "@/stores/settings";
-import ArtistName from "../shared/ArtistName.vue";
-import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
-import Progress from "../LeftSidebar/NP/Progress.vue";
+import ArtistName from "@/components/shared/ArtistName.vue";
+import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
+import Progress from "@/components/LeftSidebar/NP/Progress.vue";
-import HeartSvg from "../../assets/icons/heart.svg";
-// import PlusSvg from "../../assets/icons/plus.svg";
+import HeartSvg from "@/assets/icons/heart.svg";
+// import PlusSvg from "@/assets/icons/plus.svg";
const queue = useQStore();
const settings = useSettingsStore();
@@ -82,13 +84,10 @@ const settings = useSettingsStore();