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 @@
- {{ queue.currenttrack?.title || 'Hello there' }} + {{ queue.currenttrack?.title || "Hello there" }}
@@ -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();