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

add all albums view

Browse Source
This commit is contained in:
geoffrey45
2021-12-11 13:46:05 +03:00
parent a7474d65e9
commit c7374e8eb5
8 changed files with 293 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AlbumsExplorer/AlbumList.vue
+155 -8
View File
@@ -1,19 +1,89 @@
<template>
<div class="albums-view rounded">
<div class="al-header rounded">
<div class="al-header">
<div class="heading">ALL ALBUMS</div>
<div class="search" >
<input type="search" placeholder="Search albums">
<div class="search">
<input type="search" placeholder="Search albums" />
</div>
</div>
<div class="all-albums">
<div class="item rounded" v-for="album in albums" :key="album">
<div class="play"></div>
<div class="album-art image rounded"></div>
<div class="name ellip">{{album.title}}</div>
<div class="artist ellip">{{album.artist}}</div>
</div>
</div>
<div class="all-albums"></div>
</div>
</template>
<script>
export default {
setup() {
const albums = [
{
title: "Album 2 af sjf s d kjf saf ",
artist: "Artist ad asd f adf d da df d adf ds d fadsf fs dfds sf dadf d",
},
{
title: "Album 3",
artist: "Artist 3",
},{
title: "Album 1",
artist: "Artist 1",
},
{
title: "Album 2",
artist: "Artist 2",
},
{
title: "Album 3",
artist: "Artist 3",
},{
title: "Album 1",
artist: "Artist 1",
},
{
title: "Album 2",
artist: "Artist 2",
},
{
title: "Album 3",
artist: "Artist 3",
},{
title: "Album 1",
artist: "Artist 1",
},
{
title: "Album 2",
artist: "Artist 2",
},
{
title: "Album 3",
artist: "Artist 3",
},{
title: "Album 1",
artist: "Artist 1",
},
{
title: "Album 2",
artist: "Artist 2",
},
{
title: "Album 3",
artist: "Artist 3",
},{
title: "Album 1",
artist: "Artist 1",
},
{
title: "Album 2",
artist: "Artist 2",
},
{
title: "Album 3",
artist: "Artist 3",
},{
title: "Album 1",
artist: "Artist 1",
},
@@ -36,24 +106,101 @@ export default {
<style lang="scss">
.albums-view {
height: calc(100% - 13rem);
height: calc(100% - 14.5rem);
padding: $small;
margin-top: $small;
overflow: hidden;
background-color: $card-dark;
.all-albums {
height: calc(100% - 4rem);
border-top: 1px solid $separator;
padding: $small 0 0 0;
overflow-y: auto;
.item {
position: relative;
width: 10.9rem;
height: 13rem;
padding: $small 0.95rem $small 0.95rem;
margin: $smaller;
transition: all 0.2s ease-in-out;
cursor: pointer;
float: left;
.play {
position: absolute;
bottom: 3rem;
left: $small;
height: 3rem;
width: 3rem;
background: url(../../assets/icons/play.svg) no-repeat center;
background-size: 60%;
cursor: pointer;
opacity: 0;
transition: all 0.5s ease-in-out;
}
&:hover {
background-color: rgb(87, 74, 74);
.play {
transition: 0.5s all ease;
opacity: 1;
}
}
.album-art {
height: 9em;
width: 9em;
background-image: url(../../assets/images/girl1.jpg);
}
.name {
text-align: left;
font-weight: bold;
margin-top: $small;
}
.artist {
font-size: small;
font-weight: lighter;
text-align: left;
}
}
}
.al-header {
display: flex;
align-items: center;
position: relative;
background-color: rgb(48, 43, 43);
// border: solid;
height: 4em;
// padding: $small;
padding: 0 $small 0 $small;
.search {
position: absolute;
right: 0;
padding-right: $small;
input {
width: 30rem;
border: none;
border-radius: 2rem;
padding-left: 1rem;
background-color: #4645456c;
color: rgba(255, 255, 255, 0.521);
font-size: 1rem;
line-height: 3rem;
outline: none;
}
input::-webkit-search-cancel-button {
position: relative;
right: 20px;
cursor: pointer;
width: 50px;
height: 50px;
}
}
}
}
src/components/AlbumsExplorer/TopAlbums.vue
+31 -8
View File
@@ -48,13 +48,13 @@ export default {
<style lang="scss">
.top-albums {
height: 12.5rem;
height: 14rem;
border-radius: $small;
background-color: rgb(44, 42, 42);
background-color: $card-dark;
padding: $small;
.heading {
margin: 0 0 $small;
margin: $small 0 1.5em $small;
}
.items {
@@ -73,10 +73,14 @@ export default {
cursor: pointer;
transition: all 0.2s ease-in-out;
&:hover {
transform: translateY(-.5em);
}
.image {
height: 7rem;
width: 7rem;
background-image: url(../../assets/images/tk.jpg);
background-image: url(../../assets/images/girl1.jpg);
border-radius: $small;
}
@@ -91,7 +95,7 @@ export default {
.info .top {
height: 2.5rem;
background-color: rgb(20, 46, 129);
background-color: rgb(51, 129, 20);
border-radius: $small;
margin-left: auto;
display: grid;
@@ -102,8 +106,8 @@ export default {
.play-icon {
margin: 0 0 0 $small;
height: 1.5rem;
width: 1.5rem;
height: 1.2rem;
width: 1.2rem;
background-image: url(../../assets/icons/play.svg);
background-size: contain;
background-repeat: no-repeat;
@@ -116,7 +120,7 @@ export default {
}
&:hover {
background-color: rgb(31, 68, 150);
background-color: rgb(0, 134, 89);
transition: all 0.2s ease-in-out;
.play-icon {
@@ -130,6 +134,25 @@ export default {
transition: all 0.1s ease-in-out;
}
}
&:first-child {
background-color: rgb(177, 116, 2);
.image {
background-image: url(../../assets/images/girl2.jpg);
}
}
&:nth-child(2){
background-color: rgb(0, 74, 117);
.image {
background-image: url(../../assets/images/girl3.jpg);
}
}
&:nth-child(3){
background-color: rgb(161, 106, 106);
}
}
}
}