mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-07 03:35:35 +00:00
add album explorer
This commit is contained in:
geoffrey45
parent
0fa55eeeae
commit
aed2c74975
@ -36,9 +36,9 @@ a {
|
||||
}
|
||||
|
||||
.seperator {
|
||||
border: 1px solid;
|
||||
border-top: .1em $seperator solid;
|
||||
color: transparent;
|
||||
margin: 0rem;
|
||||
margin: $small 0 $small 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
@ -90,6 +90,14 @@ a {
|
||||
transition-property: width;
|
||||
}
|
||||
|
||||
.ellip {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 10px;
|
||||
}
|
||||
@ -132,7 +140,6 @@ a {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
144
src/components/AlbumsExplorer/TopAlbums.vue
Normal file
144
src/components/AlbumsExplorer/TopAlbums.vue
Normal file
@ -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>
|
||||
@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
|
||||
import Home from "../views/Home.vue";
|
||||
import FolderView from "../views/FolderView.vue";
|
||||
import PlaylistView from "../views/PlaylistView.vue";
|
||||
import AlbumsExplorer from "../views/AlbumsExplorer.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@ -18,6 +19,11 @@ const routes = [
|
||||
path: "/playlist",
|
||||
name: "PlaylistView",
|
||||
component: PlaylistView,
|
||||
},
|
||||
{
|
||||
path: "/albums",
|
||||
name: "AlbumsExplorer",
|
||||
component: AlbumsExplorer,
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
24
src/views/AlbumsExplorer.vue
Normal file
24
src/views/AlbumsExplorer.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="a-container">
|
||||
<TopAlbums />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopAlbums from "../components/AlbumsExplorer/TopAlbums.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TopAlbums,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.a-container {
|
||||
height: 100%;
|
||||
border-radius: $small;
|
||||
background-color: $card-dark;
|
||||
padding: $small;
|
||||
}
|
||||
</style>
|
||||
@ -29,13 +29,13 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
#f-view-parent {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: #131313b2;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-left: $small;
|
||||
padding-right: $small;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user