TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-05 13:03:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

modify spacing in grids

Browse Source
This commit is contained in:
geoffrey45
2022-09-26 03:31:29 +03:00
committed by Mungai Njoroge
parent 6769af2a50
commit 0dbc45e20b
11 changed files with 71 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -1
View File
@@ -19,7 +19,7 @@
<router-view /> <router-view />
</div> </div>
<NowPlayingRight /> <NowPlayingRight />
<SearchInput v-if="settings.use_sidebar && xl" /> <!-- <SearchInput v-if="settings.use_sidebar && xl" /> -->
<RightSideBar v-if="settings.use_sidebar && xl" /> <RightSideBar v-if="settings.use_sidebar && xl" />
</section> </section>
</template> </template>
src/assets/scss/Global/app-grid.scss
+23 -25
View File
@@ -1,17 +1,16 @@
#app-grid { #app-grid {
display: grid; display: grid;
grid-template-columns: min-content 1fr 29rem; grid-template-columns: min-content 1fr 29rem;
grid-template-rows: 43px calc(100vh - (8.5rem + 13px)) max-content; grid-template-rows: 43px calc(100vh - (6.5rem + 13px)) max-content;
grid-template-areas: grid-template-areas:
"l-sidebar nav search-input" "l-sidebar nav r-sidebar"
"l-sidebar content r-sidebar" "l-sidebar content r-sidebar"
"bottombar bottombar bottombar"; "bottombar bottombar bottombar";
height: 100%; height: 100%;
gap: 1rem; gap: 0 1.5rem;
padding: $small 0; padding: $small 0;
margin: 0 auto; // margin: 0 auto;
margin-top: -$small; margin-top: -$small;
max-width: 1720px;
padding-top: $small; padding-top: $small;
} }
@@ -21,17 +20,17 @@
max-width: 100%; max-width: 100%;
} }
#app-grid.addBorderRight { // #app-grid.addBorderRight {
border-right: solid 1px $gray4; // // border-right: solid 1px $gray4;
padding-right: $medium; // // padding-right: $medium;
} // }
#app-grid.isSmall { #app-grid.isSmall {
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
grid-template-areas: grid-template-areas:
"l-sidebar nav" "l-sidebar nav"
"l-sidebar content" "l-sidebar content"
"l-sidebar content"; "bottombar bottombar";
} }
#app-grid.showAltNP { #app-grid.showAltNP {
@@ -39,7 +38,7 @@
grid-template-areas: grid-template-areas:
"l-sidebar nav" "l-sidebar nav"
"l-sidebar content" "l-sidebar content"
"l-sidebar bottombar"; "bottombar bottombar";
} }
} }
@@ -48,17 +47,17 @@
grid-template-areas: grid-template-areas:
"l-sidebar nav" "l-sidebar nav"
"l-sidebar content" "l-sidebar content"
"l-sidebar content"; "bottombar bottombar";
} }
#acontent { #acontent {
grid-area: content; grid-area: content;
// overflow: hidden; // margin-right: calc(0rem - ($medium + 2px));
margin-right: calc(0rem - ($medium + 2px)); // padding-right: calc($medium);
padding-right: calc($medium); // height: 100%;
height: 100%;
// outline: solid; overflow: auto;
// margin-top: -$small;
.nav { .nav {
margin: $small; margin: $small;
@@ -88,10 +87,10 @@
grid-area: r-sidebar; grid-area: r-sidebar;
} }
#gsearch-input { // #gsearch-input {
// display: none !important; // // display: none !important;
grid-area: search-input; // grid-area: search-input;
} // }
.topnav { .topnav {
grid-area: nav; grid-area: nav;
@@ -105,12 +104,11 @@
background-color: rgb(22, 22, 22); background-color: rgb(22, 22, 22);
height: 100vh; height: 100vh;
margin-top: -$small; margin-top: -$small;
margin-left: -$small; // margin-left: -$small;
} }
.b-bar { .b-bar {
grid-area: bottombar; grid-area: bottombar;
width: calc(100% + 1.25rem); width: 100%;
margin-left: -$small;
margin-bottom: -$small; margin-bottom: -$small;
} }
src/assets/scss/Global/index.scss
+3 -2
View File
@@ -28,14 +28,15 @@ body {
"Segoe UI Symbol"; "Segoe UI Symbol";
font-size: 1rem; font-size: 1rem;
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
width: calc(100vw - 1rem);
overflow: hidden;
height: calc(100vh - 1rem); height: calc(100vh - 1rem);
width: calc(100vw - 1.5rem);
overflow: hidden;
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
max-width: 1720px;
} }
a { a {
src/components/FolderView/FolderList.vue
+1 -1
View File
@@ -23,6 +23,6 @@ defineProps<{
#f-items { #f-items {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: $medium; gap: 1.5rem;
} }
</style> </style>
src/components/PlaylistsList/PlaylistCard.vue
+7 -1
View File
@@ -30,12 +30,18 @@ const props = defineProps<{
<style lang="scss"> <style lang="scss">
.p-card { .p-card {
background-color: $playlist-card-bg; background-color: $gray5;
display: grid; display: grid;
grid-template-rows: 1fr max-content; grid-template-rows: 1fr max-content;
padding: 1rem; padding: 1rem;
gap: $small; gap: $small;
&:hover {
transition: all .25s ease;
background-color: $darkestblue;
background-blend-mode: screen;
}
img { img {
width: 100%; width: 100%;
aspect-ratio: 1; aspect-ratio: 1;
src/components/RightSideBar/Main.vue
+20 -2
View File
@@ -1,11 +1,12 @@
<template> <template>
<div <div
class="r-sidebar rounded border" class="r-sidebar border"
:style="{ :style="{
marginBottom: !settings.show_alt_np ? '-1rem' : '', marginBottom: !settings.show_alt_np ? '-1rem' : '',
}" }"
> >
<div class="r-content"> <SearchInput />
<div class="r-content noscroll">
<div class="r-dash" v-if="tabs.current === tabs.tabs.home"> <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
<DashBoard /> <DashBoard />
</div> </div>
@@ -25,6 +26,7 @@ import Queue from "./Queue.vue";
import DashBoard from "./Home/Main.vue"; import DashBoard from "./Home/Main.vue";
import useTabStore from "../../stores/tabs"; import useTabStore from "../../stores/tabs";
import useSettingsStore from "@/stores/settings"; import useSettingsStore from "@/stores/settings";
import SearchInput from "./SearchInput.vue";
const tabs = useTabStore(); const tabs = useTabStore();
const settings = useSettingsStore(); const settings = useSettingsStore();
@@ -34,10 +36,26 @@ const settings = useSettingsStore();
.r-sidebar { .r-sidebar {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
// padding: $small;
display: grid;
grid-template-rows: max-content 1fr;
// gap: 1rem;
margin-top: -$small;
border-top: none;
border-bottom: none;
background-color: rgb(22, 22, 22);
padding-bottom: 1rem;
.gsearch-input {
height: 42px;
margin: $small;
margin-bottom: 1rem;
}
.r-content { .r-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $gray;
.r-search { .r-search {
height: 100%; height: 100%;
src/components/RightSideBar/NowPlayingRight.vue
+6 -6
View File
@@ -9,13 +9,13 @@
:to="{ :to="{
name: Routes.album, name: Routes.album,
params: { params: {
hash: queue.currenttrack.albumhash, hash: queue.currenttrack?.albumhash || ' ',
}, },
}" }"
> >
<img <img
class="rounded-sm" class="rounded-sm"
:src="paths.images.thumb.small + queue.currenttrack.image" :src="paths.images.thumb.small + queue.currenttrack?.image"
alt="" alt=""
/> />
</RouterLink> </RouterLink>
@@ -26,16 +26,16 @@
<div class="with-title"> <div class="with-title">
<div class="time time-current"> <div class="time time-current">
<span> <span>
{{ formatSeconds(queue.duration.current) }} {{ formatSeconds(queue.duration?.current) }}
</span> </span>
</div> </div>
<div class="tags"> <div class="tags">
<div class="title ellip"> <div class="title ellip">
{{ queue.currenttrack.title }} {{ queue.currenttrack?.title || 'Hello there' }}
</div> </div>
<ArtistName <ArtistName
:artists="queue.currenttrack.artist" :artists="queue.currenttrack?.artist || []"
:albumartist="queue.currenttrack.albumartist" :albumartist="queue.currenttrack?.albumartist || 'Welcome to alice'"
class="artist" class="artist"
/> />
</div> </div>
src/components/RightSideBar/SearchInput.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template> <template>
<div id="gsearch-input"> <div class="gsearch-input">
<div id="ginner" tabindex="0" class="bg-primary"> <div id="ginner" tabindex="0" class="bg-primary">
<button <button
:title=" :title="
@@ -72,7 +72,7 @@ function removeFocusedClass() {
</script> </script>
<style lang="scss"> <style lang="scss">
#gsearch-input { .gsearch-input {
display: grid; display: grid;
grid-template-columns: 1fr max-content; grid-template-columns: 1fr max-content;
border-radius: 3rem; border-radius: 3rem;
src/layouts/HeaderAndVList.vue
+5 -3
View File
@@ -1,9 +1,10 @@
<template> <template>
<!-- JCOMMENT: 64 is single item height, 24 is gap height -->
<div class="header-list-layout"> <div class="header-list-layout">
<div <div
v-bind="containerProps" v-bind="containerProps"
style="height: calc(100vh - 8.75rem)" style="height: calc(100vh - 8.5rem); margin-top: 1rem"
:style="{ paddingTop: !no_header ? headerHeight - 64 + 16 + 'px' : 0 }" :style="{ paddingTop: !no_header ? headerHeight - 64 + 24 + 'px' : 0 }"
@scroll="handleScroll" @scroll="handleScroll"
> >
<div <div
@@ -18,7 +19,7 @@
<div class="header rounded" style="height: 64px" v-if="!no_header"> <div class="header rounded" style="height: 64px" v-if="!no_header">
<div <div
ref="header" ref="header"
:style="{ top: -headerHeight + 64 - 16 + 'px' }" :style="{ top: -headerHeight + 64 - 24 + 'px' }"
class="header-content" class="header-content"
> >
<slot name="header"></slot> <slot name="header"></slot>
@@ -45,6 +46,7 @@
updateQueue(t.data.index !== undefined ? t.data.index : t.index) updateQueue(t.data.index !== undefined ? t.data.index : t.index)
" "
/> />
<div class="bottom-padding" style="height: 64px"></div>
</div> </div>
</div> </div>
</div> </div>
src/views/FolderView.vue
-3
View File
@@ -11,7 +11,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router"; import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
import useQueueStore from "@/stores/queue"; import useQueueStore from "@/stores/queue";
@@ -25,7 +24,6 @@ const loader = useLoaderStore();
const folder = useFolderStore(); const folder = useFolderStore();
const queue = useQueueStore(); const queue = useQueueStore();
const scrollable = ref<any>(null);
function playFromPage(index: number) { function playFromPage(index: number) {
queue.playFromFolder(folder.path, folder.allTracks); queue.playFromFolder(folder.path, folder.allTracks);
@@ -38,7 +36,6 @@ onBeforeRouteUpdate((to, from) => {
.fetchAll(to.params.path as string) .fetchAll(to.params.path as string)
.then(() => { .then(() => {
scrollable.value.scrollTop = 0;
folder.resetQuery(); folder.resetQuery();
}) })
.then(() => { .then(() => {
src/views/PlaylistList.vue
+3 -2
View File
@@ -1,5 +1,5 @@
<template> <template>
<div id="p-view"> <div id="p-view" class="noscroll">
<div class="grid"> <div class="grid">
<PlaylistCard <PlaylistCard
v-for="p in pStore.playlists" v-for="p in pStore.playlists"
@@ -22,10 +22,11 @@ const pStore = usePStore();
<style lang="scss"> <style lang="scss">
#p-view { #p-view {
scrollbar-color: $gray2 transparent; scrollbar-color: $gray2 transparent;
margin: 1rem 0;
.grid { .grid {
grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
gap: 1rem; gap: 2.5rem 1.75rem;
} }
} }
</style> </style>