mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 04:23:01 +00:00
add album explorer
This commit is contained in:
geoffrey45
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="top-albums">
|
||||
<h3 class="heading">TOP ALBUMS</h3>
|
||||
<div class="items">
|
||||
<div class="item rounded" v-for="album in albums" :key="album">
|
||||
<div class="image rounded"></div>
|
||||
<div class="info">
|
||||
<div class="name ellip">{{ album.title }}</div>
|
||||
<div class="artist ellip">{{ album.artist }}</div>
|
||||
<div class="seperator"></div>
|
||||
<div class="top">
|
||||
<div class="play-icon"></div>
|
||||
<div class="text ellip">{{ album.top_track }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
const albums = [
|
||||
{
|
||||
title: "Thriller",
|
||||
artist: "Michael Jackson, Sting, Shaggy, Juice WRLD",
|
||||
top_track: "Beat It and althought you whatever",
|
||||
},
|
||||
{
|
||||
title: "Figting Demons",
|
||||
artist: "Juice WRLD",
|
||||
top_track: "Girl Of My Dreams",
|
||||
},
|
||||
{
|
||||
title: "Crybaby",
|
||||
artist: "Lil Peep",
|
||||
top_track: "Lil kennedy",
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
albums,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.top-albums {
|
||||
height: 13rem;
|
||||
border-radius: $small;
|
||||
// background: linear-gradient(to bottom right, #5a1c11 60%, #110000);
|
||||
background-color: rgb(12, 1, 1);
|
||||
padding: $small;
|
||||
|
||||
.heading {
|
||||
margin: 0 0 $small;
|
||||
}
|
||||
|
||||
.items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: $small;
|
||||
|
||||
.item {
|
||||
height: 10rem;
|
||||
width: 100%;
|
||||
background-color: rgb(122, 72, 5);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 7.5rem 1fr;
|
||||
padding: $small;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(214, 80, 39, 0.76);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
background-image: url(../../assets/images/tk.jpg);
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.info .name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info .artist {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.info .top {
|
||||
height: 2.5rem;
|
||||
background-color: rgb(53, 12, 12);
|
||||
border-radius: $small;
|
||||
margin-left: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
user-select: none;
|
||||
|
||||
|
||||
|
||||
.play-icon {
|
||||
margin: 0 0 0 $small;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
background-image: url(../../assets/icons/play.svg);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(112, 29, 29);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.play-icon {
|
||||
transform: scale(1.2);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -27,7 +27,7 @@ export default {};
|
||||
color: rgba(255, 255, 255, 0.438);
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-itrems: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-top .fsearch {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<router-link :to="{ name: 'AlbumsExplorer' }">
|
||||
<div class="nav-button" id="album-button">
|
||||
<div class="in">
|
||||
<div class="nav-icon image" id="album-icon"></div>
|
||||
|
||||
@@ -153,10 +153,10 @@ export default {
|
||||
align-items: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.f-artists .artists::-webkit-scrollbar {
|
||||
display: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.f-artists .artist {
|
||||
@@ -174,23 +174,29 @@ export default {
|
||||
justify-content: center;
|
||||
transition: all 0.5s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.f-artists .artist:hover {
|
||||
transform: translateY(-1em);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.artist-image {
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
margin-left: 0.5em;
|
||||
border-radius: 50%;
|
||||
margin-bottom: $small;
|
||||
background: url(../../assets/images/girl1.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.f-artists .artist-image {
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
margin-left: 0.5em;
|
||||
border-radius: 50%;
|
||||
margin-bottom: $small;
|
||||
background: url(../../assets/images/girl1.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.artist-name {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
width: 10em;
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-1em);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.f-artists .c1 {
|
||||
@@ -200,51 +206,44 @@ export default {
|
||||
background-image: url(../../assets/images/gradient1.gif);
|
||||
overflow: hidden;
|
||||
margin-left: -0.1rem;
|
||||
}
|
||||
|
||||
.c1:hover > .s2 {
|
||||
background: rgba(53, 53, 146, 0.8);
|
||||
transition: all 0.5s ease;
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
}
|
||||
&:hover > .s2 {
|
||||
background: rgba(53, 53, 146, 0.8);
|
||||
transition: all 0.5s ease;
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
.f-artists .c1 p {
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
margin-left: 0.5rem;
|
||||
z-index: 1;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
p {
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
margin-left: 0.5rem;
|
||||
z-index: 1;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.f-artists .artist-name {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
width: 10em;
|
||||
}
|
||||
.blur {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(100px);
|
||||
-webkit-backdrop-filter: blur(100px);
|
||||
-moz-backdrop-filter: blur(100px);
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.f-artists .blur {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(100px);
|
||||
-webkit-backdrop-filter: blur(100px);
|
||||
-moz-backdrop-filter: blur(100px);
|
||||
border-radius: $small;
|
||||
}
|
||||
|
||||
.f-artists .s2 {
|
||||
position: absolute;
|
||||
left: -2em;
|
||||
bottom: -4em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background: rgba(53, 53, 146, 0.445);
|
||||
border-radius: 50%;
|
||||
transition: all 0.5s ease;
|
||||
.s2 {
|
||||
position: absolute;
|
||||
left: -2em;
|
||||
bottom: -4em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background: rgba(53, 53, 146, 0.445);
|
||||
border-radius: 50%;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user