tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-10 04:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

client: auto resize content on search expand

Browse Source
This commit is contained in:
geoffrey45 2022-01-06 17:14:28 +03:00
parent 0340b64b04
commit 64d2c8c466
6 changed files with 38 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.vue
View File

@ -11,7 +11,7 @@
<Navigation :collapsed="collapsed" /> <Navigation :collapsed="collapsed" />
<PinnedStuff :collapsed="collapsed" /> <PinnedStuff :collapsed="collapsed" />
</div> </div>
<div class="content" :class="{ isMagicFlag: isMagicFlag }"> <div class="content">
<div class="search-box"> <div class="search-box">
<Search <Search
v-model:search="search" v-model:search="search"
@ -20,7 +20,7 @@
/> />
</div> </div>
<div class="separator" style="border: none"></div> <!-- <div class="separator no-border"></div> -->
<router-view /> <router-view />
</div> </div>
<div class="r-sidebar"> <div class="r-sidebar">
@ -34,7 +34,7 @@
</template> </template>
<script> <script>
import { computed, ref } from "@vue/reactivity"; import { ref } from "@vue/reactivity";
import Navigation from "./components/LeftSidebar/Navigation.vue"; import Navigation from "./components/LeftSidebar/Navigation.vue";
import PinnedStuff from "./components/LeftSidebar/PinnedStuff.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 UpNext from "./components/RightSideBar/UpNext.vue";
import RecommendedArtist from "./components/RightSideBar/Recommendation.vue"; import RecommendedArtist from "./components/RightSideBar/Recommendation.vue";
import state from "@/composables/state.js";
import perks from "@/composables/perks.js"; import perks from "@/composables/perks.js";
export default { export default {
@ -62,10 +61,6 @@ export default {
perks.readQueue(); perks.readQueue();
const isMagicFlag = computed(() => {
return state.magic_flag.value;
});
function toggleNav() { function toggleNav() {
collapsed.value = !collapsed.value; collapsed.value = !collapsed.value;
} }
@ -91,7 +86,6 @@ export default {
toggleNav, toggleNav,
expandSearch, expandSearch,
collapseSearch, collapseSearch,
isMagicFlag,
expandQueue, expandQueue,
collapsed, collapsed,
up_next, up_next,
@ -141,18 +135,8 @@ export default {
} }
.content { .content {
position: relative; padding: 0 $small;
padding: 0.5rem; display: grid;
padding-top: 3.75rem; grid-template-rows: auto 1fr;
.search-box {
width: calc(100% - 1rem);
position: absolute;
top: 0;
z-index: 1;
}
}
.isMagicFlag {
padding-top: 7.5rem;
} }
</style> </style>

10
src/assets/css/global.scss
View File

@ -128,11 +128,11 @@ a {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
// @media (max-width: 70em) { @media (max-width: 70em) {
// .r-sidebar { .r-sidebar {
// display: none; display: none;
// } }
// } }
.image { .image {
background-position: center; background-position: center;

3
src/components/FolderView/FolderList.vue
View File

@ -23,8 +23,7 @@ export default {
<style lang="scss"> <style lang="scss">
.f-container { .f-container {
margin-top: $small; padding: $small 1rem 1rem 1rem;
padding: 1rem;
} }
.no_f { .no_f {

4
src/components/FolderView/SearchBox.vue
View File

@ -23,7 +23,9 @@ export default {
.folder-top { .folder-top {
padding-bottom: 1rem; padding-bottom: 1rem;
margin-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 { .folder-top .fname {

32
src/components/Search.vue
View File

@ -127,7 +127,7 @@ export default {
icon: "🈁", icon: "🈁",
}, },
]; ];
const loading = ref(state.loading) const loading = ref(state.loading);
const searchComponent = ref(null); const searchComponent = ref(null);
const filters = ref(state.filters); const filters = ref(state.filters);
const albums = [ const albums = [
@ -219,7 +219,7 @@ export default {
options, options,
filters, filters,
searchComponent, searchComponent,
loading loading,
}; };
}, },
}; };
@ -233,9 +233,9 @@ export default {
height: 2rem; height: 2rem;
border: solid #fff; border: solid #fff;
border-radius: 50%; border-radius: 50%;
border-bottom: solid rgb(255, 174, 0); border-bottom: solid rgb(255, 174, 0);
border-top: solid rgb(255, 174, 0); border-top: solid rgb(255, 174, 0);
animation: spin .3s linear infinite; animation: spin 0.3s linear infinite;
@keyframes spin { @keyframes spin {
0% { 0% {
@ -266,15 +266,15 @@ export default {
.item { .item {
position: relative; position: relative;
background-color: rgba(39, 37, 37, 0.555); background-color: rgba(34, 33, 33, 0.637);
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
margin: 0 $small 0 0; margin: 0 $small 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: .9rem; font-size: 0.9rem;
color: rgb(151, 150, 150); color: rgb(250, 250, 250);
&:hover { &:hover {
background-color: rgb(170, 50, 50); background-color: rgb(170, 50, 50);
@ -289,6 +289,8 @@ export default {
.filter { .filter {
display: flex; display: flex;
margin-left: 3rem; margin-left: 3rem;
height: 2rem;
// border: solid;
.item { .item {
&:hover { &:hover {
@ -381,7 +383,7 @@ export default {
border: none; border: none;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: transparent; background-color: transparent;
color: rgba(255, 255, 255, 0.479); color: rgb(255, 255, 255);
font-size: 1rem; font-size: 1rem;
outline: none; outline: none;
transition: all 0.5s ease; transition: all 0.5s ease;
@ -400,7 +402,7 @@ export default {
.right-search .tracks-results { .right-search .tracks-results {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgb(27, 26, 26); background: #1f0012;
margin-left: $small; margin-left: $small;
padding: $small; padding: $small;
@ -445,7 +447,9 @@ export default {
.right-search .albums-results { .right-search .albums-results {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgb(27, 26, 26);
background: #011327;
margin-left: $small; margin-left: $small;
margin-top: $small; margin-top: $small;
@ -461,7 +465,7 @@ export default {
align-items: center; align-items: center;
padding: $small; padding: $small;
border-radius: $small; border-radius: $small;
background-color: rgb(24, 23, 23); background-color: $card-dark;
margin-bottom: 1rem; margin-bottom: 1rem;
.album-art { .album-art {
@ -487,7 +491,7 @@ export default {
.right-search .artists-results { .right-search .artists-results {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: rgb(27, 26, 26); background: #381900;
margin: 0 0 0 $small; margin: 0 0 0 $small;
.grid { .grid {
@ -501,7 +505,7 @@ export default {
align-items: center; align-items: center;
padding: $small; padding: $small;
border-radius: $small; border-radius: $small;
background-color: rgb(24, 23, 23); background-color: $card-dark;
margin-bottom: 1rem; margin-bottom: 1rem;
.image { .image {

12
src/views/FolderView.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div id="f-view-parent" class="rounded"> <div id="f-view-parent" class="rounded">
<div class="fixed"> <div class="fixed">
<SearchBox :path="path"/> <SearchBox :path="path" />
</div> </div>
<div id="scrollable" ref="scrollable"> <div id="scrollable" ref="scrollable">
<FolderList :folders="folders" /> <FolderList :folders="folders" />
<div class="separator"></div> <div class="separator" v-if="folders.length && songs.length"></div>
<SongList :songs="songs" /> <SongList :songs="songs" />
</div> </div>
</div> </div>
@ -78,12 +78,10 @@ export default {
<style lang="scss"> <style lang="scss">
#f-view-parent { #f-view-parent {
position: relative; position: relative;
height: 100%;
background-color: $card-dark; background-color: $card-dark;
padding-left: $small; padding: 5rem $small 0 $small;
padding-right: $small;
padding-top: 5rem;
overflow: hidden; overflow: hidden;
margin: $small 0 $small 0;
} }
#f-view-parent .fixed { #f-view-parent .fixed {
@ -95,7 +93,7 @@ export default {
#scrollable { #scrollable {
overflow-y: scroll; overflow-y: scroll;
height: calc(100% - $small); height: calc(100% - 1rem);
padding-right: $small; padding-right: $small;
.separator { .separator {