mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-07-28 13:41:42 +00:00
add coming up next & now playing cards
This commit is contained in:
geoffrey45
parent
fd41d4167b
commit
6ef31c4d82
29
src/App.vue
29
src/App.vue
@ -21,7 +21,9 @@
|
||||
<router-view />
|
||||
</div>
|
||||
<div class="r-sidebar">
|
||||
<Search/>
|
||||
<Search :collapser="collapser"/>
|
||||
<NowPlaying />
|
||||
<UpNext :collapser="collapser" @updateCollapser="updateCollapser"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -32,13 +34,17 @@ import { ref } from "@vue/reactivity";
|
||||
import Navigation from "./components/LeftSidebar/Navigation.vue";
|
||||
import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
|
||||
|
||||
import Search from "./components/RightSideBar/Search.vue"
|
||||
import Search from "./components/RightSideBar/Search.vue";
|
||||
import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
|
||||
import UpNext from "./components/RightSideBar/UpNext.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navigation,
|
||||
PinnedStuff,
|
||||
Search
|
||||
Search,
|
||||
NowPlaying,
|
||||
UpNext
|
||||
},
|
||||
setup() {
|
||||
const collapsed = ref(true);
|
||||
@ -48,7 +54,14 @@ export default {
|
||||
function toggleNav() {
|
||||
collapsed.value = !collapsed.value;
|
||||
}
|
||||
return { logo, toggleNav, collapsed };
|
||||
|
||||
const collapser = ref(false)
|
||||
const updateCollapser = ()=> {
|
||||
collapser.value = !collapser.value
|
||||
console.log(collapser.value);
|
||||
}
|
||||
|
||||
return { logo, toggleNav, collapsed, collapser, updateCollapser };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -76,11 +89,11 @@ export default {
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
height: 3.60em;
|
||||
height: 3.6em;
|
||||
margin-left: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: .5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.l-sidebar {
|
||||
@ -97,7 +110,7 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
margin-left: .25em;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
.l-container #settings-button {
|
||||
@ -123,7 +136,7 @@ export default {
|
||||
|
||||
.l-container #settings-button #settings-icon {
|
||||
margin-left: 1em;
|
||||
margin-right: .25em;
|
||||
margin-right: 0.25em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
background-image: url(./assets/icons/settings.svg);
|
||||
|
||||
@ -93,6 +93,7 @@ a {
|
||||
grid-area: r-sidebar;
|
||||
border-radius: 5px;
|
||||
margin-right: .5em;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.image {
|
||||
|
||||
4
src/assets/icons/next.svg
Normal file
4
src/assets/icons/next.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.73324 4.0275C6.45251 3.82918 6.12266 3.71184 5.77975 3.6883C5.43684 3.66477 5.09405 3.73594 4.78886 3.89406C4.48366 4.05217 4.2278 4.29113 4.04924 4.58483C3.87068 4.87853 3.77628 5.21566 3.77637 5.55938V24.4406C3.77628 24.7843 3.87068 25.1215 4.04924 25.4152C4.2278 25.7089 4.48366 25.9478 4.78886 26.106C5.09405 26.2641 5.43684 26.3352 5.77975 26.3117C6.12266 26.2882 6.45251 26.1708 6.73324 25.9725L20.1076 16.5319C20.3529 16.3588 20.553 16.1292 20.6912 15.8627C20.8293 15.5961 20.9014 15.3002 20.9014 15C20.9014 14.6998 20.8293 14.4039 20.6912 14.1373C20.553 13.8708 20.3529 13.6413 20.1076 13.4681L6.73324 4.0275ZM5.65137 5.55938L19.0257 15L5.65137 24.4406V5.55938Z" fill="white"/>
|
||||
<path d="M26.2764 4.6875C26.2764 4.43886 26.1776 4.2004 26.0018 4.02459C25.826 3.84877 25.5875 3.75 25.3389 3.75C25.0902 3.75 24.8518 3.84877 24.676 4.02459C24.5001 4.2004 24.4014 4.43886 24.4014 4.6875V25.3125C24.4014 25.5611 24.5001 25.7996 24.676 25.9754C24.8518 26.1512 25.0902 26.25 25.3389 26.25C25.5875 26.25 25.826 26.1512 26.0018 25.9754C26.1776 25.7996 26.2764 25.5611 26.2764 25.3125V4.6875Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
src/assets/icons/pause.svg
Normal file
3
src/assets/icons/pause.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 1.875C7.75195 1.875 1.875 7.75195 1.875 15C1.875 22.248 7.75195 28.125 15 28.125C22.248 28.125 28.125 22.248 28.125 15C28.125 7.75195 22.248 1.875 15 1.875ZM15 25.8984C8.98242 25.8984 4.10156 21.0176 4.10156 15C4.10156 8.98242 8.98242 4.10156 15 4.10156C21.0176 4.10156 25.8984 8.98242 25.8984 15C25.8984 21.0176 21.0176 25.8984 15 25.8984ZM12.4219 10.3125H11.0156C10.8867 10.3125 10.7812 10.418 10.7812 10.5469V19.4531C10.7812 19.582 10.8867 19.6875 11.0156 19.6875H12.4219C12.5508 19.6875 12.6562 19.582 12.6562 19.4531V10.5469C12.6562 10.418 12.5508 10.3125 12.4219 10.3125ZM18.9844 10.3125H17.5781C17.4492 10.3125 17.3438 10.418 17.3438 10.5469V19.4531C17.3438 19.582 17.4492 19.6875 17.5781 19.6875H18.9844C19.1133 19.6875 19.2188 19.582 19.2188 19.4531V10.5469C19.2188 10.418 19.1133 10.3125 18.9844 10.3125Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 947 B |
3
src/assets/icons/previous.svg
Normal file
3
src/assets/icons/previous.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.5 3.75C4.5 3.55109 4.42098 3.36032 4.28033 3.21967C4.13968 3.07902 3.94891 3 3.75 3C3.55109 3 3.36032 3.07902 3.21967 3.21967C3.07902 3.36032 3 3.55109 3 3.75V24.25C3 24.4489 3.07902 24.6397 3.21967 24.7803C3.36032 24.921 3.55109 25 3.75 25C3.94891 25 4.13968 24.921 4.28033 24.7803C4.42098 24.6397 4.5 24.4489 4.5 24.25V3.75ZM25 5.254C25 3.438 22.959 2.37 21.467 3.406L8.963 12.086C8.6656 12.2924 8.42239 12.5674 8.254 12.8879C8.08561 13.2083 7.99701 13.5646 7.99574 13.9266C7.99446 14.2886 8.08054 14.6455 8.24667 14.9671C8.4128 15.2888 8.65407 15.5655 8.95 15.774L21.454 24.584C22.944 25.634 25 24.569 25 22.745V5.254ZM22.322 4.638C22.4345 4.55982 22.5662 4.51395 22.703 4.50536C22.8397 4.49677 22.9761 4.52579 23.0975 4.58927C23.2189 4.65275 23.3206 4.74826 23.3916 4.86545C23.4625 4.98263 23.5 5.11701 23.5 5.254V22.745C23.5 22.8824 23.4622 23.0171 23.3909 23.1345C23.3195 23.2519 23.2172 23.3475 23.0953 23.4107C22.9733 23.474 22.8363 23.5025 22.6993 23.4932C22.5622 23.4839 22.4303 23.4371 22.318 23.358L9.814 14.548C9.7152 14.4786 9.63463 14.3863 9.57914 14.279C9.52365 14.1718 9.49488 14.0527 9.49527 13.932C9.49566 13.8112 9.52521 13.6923 9.5814 13.5854C9.63759 13.4785 9.71875 13.3868 9.818 13.318L22.322 4.638Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/htf.jpeg
Normal file
BIN
src/assets/images/htf.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
src/assets/images/tk.jpg
Normal file
BIN
src/assets/images/tk.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
95
src/components/RightSideBar/NowPlaying.vue
Normal file
95
src/components/RightSideBar/NowPlaying.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="now-playing">
|
||||
<div class="art-tags">
|
||||
<div class="album-art image"></div>
|
||||
<div>
|
||||
<p id="title" class="ellipsis">I love this bar (remix)</p>
|
||||
<hr />
|
||||
<span id="artist">Toby Keith, Morgan Wallen</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="image" id="previous"></div>
|
||||
<div class="image" id="play-pause"></div>
|
||||
<div class="image" id="next"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.now-playing {
|
||||
height: 5em;
|
||||
border-radius: 0.5em;
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
background-color: #131313b2;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
}
|
||||
|
||||
.now-playing .art-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.now-playing .art-tags .album-art {
|
||||
width: 4.5em;
|
||||
height: 4.5em;
|
||||
border-radius: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
background-color: #ad1717a8;
|
||||
background-image: url(../../assets/images/tk.jpg);
|
||||
}
|
||||
|
||||
.now-playing .art-tags hr {
|
||||
border: none;
|
||||
margin: 0.3em;
|
||||
}
|
||||
.now-playing .art-tags #title {
|
||||
margin: 0;
|
||||
width: 14em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.now-playing .art-tags #artist {
|
||||
font-weight: lighter;
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.712);
|
||||
}
|
||||
|
||||
.now-playing .controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.now-playing .controls * {
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
background-size: 50%;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.now-playing .controls *:hover {
|
||||
filter: invert(66%) sepia(75%) saturate(4335%) hue-rotate(158deg)
|
||||
brightness(89%) contrast(101%);
|
||||
}
|
||||
|
||||
.now-playing .controls #previous {
|
||||
background-image: url(../../assets/icons/previous.svg);
|
||||
}
|
||||
|
||||
.now-playing .controls #play-pause {
|
||||
background-image: url(../../assets/icons/pause.svg);
|
||||
}
|
||||
|
||||
.now-playing .controls #next {
|
||||
background-image: url(../../assets/icons/next.svg);
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div class="right-search">
|
||||
<input type="search" id="search" placeholder="Michael Jackson" />
|
||||
<div class="scrollable">
|
||||
|
||||
<input
|
||||
type="search"
|
||||
id="search"
|
||||
placeholder="Michael Jackson"
|
||||
v-model="query"
|
||||
/>
|
||||
<div class="scrollable" :class="{ hidden: !query }">
|
||||
<div class="tracks-results">
|
||||
<h3 class="heading">TRACKS <span class="more">SEE ALL</span></h3>
|
||||
<h3 class="heading">TRACKS<span class="more">SEE ALL</span></h3>
|
||||
<div class="result-item" v-for="song in songs" :key="song">
|
||||
<div class="album-art image"></div>
|
||||
<div class="tags">
|
||||
@ -14,6 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="albums-results">
|
||||
<h3 class="heading">ALBUMS <span class="more">SEE ALL</span></h3>
|
||||
<div class="grid">
|
||||
@ -27,9 +32,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
<div class="artists-results" v-if="artists">
|
||||
<h3 class="heading">ARTISTS <span class="more" v-if="artists.length>3">SEE ALL</span></h3>
|
||||
<h3 class="heading">
|
||||
ARTISTS <span class="more" v-if="artists.length > 3">SEE ALL</span>
|
||||
</h3>
|
||||
<div class="grid">
|
||||
<div
|
||||
class="result-item result-item3"
|
||||
@ -46,7 +53,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "@vue/reactivity";
|
||||
export default {
|
||||
props: ["collapser"],
|
||||
setup() {
|
||||
const songs = [
|
||||
{
|
||||
@ -57,18 +66,6 @@ export default {
|
||||
title: "We are the world",
|
||||
artist: "Michael jackson",
|
||||
},
|
||||
{
|
||||
title: "Thriller",
|
||||
artist: "Michael jackson",
|
||||
},
|
||||
{
|
||||
title: "We are the world",
|
||||
artist: "Michael jackson",
|
||||
},
|
||||
{
|
||||
title: "We are the world",
|
||||
artist: "Michael jackson",
|
||||
},
|
||||
];
|
||||
|
||||
const albums = [
|
||||
@ -77,9 +74,11 @@ export default {
|
||||
"USA for Africa",
|
||||
];
|
||||
|
||||
const artists = ["Michael Jackson", "Jackson 5"]
|
||||
const artists = ["Michael Jackson", "Jackson 5"];
|
||||
|
||||
return { songs, albums, artists };
|
||||
const query = ref("");
|
||||
|
||||
return { songs, albums, artists, query };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -87,16 +86,15 @@ export default {
|
||||
<style>
|
||||
.right-search {
|
||||
position: relative;
|
||||
height: 30em;
|
||||
border-radius: 1em;
|
||||
margin: 0.5em 0 0 0;
|
||||
padding: 0.75em;
|
||||
background-color: rgba(32, 31, 31, 0.5);
|
||||
background-color: #131313b2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-search .scrollable {
|
||||
height: calc(100% - 4em);
|
||||
height: 26em;
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@ -117,6 +115,8 @@ export default {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0.5em;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.right-search .heading .more:hover {
|
||||
@ -126,15 +126,18 @@ export default {
|
||||
}
|
||||
.right-search input {
|
||||
width: 100%;
|
||||
border: 0.1em solid;
|
||||
border-radius: 0.5em;
|
||||
border: none;
|
||||
border-radius: .5em;
|
||||
padding-left: 1em;
|
||||
background-color: transparent;
|
||||
background-color: #4645456c;
|
||||
color: rgba(255, 255, 255, 0.479);
|
||||
font-size: 1em;
|
||||
line-height: 3em;
|
||||
outline: none;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.right-search input:focus {
|
||||
color: rgb(255, 255, 255);
|
||||
outline: 0.1em solid #fafafa52;
|
||||
}
|
||||
|
||||
.right-search input::-webkit-search-cancel-button {
|
||||
@ -143,10 +146,6 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-search input:focus {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
.right-search .tracks-results {
|
||||
|
||||
242
src/components/RightSideBar/UpNext.vue
Normal file
242
src/components/RightSideBar/UpNext.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="up-next">
|
||||
<p>COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span></p>
|
||||
<div class="main-item">
|
||||
<div class="album-art image"></div>
|
||||
<div class="tags">
|
||||
<p class="title">Hard to forget</p>
|
||||
<hr />
|
||||
<p class="artist">Sam hunt</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="all-items" v-if="collapsed && !another_is_open">
|
||||
<div class="scrollable">
|
||||
<div class="song-item" v-for="song in songs" :key="song">
|
||||
<div class="album-art image"></div>
|
||||
<div class="tags">
|
||||
<p class="title">{{ song.title }}</p>
|
||||
<hr />
|
||||
<p class="artist">{{ song.artist }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from '@vue/reactivity';
|
||||
export default {
|
||||
props: ["collapser"],
|
||||
emits: ['updateCollapser'],
|
||||
setup(props, context) {
|
||||
const songs = [
|
||||
{
|
||||
title: "Hard to forget",
|
||||
artist: "Sam Hunt",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
{
|
||||
title: "Bluebird",
|
||||
artist: "Miranda Lambert",
|
||||
},
|
||||
{
|
||||
title: "I called mama",
|
||||
artist: "Ken Chesseny",
|
||||
},
|
||||
];
|
||||
|
||||
const collapsed = ref(false)
|
||||
const another_is_open = ref(props.collapser)
|
||||
|
||||
let collapse = ()=> {
|
||||
collapsed.value = !collapsed.value;
|
||||
context.emit('updateCollapser')
|
||||
}
|
||||
|
||||
return { songs, collapsed, collapse, another_is_open };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.up-next {
|
||||
padding: 0.5em;
|
||||
margin-top: 1em;
|
||||
background-color: #131313b2;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.up-next > p {
|
||||
position: relative;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
color: #ffffffb2;
|
||||
margin: 0.5em 0 1em 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.up-next > p > span {
|
||||
position: absolute;
|
||||
right: 0.5em;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.up-next > p > span:hover {
|
||||
background: rgb(62, 69, 77);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.up-next .main-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.up-next .main-item:hover {
|
||||
background-color: #aa343441;
|
||||
}
|
||||
|
||||
.up-next .main-item .album-art {
|
||||
width: 4.5em;
|
||||
height: 4.5em;
|
||||
background-color: #ccc;
|
||||
margin: 0 0.5em 0 0;
|
||||
border-radius: 0.5em;
|
||||
background-image: url(../../assets/images/htf.jpeg);
|
||||
}
|
||||
|
||||
.up-next .main-item .tags hr {
|
||||
border: none;
|
||||
margin: 0.3em;
|
||||
}
|
||||
|
||||
.up-next .main-item .tags .title {
|
||||
width: 20em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.up-next .main-item .tags .artist {
|
||||
width: 20em;
|
||||
margin: 0;
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.61);
|
||||
}
|
||||
|
||||
.up-next .all-items {
|
||||
border-top: 1px solid var(--seperator);
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable {
|
||||
height: 20em;
|
||||
overflow-y: scroll;
|
||||
padding: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
background-color: rgba(2, 6, 14, 0.425);
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.up-next .all-items p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable .song-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable .song-item:hover {
|
||||
background-color: #3a39393d;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.up-next .all-items .scrollable .song-item hr {
|
||||
border: none;
|
||||
margin: 0.1em;
|
||||
}
|
||||
|
||||
.up-next .all-items .album-art {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
background-color: #ccc;
|
||||
margin: 0 0.5em 0 0;
|
||||
border-radius: 0.5em;
|
||||
background-image: url(../../assets/images/htf.jpeg);
|
||||
}
|
||||
|
||||
.up-next .all-items .song-item .artist {
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.637);
|
||||
}
|
||||
</style>
|
||||
@ -1,54 +1,53 @@
|
||||
const songs = [
|
||||
{
|
||||
title: "Loved by the best and if you don't fkn fsfsd",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams,", "Kenny Rogers"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams,", "Kenny Rogers"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
const songs = [{
|
||||
title: "Loved by the best and if you don't fkn fsfsd",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams,", "Kenny Rogers"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
{
|
||||
title: "Loved by the best",
|
||||
album: "Love songs",
|
||||
artists: ["Don Williams"],
|
||||
duration: "03:14",
|
||||
},
|
||||
// {
|
||||
// title: "Loved by the best",
|
||||
// album: "Love songs",
|
||||
// artists: ["Don Williams"],
|
||||
// duration: "03:14",
|
||||
// },
|
||||
// {
|
||||
// title: "Loved by the best",
|
||||
// album: "Love songs",
|
||||
// artists: ["Don Williams,", "Kenny Rogers"],
|
||||
// duration: "03:14",
|
||||
// },
|
||||
// {
|
||||
// title: "Loved by the best",
|
||||
// album: "Love songs",
|
||||
// artists: ["Don Williams"],
|
||||
// duration: "03:14",
|
||||
// },
|
||||
// {
|
||||
// title: "Loved by the best",
|
||||
// album: "Love songs",
|
||||
// artists: ["Don Williams"],
|
||||
// duration: "03:14",
|
||||
// },
|
||||
];
|
||||
|
||||
export default {
|
||||
songs
|
||||
songs
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user