mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-03 20:13:02 +00:00
geoffrey45
5476575d10
+ fix `play next` bug + add new folder banner image + add new now playing component + move to gray4 for accent color + increase image sizes, for clean UI
84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
<template>
|
|
<div id="right-tabs" class="bg-black rounded">
|
|
<div class="tab-buttons-wrapper">
|
|
<div id="tabheaders" class="rounded-sm noscroll">
|
|
<div
|
|
class="tab"
|
|
v-for="slot in $slots.default()"
|
|
:key="slot.key"
|
|
@click="s.changeTab(slot.props.name)"
|
|
:class="{ activetab: slot.props.name === s.currentTab }"
|
|
>
|
|
{{ slot.props.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import useSearchStore from "@/stores/search";
|
|
|
|
const s = useSearchStore();
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#right-tabs {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: min-content 1fr;
|
|
|
|
.tab-buttons-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#tabheaders {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, max-content);
|
|
justify-content: space-around;
|
|
margin: 1rem;
|
|
width: max-content;
|
|
background: linear-gradient(37deg, $gray1, $gray2, $gray1);
|
|
height: 2rem;
|
|
|
|
& > * {
|
|
border-left: solid 1px $gray3;
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
padding: 0 $small;
|
|
|
|
&:first-child {
|
|
border-left: solid 1px transparent;
|
|
}
|
|
}
|
|
|
|
.activetab {
|
|
background-color: $darkblue;
|
|
transition: all 0.3s ease;
|
|
border-left: solid 1px transparent;
|
|
}
|
|
}
|
|
|
|
#tab-content {
|
|
height: 100%;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
padding-bottom: 1rem;
|
|
}
|
|
}
|
|
</style>
|