mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 20:43:04 +00:00
add coming up next & now playing cards
This commit is contained in:
geoffrey45
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user