TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 04:23:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add recommended tracks

Browse Source
This commit is contained in:
geoffrey45
2021-12-01 11:11:53 +03:00
parent 6ef31c4d82
commit 53b9ebdb60
11 changed files with 243 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RightSideBar/NowPlaying.vue
+13 -13
View File
@@ -22,10 +22,10 @@ export default {};
<style>
.now-playing {
height: 5em;
border-radius: 0.5em;
margin-top: 1em;
padding: 0.5em;
height: 5rem;
border-radius: 0.5rem;
margin-top: 1rem;
padding: 0.5rem;
background-color: #131313b2;
display: grid;
@@ -38,21 +38,21 @@ export default {};
}
.now-playing .art-tags .album-art {
width: 4.5em;
height: 4.5em;
border-radius: 0.5em;
margin-right: 0.5em;
width: 4.5rem;
height: 4.5rem;
border-radius: 0.5rem;
margin-right: 0.5rem;
background-color: #ad1717a8;
background-image: url(../../assets/images/tk.jpg);
}
.now-playing .art-tags hr {
border: none;
margin: 0.3em;
margin: 0.3rem;
}
.now-playing .art-tags #title {
margin: 0;
width: 14em;
width: 14rem;
color: #fff;
}
@@ -69,11 +69,11 @@ export default {};
}
.now-playing .controls * {
height: 3em;
width: 3em;
height: 3rem;
width: 3rem;
background-size: 50%;
cursor: pointer;
border-radius: 0.5em;
border-radius: 0.5rem;
}
.now-playing .controls *:hover {
src/components/RightSideBar/Recommendation.vue
+79
View File
@@ -0,0 +1,79 @@
<template>
<div class="r-tracks rounded">
<p class="heading">RECOMMENDED TRACKS</p>
<div class="tracks">
<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>
</template>
<script>
export default {
setup() {
const songs = [
{
title: "Mockingbird",
artist: "Eminem",
},
{
title: "Slim shady",
artist: "Eminem"
}
];
return { songs };
},
};
</script>
<style>
.r-tracks {
margin-top: .5rem;
background-color: #131313b2;
padding: .5rem;
}
.r-tracks .tracks .song-item {
display: flex;
align-items: center;
padding: 0.5rem;
border-radius: 0.5rem;
}
.r-tracks .tracks .song-item:hover {
background-color: #3a39393d;
cursor: pointer;
}
.r-tracks .tracks .song-item hr {
border: none;
margin: 0.1rem;
}
.r-tracks .tracks .song-item .album-art {
width: 3rem;
height: 3rem;
background-color: #ccc;
margin: 0 0.5rem 0 0;
border-radius: 0.5rem;
background-image: url(../../assets/images/Jim_Reeves.png);
}
.r-tracks .tracks .song-item .artist {
font-size: small;
color: rgba(255, 255, 255, 0.637);
margin: 0;
}
.r-tracks .tracks .song-item .title {
margin: 0;
}
</style>
src/components/RightSideBar/Search.vue
+36 -36
View File
@@ -86,15 +86,15 @@ export default {
<style>
.right-search {
position: relative;
border-radius: 1em;
margin: 0.5em 0 0 0;
padding: 0.75em;
border-radius: 1rem;
margin: 0.5rem 0 0 0;
padding: 0.75rem;
background-color: #131313b2;
overflow: hidden;
}
.right-search .scrollable {
height: 26em;
height: 26rem;
overflow-y: scroll;
scroll-behavior: smooth;
}
@@ -106,61 +106,61 @@ export default {
.right-search .heading {
font-size: small;
position: relative;
padding: 1em;
padding: 1rem;
display: flex;
align-items: center;
}
.right-search .heading .more {
position: absolute;
right: 1em;
padding: 0.5em;
right: 1rem;
padding: 0.5rem;
user-select: none;
}
.right-search .heading .more:hover {
background: rgb(62, 69, 77);
border-radius: 0.5em;
border-radius: 0.5rem;
cursor: pointer;
}
.right-search input {
width: 100%;
border: none;
border-radius: .5em;
padding-left: 1em;
border-radius: .5rem;
padding-left: 1rem;
background-color: #4645456c;
color: rgba(255, 255, 255, 0.479);
font-size: 1em;
line-height: 3em;
font-size: 1rem;
line-height: 3rem;
outline: none;
}
.right-search input:focus {
color: rgb(255, 255, 255);
outline: 0.1em solid #fafafa52;
outline: 0.1rem solid #fafafa52;
}
.right-search input::-webkit-search-cancel-button {
position: relative;
right: 1em;
right: 1rem;
cursor: pointer;
}
/* */
.right-search .tracks-results {
border-radius: 0.5em;
border-radius: 0.5rem;
overflow: hidden;
}
.right-search .tracks-results .heading {
padding: 0.5em;
padding: 0.5rem;
}
.right-search .tracks-results .result-item {
display: flex;
align-items: center;
height: 4.5em;
height: 4.5rem;
background-color: rgba(20, 20, 20, 0.733);
}
@@ -168,16 +168,16 @@ export default {
background-color: rgba(27, 26, 27, 0.589);
}
.right-search .tracks-results .result-item .album-art {
width: 4em;
height: 4em;
width: 4rem;
height: 4rem;
background-color: rgb(27, 150, 74);
border-radius: 0.5em;
margin: 0 0.5em 0 0.25em;
border-radius: 0.5rem;
margin: 0 0.5rem 0 0.25rem;
background-image: url(../../assets/images/thriller.jpg);
}
.right-search hr {
margin: 0.1em;
margin: 0.1rem;
border: none;
}
@@ -188,9 +188,9 @@ export default {
/* */
.right-search .albums-results {
border-radius: 0.5em;
border-radius: 0.5rem;
background-color: rgba(8, 3, 1, 0.274);
margin-top: 1em;
margin-top: 1rem;
}
.right-search .albums-results .grid {
@@ -205,24 +205,24 @@ export default {
}
.right-search .albums-results .result-item .album-art {
height: 7em;
width: 7em;
height: 7rem;
width: 7rem;
background-color: rgba(26, 26, 26, 0.452);
border-radius: 0.5em;
margin-bottom: 0.5em;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
background-image: url(../../assets/images/thriller.jpg);
}
.right-search .albums-results .result-item .title {
width: 7em;
width: 7rem;
text-align: center;
margin-bottom: 0.5em;
margin-bottom: 0.5rem;
}
/* */
.right-search .artists-results {
border-radius: 0.5em;
border-radius: 0.5rem;
background-color: rgba(8, 3, 1, 0.274);
}
@@ -232,11 +232,11 @@ export default {
}
.right-search .artists-results .result-item .image {
height: 7em;
width: 7em;
height: 7rem;
width: 7rem;
border-radius: 50%;
background-color: rgba(16, 65, 14, 0.356);
margin-bottom: 0.5em;
margin-bottom: 0.5rem;
background-image: url(../../assets/icons/logo-small.svg);
background-size: 50%;
background-image: url(../../assets/images/thriller.jpg);
@@ -244,8 +244,8 @@ export default {
}
.right-search .artists-results .result-item .name {
width: 7em;
width: 7rem;
text-align: center;
margin-bottom: 0.5em;
margin-bottom: 0.5rem;
}
</style>
src/components/RightSideBar/UpNext.vue
+40 -43
View File
@@ -1,6 +1,8 @@
<template>
<div class="up-next">
<p>COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span></p>
<p class="heading">
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">
@@ -25,10 +27,10 @@
</template>
<script>
import { ref } from '@vue/reactivity';
import { ref } from "@vue/reactivity";
export default {
props: ["collapser"],
emits: ['updateCollapser'],
emits: ["updateCollapser"],
setup(props, context) {
const songs = [
{
@@ -109,13 +111,13 @@ export default {
},
];
const collapsed = ref(false)
const another_is_open = ref(props.collapser)
const collapsed = ref(false);
const another_is_open = ref(props.collapser);
let collapse = ()=> {
let collapse = () => {
collapsed.value = !collapsed.value;
context.emit('updateCollapser')
}
context.emit("updateCollapser");
};
return { songs, collapsed, collapse, another_is_open };
},
@@ -124,27 +126,22 @@ export default {
<style>
.up-next {
padding: 0.5em;
margin-top: 1em;
padding: 0.5rem;
margin-top: 1rem;
background-color: #131313b2;
border-radius: 0.5em;
border-radius: 0.5rem;
}
.up-next > p {
.up-next .heading {
position: relative;
font-size: small;
font-weight: bold;
color: #ffffffb2;
margin: 0.5em 0 1em 1em;
display: flex;
align-items: center;
margin: 0.5rem 0 1rem 0rem;
}
.up-next > p > span {
position: absolute;
right: 0.5em;
padding: 0.5em;
border-radius: 0.5em;
right: 0.5rem;
padding: 0.5rem;
border-radius: 0.5rem;
user-select: none;
}
@@ -156,37 +153,37 @@ export default {
.up-next .main-item {
display: flex;
align-items: center;
padding: 0.5em;
border-radius: 0.5em;
padding: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
margin-bottom: 0.5em;
margin-bottom: 0.5rem;
}
.up-next .main-item:hover {
background-color: #aa343441;
background-color: #3a39393d;
}
.up-next .main-item .album-art {
width: 4.5em;
height: 4.5em;
width: 4.5rem;
height: 4.5rem;
background-color: #ccc;
margin: 0 0.5em 0 0;
border-radius: 0.5em;
margin: 0 0.5rem 0 0;
border-radius: 0.5rem;
background-image: url(../../assets/images/htf.jpeg);
}
.up-next .main-item .tags hr {
border: none;
margin: 0.3em;
margin: 0.3rem;
}
.up-next .main-item .tags .title {
width: 20em;
width: 20rem;
margin: 0;
}
.up-next .main-item .tags .artist {
width: 20em;
width: 20rem;
margin: 0;
font-size: small;
color: rgba(255, 255, 255, 0.61);
@@ -197,12 +194,12 @@ export default {
}
.up-next .all-items .scrollable {
height: 20em;
height: 20rem;
overflow-y: scroll;
padding: 0.5em;
margin-top: 0.5em;
padding: 0.5rem;
margin-top: 0.5rem;
background-color: rgba(2, 6, 14, 0.425);
border-radius: 0.5em;
border-radius: 0.5rem;
}
.up-next .all-items p {
@@ -212,8 +209,8 @@ export default {
.up-next .all-items .scrollable .song-item {
display: flex;
align-items: center;
padding: 0.5em;
border-radius: 0.5em;
padding: 0.5rem;
border-radius: 0.5rem;
}
.up-next .all-items .scrollable .song-item:hover {
@@ -223,15 +220,15 @@ export default {
.up-next .all-items .scrollable .song-item hr {
border: none;
margin: 0.1em;
margin: 0.1rem;
}
.up-next .all-items .album-art {
width: 3em;
height: 3em;
width: 3rem;
height: 3rem;
background-color: #ccc;
margin: 0 0.5em 0 0;
border-radius: 0.5em;
margin: 0 0.5rem 0 0;
border-radius: 0.5rem;
background-image: url(../../assets/images/htf.jpeg);
}