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

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

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

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

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

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

@ -23,7 +23,9 @@ export default {
.folder-top {
padding-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 {

32
src/components/Search.vue
View File

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

12
src/views/FolderView.vue
View File

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