mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-03 20:13:02 +00:00
add initial bottom bar
+ use a hacky grid to position bottom bar for chrome compatibility
This commit is contained in:
geoffrey45
committed by
Mungai Njoroge
Mungai Njoroge
parent
d5bf60f93d
commit
56749ddfd9
@@ -1,20 +1,17 @@
|
||||
#app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr 29rem;
|
||||
grid-template-rows: 42px 1fr max-content;
|
||||
grid-template-rows: 43px calc(100vh - (8.5rem + 13px)) max-content;
|
||||
grid-template-areas:
|
||||
"l-sidebar nav search-input"
|
||||
"l-sidebar content r-sidebar"
|
||||
"l-sidebar content r-sidebar"
|
||||
"bottombar bottombar bottombar";
|
||||
height: calc(100vh);
|
||||
height: 100%;
|
||||
gap: 1rem;
|
||||
padding: $small 0;
|
||||
margin: 0 auto;
|
||||
margin-top: -$small;
|
||||
max-width: 1720px;
|
||||
// padding-right: $medium;
|
||||
// border-right: solid 1px $gray4;
|
||||
padding-top: $small;
|
||||
}
|
||||
|
||||
@@ -34,7 +31,6 @@
|
||||
grid-template-areas:
|
||||
"l-sidebar nav"
|
||||
"l-sidebar content"
|
||||
"l-sidebar content"
|
||||
"l-sidebar content";
|
||||
}
|
||||
|
||||
@@ -43,7 +39,6 @@
|
||||
grid-template-areas:
|
||||
"l-sidebar nav"
|
||||
"l-sidebar content"
|
||||
"l-sidebar content"
|
||||
"l-sidebar bottombar";
|
||||
}
|
||||
}
|
||||
@@ -53,15 +48,17 @@
|
||||
grid-template-areas:
|
||||
"l-sidebar nav"
|
||||
"l-sidebar content"
|
||||
"l-sidebar content"
|
||||
"l-sidebar content";
|
||||
}
|
||||
|
||||
#acontent {
|
||||
grid-area: content;
|
||||
overflow: hidden auto;
|
||||
// overflow: hidden;
|
||||
margin-right: calc(0rem - ($medium + 2px));
|
||||
padding-right: calc($medium);
|
||||
height: 100%;
|
||||
// outline: solid;
|
||||
// margin-top: -$small;
|
||||
|
||||
.nav {
|
||||
margin: $small;
|
||||
@@ -92,6 +89,7 @@
|
||||
}
|
||||
|
||||
#gsearch-input {
|
||||
// display: none !important;
|
||||
grid-area: search-input;
|
||||
}
|
||||
|
||||
|
||||
@@ -34,6 +34,7 @@ body {
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,6 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "SFCompactDisplay";
|
||||
src: url("../googlesans.ttf");
|
||||
src: url("../sf-compact.woff") format("woff");
|
||||
}
|
||||
|
||||
|
||||
@@ -1,46 +1,73 @@
|
||||
<template>
|
||||
<div class="b-bar bg-primary pad-medium noscroll" v-if="settings.show_alt_np">
|
||||
<div class="info">
|
||||
<img
|
||||
:src="paths.images.thumb.large + queue.currenttrack?.image"
|
||||
alt=""
|
||||
class="rounded shadow-lg"
|
||||
/>
|
||||
<div class="tags">
|
||||
<div class="np-artist ellip">
|
||||
<span
|
||||
v-for="artist in putCommas(
|
||||
queue.currenttrack?.artist || ['♥ Hello ♥']
|
||||
)"
|
||||
>
|
||||
{{ artist }}
|
||||
</span>
|
||||
<div class="b-bar">
|
||||
<div class="centered">
|
||||
<div class="inner">
|
||||
<RouterLink
|
||||
title="go to album"
|
||||
:to="{
|
||||
name: Routes.album,
|
||||
params: {
|
||||
hash: queue.currenttrack.albumhash,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<img
|
||||
class="rounded-sm"
|
||||
:src="paths.images.thumb.small + queue.currenttrack.image"
|
||||
alt=""
|
||||
/>
|
||||
</RouterLink>
|
||||
|
||||
<div class="info">
|
||||
<div class="with-title">
|
||||
<div class="time time-current">
|
||||
<span>
|
||||
{{ formatSeconds(queue.duration.current) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div class="title ellip">
|
||||
{{ queue.currenttrack.title }}
|
||||
</div>
|
||||
<ArtistName
|
||||
:artists="queue.currenttrack.artist"
|
||||
:albumartist="queue.currenttrack.albumartist"
|
||||
class="artist"
|
||||
/>
|
||||
</div>
|
||||
<div class="time time-full">
|
||||
<span>
|
||||
{{
|
||||
formatSeconds(
|
||||
queue.currenttrack ? queue.currenttrack.duration : 0
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Progress />
|
||||
</div>
|
||||
<div class="np-title ellip">
|
||||
{{ queue.currenttrack?.title || "Play something"}}
|
||||
<div class="buttons">
|
||||
<HotKeys />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Progress />
|
||||
<div class="time">
|
||||
<span class="current">{{ formatSeconds(queue.duration.current) }}</span>
|
||||
<HotKeys />
|
||||
<span class="full">{{
|
||||
formatSeconds(queue.currenttrack ? queue.currenttrack.duration : 0)
|
||||
}}</span>
|
||||
<div class=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "@/assets/scss/BottomBar/BottomBar.scss";
|
||||
import useSettingsStore from "@/stores/settings";
|
||||
import { formatSeconds, putCommas } from "@/utils";
|
||||
import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
|
||||
import Progress from "../LeftSidebar/NP/Progress.vue";
|
||||
|
||||
import { paths } from "@/config";
|
||||
import useQStore from "@/stores/queue";
|
||||
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";
|
||||
|
||||
const queue = useQStore();
|
||||
const settings = useSettingsStore();
|
||||
@@ -48,51 +75,126 @@ const settings = useSettingsStore();
|
||||
|
||||
<style lang="scss">
|
||||
.b-bar {
|
||||
height: 65px;
|
||||
background-color: rgb(22, 22, 22);
|
||||
display: grid;
|
||||
grid-template-rows: 1fr max-content;
|
||||
gap: 1rem;
|
||||
// padding: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
position: relative;
|
||||
height: 55px;
|
||||
// width: 100%;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
border-top: solid 1px $gray3;
|
||||
|
||||
.time {
|
||||
.centered {
|
||||
width: 50rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
align-items: center;
|
||||
|
||||
.full {
|
||||
text-align: end;
|
||||
.inner {
|
||||
display: grid;
|
||||
height: 3rem;
|
||||
grid-template-columns: max-content 1fr max-content;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 1rem;
|
||||
// background-color: $gray5;
|
||||
width: max-content;
|
||||
padding: $small $medium;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
height: 6rem;
|
||||
width: auto;
|
||||
height: 2.75rem;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
gap: $smaller;
|
||||
.info {
|
||||
width: 30rem;
|
||||
// width: 100%;
|
||||
|
||||
.np-title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: bold;
|
||||
.with-title {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr max-content;
|
||||
align-items: flex-end;
|
||||
gap: $smaller;
|
||||
}
|
||||
|
||||
.np-artist {
|
||||
opacity: 0.75;
|
||||
font-size: 0.9rem;
|
||||
.time {
|
||||
font-size: 12px;
|
||||
height: fit-content;
|
||||
width: 3rem;
|
||||
|
||||
span {
|
||||
background-color: $gray3;
|
||||
border-radius: $smaller;
|
||||
padding: 0 $smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.time-full {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.tags {
|
||||
font-size: small;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
place-items: center;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.artist {
|
||||
opacity: 0.75;
|
||||
margin-bottom: -$smaller;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: 9rem;
|
||||
}
|
||||
}
|
||||
// width: 100%;
|
||||
|
||||
// .time {
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat(3, 1fr);
|
||||
// align-items: center;
|
||||
|
||||
// .full {
|
||||
// text-align: end;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .info {
|
||||
// display: grid;
|
||||
// grid-template-columns: max-content 1fr;
|
||||
// gap: 1rem;
|
||||
|
||||
// img {
|
||||
// height: 6rem;
|
||||
// width: auto;
|
||||
// }
|
||||
|
||||
// .tags {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: flex-end;
|
||||
// gap: $smaller;
|
||||
|
||||
// .np-title {
|
||||
// font-size: 1.15rem;
|
||||
// font-weight: bold;
|
||||
// }
|
||||
|
||||
// .np-artist {
|
||||
// opacity: 0.75;
|
||||
// font-size: 0.9rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
class="ellip"
|
||||
:style="{
|
||||
fontSize: small ? '0.85rem' : smaller ? 'small' : '',
|
||||
padding: '0 .25rem'
|
||||
}"
|
||||
>
|
||||
<div v-if="artists === null || artists.length === 0">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="header-list-layout">
|
||||
<div
|
||||
v-bind="containerProps"
|
||||
style="height: calc(100vh - 4.25rem)"
|
||||
style="height: calc(100vh - 8.75rem)"
|
||||
:style="{ paddingTop: !no_header ? headerHeight - 64 + 16 + 'px' : 0 }"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user