mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 04:23:01 +00:00
redesign bottom bar
This commit is contained in:
geoffrey45
committed by
Mungai Njoroge
Mungai Njoroge
parent
56749ddfd9
commit
6769af2a50
@@ -4,7 +4,7 @@ input[type="range"] {
|
||||
width: calc(100% - 2px);
|
||||
height: 0.3rem;
|
||||
border-radius: 5px;
|
||||
background: $gray linear-gradient(90deg, $accent, $accent) no-repeat;
|
||||
background: $gray4 linear-gradient(90deg, $accent, $darkestblue) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@@ -13,7 +13,7 @@ input[type="range"] {
|
||||
height: 0;
|
||||
width: 0.8rem;
|
||||
border-radius: 50%;
|
||||
background: $accent;
|
||||
background: $darkestblue;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@@ -21,7 +21,7 @@ input[type="range"] {
|
||||
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: $accent;
|
||||
background: $darkestblue;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ input[type="range"] {
|
||||
height: 0;
|
||||
width: 0.8rem;
|
||||
border-radius: 50%;
|
||||
background: $accent;
|
||||
background: $darkestblue;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,59 +1,50 @@
|
||||
<template>
|
||||
|
||||
<div class="hotkeys rounded-sm noscroll">
|
||||
<div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
|
||||
<div
|
||||
class="image ctrl-btn play-pause"
|
||||
@click="q.playPause"
|
||||
:class="{ isPlaying: q.playing }"
|
||||
></div>
|
||||
<div class="image ctrl-btn" id="next" @click="q.playNext"></div>
|
||||
<button @click.prevent="q.playPrev">
|
||||
<PrevSvg />
|
||||
</button>
|
||||
<button @click.prevent="q.playPause">
|
||||
<PauseSvg v-if="q.playing" />
|
||||
<PlaySvg v-else />
|
||||
</button>
|
||||
<button @click.prevent="q.playNext">
|
||||
<NextSvg />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useQStore from "@/stores/queue";
|
||||
|
||||
import NextSvg from "../../../assets/icons/next.svg";
|
||||
import PrevSvg from "../../../assets/icons/next.svg";
|
||||
import PauseSvg from "../../../assets/icons/pause.svg";
|
||||
import PlaySvg from "../../../assets/icons/play.svg";
|
||||
|
||||
const q = useQStore();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.hotkeys {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: $small;
|
||||
height: 2.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
place-content: flex-end;
|
||||
grid-template-columns: repeat(3, 2rem);
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
background-color: $gray2;
|
||||
|
||||
.ctrl-btn {
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
background-size: 1.5rem !important;
|
||||
button {
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $darkestblue;
|
||||
background: $darkestblue;
|
||||
}
|
||||
}
|
||||
|
||||
#previous {
|
||||
background-image: url(../../../assets/icons/previous.svg);
|
||||
}
|
||||
|
||||
.play-pause {
|
||||
background-image: url(../../../assets/icons/play.svg);
|
||||
}
|
||||
|
||||
.isPlaying {
|
||||
background-image: url(../../../assets/icons/pause.svg);
|
||||
}
|
||||
|
||||
#next {
|
||||
background-image: url(../../../assets/icons/next.svg);
|
||||
button:first-child {
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,21 +2,25 @@
|
||||
<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="with-icons rounded-sm border">
|
||||
<!-- <button><PlusSvg /></button> -->
|
||||
<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>
|
||||
<button><HeartSvg /></button>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="with-title">
|
||||
@@ -48,7 +52,7 @@
|
||||
|
||||
<Progress />
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="buttons rounded-sm border">
|
||||
<HotKeys />
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,6 +73,9 @@ import ArtistName from "../shared/ArtistName.vue";
|
||||
import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
|
||||
import Progress from "../LeftSidebar/NP/Progress.vue";
|
||||
|
||||
import HeartSvg from "../../assets/icons/heart.svg";
|
||||
import PlusSvg from "../../assets/icons/plus.svg";
|
||||
|
||||
const queue = useQStore();
|
||||
const settings = useSettingsStore();
|
||||
</script>
|
||||
@@ -86,6 +93,9 @@ const settings = useSettingsStore();
|
||||
width: 50rem;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
padding: $small $medium;
|
||||
margin: 0 auto;
|
||||
|
||||
.inner {
|
||||
display: grid;
|
||||
@@ -95,10 +105,26 @@ const settings = useSettingsStore();
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// background-color: $gray5;
|
||||
width: max-content;
|
||||
padding: $small $medium;
|
||||
margin: 0 auto;
|
||||
.with-icons {
|
||||
background-color: rgba(255, 255, 255, 0.048);
|
||||
display: grid;
|
||||
gap: $small;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
margin-top: -$smaller;
|
||||
|
||||
button {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
&:last-child:hover {
|
||||
background: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 2.75rem;
|
||||
@@ -106,6 +132,7 @@ const settings = useSettingsStore();
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
margin-top: $smaller;
|
||||
}
|
||||
|
||||
.info {
|
||||
@@ -154,9 +181,20 @@ const settings = useSettingsStore();
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: 9rem;
|
||||
// width: 10rem;
|
||||
height: 3.25rem;
|
||||
margin-top: -$smaller;
|
||||
background-color: rgba(255, 255, 255, 0.048);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0 $small;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: grid;
|
||||
place-content: end;
|
||||
}
|
||||
// width: 100%;
|
||||
|
||||
// .time {
|
||||
|
||||
@@ -1,20 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="next-track bg-primary rounded"
|
||||
:class="{ contexton: context_on }"
|
||||
@click="playNext"
|
||||
@contextmenu.prevent="showMenu"
|
||||
>
|
||||
<div class="nextup abs">next up</div>
|
||||
<img :src="paths.images.thumb + track?.image" class="rounded-sm" />
|
||||
<div class="tags">
|
||||
<div class="title ellip">{{ track?.title || "Don't click here" }}</div>
|
||||
<div class="artist ellip" v-if="track">
|
||||
<span v-for="artist in putCommas(track.artist)" :key="artist">{{
|
||||
artist
|
||||
}}</span>
|
||||
<div class="bottom-left">
|
||||
<div class="upNext rounded-sm border" title="play next song">
|
||||
<img
|
||||
:src="paths.images.thumb.small + queue.next?.image"
|
||||
class="rounded-sm"
|
||||
/>
|
||||
<div class="text">
|
||||
<div class="title"><b>Stiff necked fools</b></div>
|
||||
<div class="from">Next up</div>
|
||||
</div>
|
||||
<span v-else class="artist">nothing will happen</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -23,67 +17,51 @@
|
||||
import { paths } from "@/config";
|
||||
import { Track } from "@/interfaces";
|
||||
import { putCommas } from "@/utils";
|
||||
import useQueueStore from "@/stores/queue";
|
||||
|
||||
import { showTrackContextMenu as showContext } from "@/composables/context";
|
||||
import { ref } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
track: Track | null;
|
||||
playNext: () => void;
|
||||
}>();
|
||||
|
||||
const context_on = ref(false);
|
||||
|
||||
function showMenu(e: Event) {
|
||||
if (props.track) {
|
||||
showContext(e, props.track, context_on);
|
||||
}
|
||||
}
|
||||
const queue = useQueueStore();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.next-track {
|
||||
position: relative;
|
||||
|
||||
.bottom-left {
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
padding-top: 2px;
|
||||
// place-content: end;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray4;
|
||||
|
||||
.h {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.nextup {
|
||||
right: $small;
|
||||
top: 0;
|
||||
font-size: 0.8rem;
|
||||
.upNext {
|
||||
padding: $smaller;
|
||||
border-radius: 0.25rem;
|
||||
font-style: oblique;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 4.5rem;
|
||||
aspect-ratio: 1;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: $small;
|
||||
display: grid;
|
||||
width: 20rem;
|
||||
background-color: rgba(255, 255, 255, 0.048);
|
||||
cursor: pointer;
|
||||
|
||||
.artist {
|
||||
&:hover {
|
||||
transition: all 0.25s ease;
|
||||
background-color: $gray4;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 2.75rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: small;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
.from {
|
||||
opacity: 0.75;
|
||||
font-size: $medium;
|
||||
margin-top: $smaller;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user