mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-08 12:15:39 +00:00
add a new playlist view header
This commit is contained in:
geoffrey45
parent
a3d1b3aaea
commit
06f1e53fa1
26
src/App.vue
26
src/App.vue
@ -63,7 +63,7 @@ export default {
|
||||
collapsed.value = !collapsed.value;
|
||||
}
|
||||
|
||||
let up_next = ref(false);
|
||||
let up_next = ref(true);
|
||||
let search = ref(false);
|
||||
|
||||
const expandQueue = () => {
|
||||
@ -98,6 +98,18 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
#toggle {
|
||||
position: absolute;
|
||||
left: 0.2rem;
|
||||
width: 4rem;
|
||||
height: 100%;
|
||||
background: url(./assets/icons/menu.svg);
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
height: 2rem;
|
||||
@ -112,18 +124,6 @@ export default {
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.l-container #toggle {
|
||||
position: absolute;
|
||||
left: 0.2rem;
|
||||
width: 4rem;
|
||||
height: 100%;
|
||||
background: url(./assets/icons/menu.svg);
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
||||
@ -5,6 +5,7 @@ $red: #df4646;
|
||||
$blue: rgb(5, 80, 150);
|
||||
$green: rgb(67, 148, 67);
|
||||
$separator: #ffffff46;
|
||||
$pink: rgb(196, 58, 58);
|
||||
// sizes
|
||||
$small: .5em;
|
||||
$smaller: .25em;
|
||||
@ -64,9 +64,13 @@ button {
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $blue;
|
||||
border-radius: $small;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(158, 58, 58) !important;
|
||||
background-color: $pink !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -231,7 +235,7 @@ button {
|
||||
width: 2rem;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
margin-top: 0rem;
|
||||
margin-top: 0;
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="album-h">
|
||||
<div class="a-header rounded card-dark">
|
||||
<div class="a-header rounded card-dark border">
|
||||
<div
|
||||
class="art rounded border"
|
||||
:style="{
|
||||
@ -12,7 +12,7 @@
|
||||
<div class="title">{{ album_info.name }}</div>
|
||||
<div class="artist">{{ album_info.artist }}</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="separator no-border"></div>
|
||||
<div class="bottom">
|
||||
<div class="stats">
|
||||
{{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right rounded card-dark">
|
||||
<div class="right rounded card-dark border">
|
||||
<div class="circle circular"></div>
|
||||
<div class="rect rounded"></div>
|
||||
<div
|
||||
@ -61,6 +61,7 @@ export default {
|
||||
gap: $small;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 15rem;
|
||||
|
||||
.right {
|
||||
padding: $small;
|
||||
@ -132,7 +133,6 @@ export default {
|
||||
}
|
||||
.a-header {
|
||||
position: relative;
|
||||
height: 14rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -81,9 +81,6 @@ export default {
|
||||
height: 100%;
|
||||
width: 5em;
|
||||
background-color: rgb(5, 74, 131);
|
||||
border-radius: $small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: $small;
|
||||
margin-right: $small;
|
||||
|
||||
|
||||
@ -47,20 +47,20 @@ export default {
|
||||
SongItem,
|
||||
},
|
||||
setup() {
|
||||
let routex;
|
||||
let route;
|
||||
|
||||
const current = ref(perks.current);
|
||||
const search_query = ref(state.search_query);
|
||||
// const route = useRouter();
|
||||
|
||||
onMounted(() => {
|
||||
routex = useRoute().name;
|
||||
route = useRoute().name;
|
||||
});
|
||||
|
||||
function updateQueue(song) {
|
||||
let type;
|
||||
|
||||
switch (routex) {
|
||||
switch (route) {
|
||||
// check which route the play request come from
|
||||
case "FolderView":
|
||||
type = "folder";
|
||||
break;
|
||||
@ -73,24 +73,7 @@ export default {
|
||||
}
|
||||
|
||||
function loadAlbum(title, album_artist) {
|
||||
// console.log(typeof(title), album_artist)
|
||||
routeLoader.toAlbum(title, album_artist);
|
||||
// state.loading.value = true;
|
||||
|
||||
// album.getAlbumTracks(title, album_artist).then((data) => {
|
||||
// state.album_song_list.value = data.songs;
|
||||
// state.album_info.value = data.info;
|
||||
|
||||
// route.push({
|
||||
// name: "AlbumView",
|
||||
// params: {
|
||||
// album: title,
|
||||
// artist: album_artist,
|
||||
// },
|
||||
// });
|
||||
// state.loading.value = false;
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="side-nav-container" :class="{ collapsed: collapsed }">
|
||||
<div class="side-nav-container border" :class="{ collapsed: collapsed }">
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="home-button">
|
||||
<div class="in">
|
||||
@ -93,7 +93,6 @@ export default {
|
||||
.side-nav-container {
|
||||
padding: $small;
|
||||
color: #fff;
|
||||
border-top: 1px solid var(--separator);
|
||||
margin-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
|
||||
@ -112,8 +111,7 @@ export default {
|
||||
.nav-icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.6rem;
|
||||
margin: 0 $small 0 $small;
|
||||
border-radius: $small;
|
||||
background-color: rgb(26, 24, 24);
|
||||
}
|
||||
|
||||
@ -1,29 +1,24 @@
|
||||
<template>
|
||||
<div class="p-header rounded">
|
||||
<div class="info rounded">
|
||||
<p class="name">Because I Got High Radio</p>
|
||||
<p class="text">
|
||||
The best music to fade to while doing my thing. Featuring artists like
|
||||
Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
|
||||
</p>
|
||||
<div class="lower">
|
||||
<div class="statistics">
|
||||
<div class="count s-item"><p>45 Tracks</p></div>
|
||||
<div class="duration s-item"><p>3 Hrs 45 Min</p></div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="btns">
|
||||
<div class="play s-item"><p>Play Now</p></div>
|
||||
<div class="options s-item image"></div>
|
||||
</div>
|
||||
<div class="p-header rounded border">
|
||||
<div class="info rounded card-dark">
|
||||
<div>
|
||||
<div class="name">Makaveli Radio</div>
|
||||
<div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="albums">
|
||||
<div class="item third image"></div>
|
||||
<div class="item second image"></div>
|
||||
<div class="item first image"></div>
|
||||
<div class="buttons">
|
||||
<button class="play">
|
||||
<div class="icon"></div>
|
||||
Play
|
||||
</button>
|
||||
<button class="menu">
|
||||
<div class="icon"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-updated">
|
||||
Last updated yesterday |
|
||||
<span class="edit">Edit</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,162 +27,85 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
height: 15rem;
|
||||
margin-bottom: 1em;
|
||||
background: rgb(42, 46, 54);
|
||||
}
|
||||
|
||||
.p-header hr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.p-header .info {
|
||||
background-color: rgb(1, 5, 17);
|
||||
padding: 0.5rem;
|
||||
background-image: url("../../assets/images/eggs.jpg");
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-header .info .name {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin: 0.2em 0 0.5em 0;
|
||||
}
|
||||
.last-updated {
|
||||
position: absolute;
|
||||
bottom: $small;
|
||||
right: $small;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.699);
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 0.9rem;
|
||||
border-radius: $smaller;
|
||||
|
||||
.p-header .info .text {
|
||||
margin: 0.5rem 1em 0.5rem 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 4em;
|
||||
}
|
||||
.edit {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.p-header .banner {
|
||||
margin: 0.5rem;
|
||||
background-color: $blue;
|
||||
background: url("../../assets/images/null.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
width: 25rem;
|
||||
height: 10rem;
|
||||
bottom: $small;
|
||||
left: $small;
|
||||
padding: $small;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: end;
|
||||
padding-bottom: 3.5rem;
|
||||
|
||||
.p-header .info .statistics {
|
||||
display: flex;
|
||||
}
|
||||
.name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
|
||||
.p-header .info .count {
|
||||
background: url(../../assets/icons/album.svg);
|
||||
}
|
||||
&::before {
|
||||
content: "😎 ";
|
||||
}
|
||||
}
|
||||
|
||||
.p-header .info .duration {
|
||||
background-image: url(../../assets/icons/clock.svg);
|
||||
}
|
||||
.metrics {
|
||||
margin-top: $small;
|
||||
background-color: rgba(47, 55, 129, 0.233);
|
||||
color: rgb(0, 60, 255);
|
||||
padding: $small;
|
||||
width: fit-content;
|
||||
border-radius: $smaller;
|
||||
}
|
||||
|
||||
.p-header .info .s-item {
|
||||
background-size: 1.2rem;
|
||||
background-position: 10% 50%;
|
||||
width: 9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: lighter;
|
||||
margin-right: $small;
|
||||
height: 2rem;
|
||||
border: solid 1px rgba(255, 255, 255, 0.445);
|
||||
border-radius: $small;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.buttons {
|
||||
position: absolute;
|
||||
bottom: $small;
|
||||
left: $small;
|
||||
display: flex;
|
||||
gap: $small;
|
||||
|
||||
.p-header .info .lower p {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
.play {
|
||||
width: 5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0.25rem $small;
|
||||
|
||||
.p-header .info .btns {
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
}
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background-image: url("../../assets/icons/play.svg");
|
||||
background-size: 1.5rem;
|
||||
background-position: center;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.p-header .info .btns .play {
|
||||
width: 8rem;
|
||||
height: 100%;
|
||||
background-color: $green;
|
||||
border: none;
|
||||
background-image: url(../../assets/icons/play.svg);
|
||||
}
|
||||
|
||||
.p-header .info .btns .options {
|
||||
width: 2.5rem;
|
||||
height: 100%;
|
||||
background-color: #0465a7;
|
||||
border-radius: 50%;
|
||||
background-image: url(../../assets/icons/options.svg);
|
||||
background-size: 80%;
|
||||
background-position: center;
|
||||
border: none;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.p-header .info .btns .options:hover {
|
||||
transform: rotate(90deg);
|
||||
transition: all 0.5s ease;
|
||||
background-color: #2da8c7;
|
||||
}
|
||||
|
||||
.p-header .info .albums {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0.5rem;
|
||||
position: absolute;
|
||||
bottom: -0.5em;
|
||||
right: -1em;
|
||||
}
|
||||
|
||||
.p-header .info .albums .item {
|
||||
height: 5em;
|
||||
width: 5em;
|
||||
background-color: $blue;
|
||||
border-radius: $small;
|
||||
transition: transform 1s;
|
||||
}
|
||||
|
||||
.p-header .info .albums .first {
|
||||
position: absolute;
|
||||
transform: rotate(-30deg);
|
||||
right: 0.5em;
|
||||
bottom: 0em;
|
||||
background-color: $red;
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
}
|
||||
|
||||
.p-header .info .albums .second {
|
||||
position: absolute;
|
||||
transform: rotate(10deg);
|
||||
right: 4em;
|
||||
bottom: -1em !important;
|
||||
background-color: $green;
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-header .info .albums .third {
|
||||
position: absolute;
|
||||
transform: rotate(-10deg);
|
||||
bottom: -1em;
|
||||
right: 9em;
|
||||
background-color: $green;
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.p-header .info .albums .item:hover {
|
||||
transition: transform .5s;
|
||||
transform: scale(1.5);
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
.menu {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-image: url("../../assets/icons/options.svg");
|
||||
background-size: 2rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="now-playing">
|
||||
<div class="now-playing border">
|
||||
<div class="art-tags">
|
||||
<div
|
||||
class="album-art image"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="r-tracks rounded">
|
||||
<div class="r-tracks rounded border">
|
||||
<p class="heading">SIMILAR TRACKS</p>
|
||||
<div class="tracks">
|
||||
<div class="song-item" v-for="song in songs" :key="song">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="up-next">
|
||||
<div class="up-next border">
|
||||
<p class="heading">
|
||||
COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span>
|
||||
</p>
|
||||
<div class="main-item h-1" @click="playNext">
|
||||
<div class="main-item h-1 border" @click="playNext">
|
||||
<div
|
||||
class="album-art image"
|
||||
:style="{
|
||||
@ -22,39 +22,37 @@
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
:class="{ hr: is_expanded, v0x: !is_expanded, v1x: is_expanded }"
|
||||
class="all-items"
|
||||
:class="{ v0: !is_expanded, v1: is_expanded }"
|
||||
class="scrollable border"
|
||||
>
|
||||
<div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
|
||||
<div
|
||||
class="song-item h-1"
|
||||
v-for="song in queue"
|
||||
:key="song"
|
||||
@click="playThis(song)"
|
||||
:class="{
|
||||
currentInQueue: current._id.$oid == song._id.$oid,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="song-item h-1"
|
||||
v-for="song in queue"
|
||||
:key="song"
|
||||
@click="playThis(song)"
|
||||
:class="{
|
||||
currentInQueue: current._id.$oid == song._id.$oid,
|
||||
class="album-art image"
|
||||
:style="{
|
||||
backgroundImage: `url("${song.image}")`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="album-art image"
|
||||
:style="{
|
||||
backgroundImage: `url("${song.image}")`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="now-playing-track image"
|
||||
v-if="current._id.$oid == song._id.$oid"
|
||||
:class="{ active: is_playing, not_active: !is_playing }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<p class="title ellip">{{ song.title }}</p>
|
||||
<hr />
|
||||
<p class="artist ellip">
|
||||
<span v-for="artist in putCommas(song.artists)" :key="artist">{{
|
||||
artist
|
||||
}}</span>
|
||||
</p>
|
||||
class="now-playing-track image"
|
||||
v-if="current._id.$oid == song._id.$oid"
|
||||
:class="{ active: is_playing, not_active: !is_playing }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div class="title ellip">{{ song.title }}</div>
|
||||
<hr />
|
||||
<div class="artist ellip">
|
||||
<span v-for="artist in putCommas(song.artists)" :key="artist">{{
|
||||
artist
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,19 +116,10 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.up-next .v0 {
|
||||
max-height: 0em;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.5s ease;
|
||||
}
|
||||
|
||||
.up-next .v0x {
|
||||
background-color: transparent !important;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.up-next .v1x {
|
||||
transition: all .5s ease;
|
||||
background-color: rgb(218, 72, 96);
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.up-next .v1 {
|
||||
@ -139,7 +128,11 @@ export default {
|
||||
padding: $small;
|
||||
|
||||
.currentInQueue {
|
||||
background-color: rgba(0, 125, 241, 0.562);
|
||||
border: 2px solid $pink;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -152,20 +145,20 @@ export default {
|
||||
|
||||
.up-next .heading {
|
||||
position: relative;
|
||||
margin: 0.5rem 0 1rem 0rem;
|
||||
}
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
|
||||
.up-next > p > span {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
user-select: none;
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
user-select: none;
|
||||
|
||||
.up-next > p > span:hover {
|
||||
background: $blue;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: $blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.up-next .main-item {
|
||||
@ -176,42 +169,36 @@ export default {
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.album-art {
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
margin: 0 0.5rem 0 0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.tags {
|
||||
hr {
|
||||
border: none;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
.title {
|
||||
width: 20rem;
|
||||
margin: 0;
|
||||
}
|
||||
.artist {
|
||||
width: 20rem;
|
||||
margin: 0;
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.up-next .main-item .album-art {
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
margin: 0 0.5rem 0 0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.up-next .main-item .tags hr {
|
||||
border: none;
|
||||
margin: 0.3rem;
|
||||
}
|
||||
|
||||
.up-next .main-item .tags .title {
|
||||
width: 20rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.up-next .main-item .tags .artist {
|
||||
width: 20rem;
|
||||
margin: 0;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.up-next .all-items {
|
||||
padding-top: $small;
|
||||
border-radius: 0.5rem;
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable {
|
||||
.up-next .scrollable {
|
||||
overflow-y: auto;
|
||||
background-color: $card-dark;
|
||||
border-radius: 0.5rem;
|
||||
@ -221,42 +208,37 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.up-next .all-items p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable .song-item {
|
||||
.up-next .scrollable .song-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable .song-item:hover {
|
||||
cursor: pointer;
|
||||
background-color: $blue;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable .song-item hr {
|
||||
border: none;
|
||||
margin: 0.1rem;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
margin: 0.1rem;
|
||||
}
|
||||
|
||||
.up-next .all-items .album-art {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.album-art {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 0.5rem 0 0;
|
||||
border-radius: 0.5rem;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
}
|
||||
|
||||
.up-next .all-items .song-item .artist {
|
||||
width: 20rem;
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.637);
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 0.5rem 0 0;
|
||||
border-radius: 0.5rem;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
}
|
||||
.artist {
|
||||
width: 20rem;
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.637);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<Header :album_info="album_info" />
|
||||
</div>
|
||||
<div class="separator" id="av-sep"></div>
|
||||
<div class="songs rounded">
|
||||
<div class="songs rounded border">
|
||||
<SongList :songs="album_songs" />
|
||||
</div>
|
||||
<div class="separator" id="av-sep"></div>
|
||||
|
||||
@ -127,7 +127,7 @@ export default {
|
||||
}
|
||||
|
||||
#scrollable {
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - $small);
|
||||
padding-right: $small;
|
||||
}
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="p-bg rounded">
|
||||
<div class="clip">
|
||||
<div class="scrollable">
|
||||
<SongList :songs="songs"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-artists-p">
|
||||
<FeaturedArtists />
|
||||
<div class="playlist-view rounded">
|
||||
<Header :playlist_info="playlist_info" />
|
||||
<div class="separator no-border"></div>
|
||||
|
||||
<div class="songlist rounded border">
|
||||
<SongList :songs="songs" />
|
||||
</div>
|
||||
<div class="separator no-border"></div>
|
||||
<FeaturedArtists />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -16,7 +15,7 @@
|
||||
import Header from "@/components/PlaylistView/Header.vue";
|
||||
import SongList from "@/components/FolderView/SongList.vue";
|
||||
import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
|
||||
|
||||
import state from "@/composables/state.js";
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
@ -25,32 +24,33 @@ export default {
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
songs: [],
|
||||
songs: state.folder_song_list,
|
||||
playlist_info: {
|
||||
name: "Dax Radio",
|
||||
count: state.folder_song_list.value.length,
|
||||
duration: "0:00",
|
||||
image: "../../assets/images/null.webp",
|
||||
artist: "",
|
||||
artist_image: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.p-bg {
|
||||
position: relative;
|
||||
background: $card-dark;
|
||||
height: calc(100% - 16em);
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
.p-bg .clip {
|
||||
height: calc(100% - 12em);
|
||||
padding-bottom: $small;
|
||||
border-bottom: solid 1px $separator;
|
||||
}
|
||||
|
||||
.p-bg .scrollable {
|
||||
height: 100%;
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.p-bg .f-artists-p {
|
||||
.playlist-view {
|
||||
height: calc(100% - 1rem);
|
||||
margin-top: $small;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.songlist {
|
||||
background-color: $card-dark;
|
||||
padding: $small;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user