mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-07 03:35:35 +00:00
add recommended tracks
This commit is contained in:
geoffrey45
parent
6ef31c4d82
commit
53b9ebdb60
37
src/App.vue
37
src/App.vue
@ -24,6 +24,7 @@
|
||||
<Search :collapser="collapser"/>
|
||||
<NowPlaying />
|
||||
<UpNext :collapser="collapser" @updateCollapser="updateCollapser"/>
|
||||
<RecommendedArtist/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -37,6 +38,7 @@ import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
|
||||
import Search from "./components/RightSideBar/Search.vue";
|
||||
import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
|
||||
import UpNext from "./components/RightSideBar/UpNext.vue";
|
||||
import RecommendedArtist from "./components/RightSideBar/Recommendation.vue"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -44,7 +46,8 @@ export default {
|
||||
PinnedStuff,
|
||||
Search,
|
||||
NowPlaying,
|
||||
UpNext
|
||||
UpNext,
|
||||
RecommendedArtist
|
||||
},
|
||||
setup() {
|
||||
const collapsed = ref(true);
|
||||
@ -68,9 +71,9 @@ export default {
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
height: 2em;
|
||||
width: 9em;
|
||||
margin-left: 2.25em;
|
||||
height: 2rem;
|
||||
width: 9rem;
|
||||
margin-left: 2.25rem;
|
||||
background: url(./assets/logo.svg);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@ -79,6 +82,7 @@ export default {
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.nav-container .in {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -89,11 +93,11 @@ export default {
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
height: 3.6em;
|
||||
margin-left: 1em;
|
||||
height: 3.6rem;
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.l-sidebar {
|
||||
@ -102,15 +106,15 @@ export default {
|
||||
|
||||
.l-container #toggle {
|
||||
position: fixed;
|
||||
top: 1em;
|
||||
width: 1.75em;
|
||||
height: 3.75em;
|
||||
top: 1rem;
|
||||
width: 1.75rem;
|
||||
height: 3.75rem;
|
||||
background: url(./assets/icons/menu.svg);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
margin-left: 0.25em;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.l-container #settings-button {
|
||||
@ -135,14 +139,11 @@ export default {
|
||||
}
|
||||
|
||||
.l-container #settings-button #settings-icon {
|
||||
margin-left: 1em;
|
||||
margin-right: 0.25em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-left: 1rem;
|
||||
margin-right: 0.25rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background-image: url(./assets/icons/settings.svg);
|
||||
/* background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center; */
|
||||
}
|
||||
|
||||
.collapsed #settings-button #settings-icon {
|
||||
|
||||
@ -8,8 +8,16 @@ body {
|
||||
background: #0d0e0e;
|
||||
color: #fff;
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
color: #ffffffb2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
@ -18,7 +26,7 @@ a {
|
||||
.seperator {
|
||||
border: 1px solid;
|
||||
color: transparent;
|
||||
margin: 0em;
|
||||
margin: 0rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
@ -27,8 +35,8 @@ a {
|
||||
|
||||
.l-container {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 4fr 30em;
|
||||
grid-template-rows: 4em 1fr 1fr;
|
||||
grid-template-columns: min-content 4fr 30rem;
|
||||
grid-template-rows: 4rem 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
|
||||
width: 100vw;
|
||||
@ -61,9 +69,9 @@ a {
|
||||
.l-sidebar {
|
||||
width: 250px;
|
||||
grid-area: l-sidebar;
|
||||
padding-top: 0.5em;
|
||||
margin: .5em 0 .5em .5em;
|
||||
border-radius: .5em;
|
||||
padding-top: 0.5rem;
|
||||
margin: .5rem 0 .5rem .5rem;
|
||||
border-radius: .5rem;
|
||||
background-color: #131313b2;
|
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
transition-duration: 0.3s;
|
||||
@ -84,16 +92,16 @@ a {
|
||||
|
||||
.content {
|
||||
grid-area: content;
|
||||
border-radius: .25em;
|
||||
padding: .5em;
|
||||
border-radius: .25rem;
|
||||
padding: .5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
grid-area: r-sidebar;
|
||||
border-radius: 5px;
|
||||
margin-right: .5em;
|
||||
overflow-y: scroll;
|
||||
margin-right: .5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
@ -115,7 +123,7 @@ a {
|
||||
/* width */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: .5em;
|
||||
width: .5rem;
|
||||
}
|
||||
|
||||
|
||||
@ -123,7 +131,7 @@ a {
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(51, 51, 51, 0.459);
|
||||
border-radius: 1em;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@ -131,7 +139,7 @@ a {
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: grey;
|
||||
border-radius: 1em;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -25,36 +25,36 @@ export default {
|
||||
|
||||
<style>
|
||||
.f-container {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 1rem;
|
||||
background: rgba(31, 30, 30, 0.521);
|
||||
padding: 1em;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#f-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-top: 1px solid var(--seperator);
|
||||
gap: 1em;
|
||||
padding-top: 1em;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.f-container p {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
color: rgba(255, 255, 255, 0.438);
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.f-container .f-item {
|
||||
min-width: 15em;
|
||||
min-height: 5em;
|
||||
min-width: 14.4rem;
|
||||
min-height: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-image: url(../../assets/icons/folder.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 1em;
|
||||
background-position: 1rem;
|
||||
background-size: 10% 100%;
|
||||
background-color: rgba(80, 80, 80, 0.247);
|
||||
}
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
|
||||
.f-container .f-item-text {
|
||||
position: absolute;
|
||||
left: 3em;
|
||||
left: 3rem;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -17,8 +17,8 @@ export default {};
|
||||
|
||||
<style>
|
||||
.folder-top {
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--seperator);
|
||||
}
|
||||
|
||||
@ -27,12 +27,12 @@ export default {};
|
||||
color: rgba(255, 255, 255, 0.438);
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-itrems: center;
|
||||
}
|
||||
|
||||
.folder-top .fsearch {
|
||||
width: 50%;
|
||||
margin-right: 1em;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.folder-top .fsearch div {
|
||||
@ -42,14 +42,14 @@ export default {};
|
||||
}
|
||||
|
||||
.folder-top .fsearch input {
|
||||
width: 30em;
|
||||
width: 30rem;
|
||||
border: none;
|
||||
border-radius: .5em;
|
||||
padding-left: 1em;
|
||||
border-radius: .5rem;
|
||||
padding-left: 1rem;
|
||||
background-color: #4645456c;
|
||||
color: rgba(255, 255, 255, 0.521);
|
||||
font-size: 1em;
|
||||
line-height: 3em;
|
||||
font-size: 1rem;
|
||||
line-height: 3rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -63,6 +63,6 @@ export default {};
|
||||
|
||||
.folder-top .fsearch input:focus {
|
||||
color: rgb(255, 255, 255);
|
||||
outline: 0.1em solid #fafafa52;
|
||||
outline: 0.1rem solid #fafafa52;
|
||||
}
|
||||
</style>
|
||||
@ -87,22 +87,22 @@ export default {
|
||||
}
|
||||
|
||||
.folder .table table td .album-art {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
margin-right: 1em;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-right: 1rem;
|
||||
background-color: #ccc;
|
||||
background-image: url(../../assets/images/Jim_Reeves.png);
|
||||
}
|
||||
|
||||
.folder .table .flex {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
align-itrems: center;
|
||||
}
|
||||
|
||||
.folder .table .flex > div > span {
|
||||
position: absolute;
|
||||
bottom: 1.5em;
|
||||
width: calc(100% - 6em);
|
||||
bottom: 1.5rem;
|
||||
width: calc(100% - 6rem);
|
||||
}
|
||||
|
||||
td,
|
||||
@ -124,12 +124,12 @@ th {
|
||||
}
|
||||
|
||||
.folder {
|
||||
padding-bottom: 1em;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
td .artist {
|
||||
color: #b1b1b1fd;
|
||||
font-weight: lighter;
|
||||
margin-right: 0.5em;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@ -104,7 +104,7 @@ export default {
|
||||
.side-nav-container .nav-button .nav-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 0.5em;
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
79
src/components/RightSideBar/Recommendation.vue
Normal file
79
src/components/RightSideBar/Recommendation.vue
Normal 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>
|
||||
@ -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>
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -34,21 +34,21 @@ export default {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: #131313b2;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-top: 5em;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
#f-view-parent .fixed {
|
||||
position: absolute;
|
||||
height: min-content;
|
||||
width: calc(100% - 2em);
|
||||
top: .5em;
|
||||
width: calc(100% - 2rem);
|
||||
top: .5rem;
|
||||
}
|
||||
|
||||
#scrollable {
|
||||
overflow-y: scroll;
|
||||
height: calc(100% - 5em);
|
||||
padding-right: 1em;
|
||||
height: calc(100% - 5rem);
|
||||
padding-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user