diff --git a/package.json b/package.json index 11703de..7878d6b 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@vueuse/core": "^8.5.0", "axios": "^0.26.1", "pinia": "^2.0.17", + "pinia-plugin-persistedstate": "^2.1.1", "sass": "^1.49.0", "sass-loader": "^10", "vite-svg-loader": "^3.4.0", diff --git a/src/App.vue b/src/App.vue index cdc0ce1..84f9065 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,9 +14,10 @@
+ - + @@ -33,13 +34,14 @@ import handleShortcuts from "@/composables/useKeyboard"; import Logo from "@/components/Logo.vue"; import Modal from "@/components/modal.vue"; import NavBar from "@/components/nav/NavBar.vue"; -import Tabs from "@/components/RightSideBar/Tabs.vue"; +// import Tabs from "@/components/RightSideBar/Tabs.vue"; import ContextMenu from "@/components/contextMenu.vue"; import Notification from "@/components/Notification.vue"; import Navigation from "@/components/LeftSidebar/Navigation.vue"; import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue"; import RightSideBar from "@/components/RightSideBar/Main.vue"; import SearchInput from "@/components/RightSideBar/SearchInput.vue"; +import BottomBar from "@/components/BottomBar/BottomBar.vue"; import { readLocalStorage, writeLocalStorage } from "@/utils"; diff --git a/src/assets/images/folderbg.svg b/src/assets/images/folderbg.svg new file mode 100644 index 0000000..dbcb62f --- /dev/null +++ b/src/assets/images/folderbg.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/folderbg.webp b/src/assets/images/folderbg.webp new file mode 100644 index 0000000..75b948d Binary files /dev/null and b/src/assets/images/folderbg.webp differ diff --git a/src/assets/scss/BottomBar/BottomBar.scss b/src/assets/scss/BottomBar/BottomBar.scss index 58820b8..1c406a6 100644 --- a/src/assets/scss/BottomBar/BottomBar.scss +++ b/src/assets/scss/BottomBar/BottomBar.scss @@ -1,6 +1,5 @@ .b-bar { height: 100%; - padding: $small; .grid { background-color: $primary; diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss index 72e5a87..e5c2c80 100644 --- a/src/assets/scss/Global/app-grid.scss +++ b/src/assets/scss/Global/app-grid.scss @@ -6,7 +6,7 @@ "l-sidebar nav search-input" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" - "l-sidebar content tabs"; + "l-sidebar content bottombar"; max-width: 2720px; height: calc(100vh - 1rem); margin: 0 auto; @@ -19,7 +19,11 @@ @include tablet-landscape { grid-template-columns: min-content 1fr; - + grid-template-areas: + "l-sidebar nav" + "l-sidebar content" + "l-sidebar content" + "l-sidebar bottombar"; .r-sidebar, #tabs, #gsearch-input { @@ -32,7 +36,6 @@ grid-area: content; max-width: 1955px; overflow: hidden scroll; - margin-top: -$small; .nav { margin: $small; @@ -48,7 +51,6 @@ .r-sidebar { grid-area: r-sidebar; - margin-top: -$small; } #gsearch-input { @@ -66,7 +68,6 @@ padding: 1rem; } -.bottom-bar { - grid-area: bottom-bar; - height: 4rem; +.b-bar { + grid-area: bottombar; } diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss index 6b5b302..5e3a4a8 100644 --- a/src/assets/scss/Global/basic.scss +++ b/src/assets/scss/Global/basic.scss @@ -24,9 +24,17 @@ } .rounded { + border-radius: 1rem; +} + +.rounded-sm { border-radius: $small; } +.rounded-md { + border-radius: $medium; +} + .circular { border-radius: 20px; } @@ -36,7 +44,7 @@ } .bg-black { - background-color: $black; + background-color: $gray4; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); } @@ -58,8 +66,8 @@ button { display: flex; align-items: center; justify-content: center; - height: 2rem; - background-image: linear-gradient(70deg, $gray3, $gray2); + height: 2.25rem; + background: linear-gradient(70deg, $gray3, $gray2); &:hover { background-image: linear-gradient(70deg, #234ece, $darkblue); diff --git a/src/assets/scss/Global/variants.scss b/src/assets/scss/Global/variants.scss index 1ea53dc..f15a2c2 100644 --- a/src/assets/scss/Global/variants.scss +++ b/src/assets/scss/Global/variants.scss @@ -3,7 +3,7 @@ padding: $smaller; } -.pad-small { +.pad-sm { padding: $small; } diff --git a/src/assets/scss/ProgressBar.scss b/src/assets/scss/ProgressBar.scss index 6ac0183..3999fa8 100644 --- a/src/assets/scss/ProgressBar.scss +++ b/src/assets/scss/ProgressBar.scss @@ -4,8 +4,8 @@ input[type="range"] { width: calc(100% - 2px); height: 0.3rem; border-radius: 5px; - background-size: 0 100%; - background: $gray linear-gradient($accent, $accent) no-repeat; + background: $gray linear-gradient(90deg, $accent, $accent) no-repeat; + background-size: 100% 100%; &::-webkit-slider-thumb { -webkit-appearance: none; @@ -38,15 +38,15 @@ input[type="range"] { /* Input Thumb */ input[type="range"]::-webkit-slider-thumb:hover { - background: $pink; + background: $accent; } input[type="range"]::-moz-range-thumb:hover { - background: $pink; + background: $accent; } input[type="range"]::-ms-thumb:hover { - background: $pink; + background: $accent; } /* Input Track */ diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 6c06cb3..8e9e342 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -39,7 +39,7 @@ $indigo: #5e5ce6; $teal: rgb(64, 200, 224); $primary: $gray4; -$accent: $red; +$accent: $gray1; $secondary: $gray5; $cta: $blue; $danger: $red; @@ -48,7 +48,7 @@ $context: $gray; // SVG COLORS $default: $accent; -$track-btn-svg: $red; +$track-btn-svg: $accent; $side-nav-svg: $red; diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue index 2de58b3..e202706 100644 --- a/src/components/AlbumView/Header.vue +++ b/src/components/AlbumView/Header.vue @@ -4,7 +4,7 @@ ref="albumheaderthing" :style="{ backgroundImage: `linear-gradient( - 37deg, ${props.album.colors[0]}, ${props.album.colors[3]} + 37deg, ${album.colors[0]}, ${album.colors[3]} )`, }" > diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue index bd9c9a7..3521d3d 100644 --- a/src/components/BottomBar/BottomBar.vue +++ b/src/components/BottomBar/BottomBar.vue @@ -1,33 +1,72 @@ + + diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue index 73c0795..838365d 100644 --- a/src/components/LeftSidebar/nowPlaying.vue +++ b/src/components/LeftSidebar/nowPlaying.vue @@ -141,8 +141,8 @@ const showContextMenu = (e: Event) => { font-size: 0.75rem; width: max-content; padding: 0.2rem 0.35rem; - top: 14.25rem; - left: 1.5rem; + top: 14rem; + left: 2rem; background-color: $black; border-radius: $smaller; box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438); diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue index 80b6b8a..d3a2162 100644 --- a/src/components/PlaylistView/Header.vue +++ b/src/components/PlaylistView/Header.vue @@ -12,14 +12,7 @@
- +
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue index 3498938..74e97e8 100644 --- a/src/components/RightSideBar/Queue.vue +++ b/src/components/RightSideBar/Queue.vue @@ -23,7 +23,7 @@
- +
@@ -87,8 +87,8 @@ onUpdated(() => { height: 100%; display: grid; grid-template-columns: 1fr; - grid-template-rows: max-content 1fr max-content; - gap: $small; + grid-template-rows: max-content 1fr; + gap: 1rem; .scrollable-r { height: 100%; diff --git a/src/components/RightSideBar/Queue/upNext.vue b/src/components/RightSideBar/Queue/upNext.vue index c38ad95..0c97466 100644 --- a/src/components/RightSideBar/Queue/upNext.vue +++ b/src/components/RightSideBar/Queue/upNext.vue @@ -1,12 +1,12 @@