tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-08 12:15:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

add options button to playlist view

Browse Source
This commit is contained in:
geoffrey45 2021-12-10 07:52:06 +03:00
parent 1e15a0c51d
commit a96b76748f
4 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/icons/options.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 18C9.10457 18 10 17.1046 10 16C10 14.8954 9.10457 14 8 14C6.89543 14 6 14.8954 6 16C6 17.1046 6.89543 18 8 18Z" fill="white"/>
<path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="white"/>
<path d="M24 18C25.1046 18 26 17.1046 26 16C26 14.8954 25.1046 14 24 14C22.8954 14 22 14.8954 22 16C22 17.1046 22.8954 18 24 18Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 532 B

15
src/components/PlaylistView/FeaturedArtists.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="f-artists"> <div class="f-artists">
<div class="artists" id="meeee"> <div class="artists" ref="artists_dom" v-on:mouseover="say">
<div class="artist c1"> <div class="artist c1">
<div class="blur"></div> <div class="blur"></div>
<div class="s2"></div> <div class="s2"></div>
@ -17,6 +17,8 @@
</div> </div>
</template> </template>
<script> <script>
import { ref } from '@vue/reactivity';
export default { export default {
setup() { setup() {
const artists = [ const artists = [
@ -37,8 +39,16 @@ export default {
"Kendrick Lamar", "Kendrick Lamar",
]; ];
const artists_dom = ref(null)
const say = () => {
}
return { return {
artists, artists,
artists_dom,
say
}; };
}, },
}; };
@ -52,6 +62,7 @@ export default {
background-color: #1f1e1d; background-color: #1f1e1d;
padding: $small; padding: $small;
border-radius: $small; border-radius: $small;
user-select: none;
} }
.f-artists .heading { .f-artists .heading {
@ -88,7 +99,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
scroll-snap-type: x mandatory; cursor: pointer;
} }
.f-artists .artist:hover { .f-artists .artist:hover {

21
src/components/PlaylistView/Header.vue
View File

@ -14,6 +14,7 @@
<hr /> <hr />
<div class="btns"> <div class="btns">
<div class="play s-item"><p>Play Now</p></div> <div class="play s-item"><p>Play Now</p></div>
<div class="options s-item image"></div>
</div> </div>
</div> </div>
<!-- --> <!-- -->
@ -107,6 +108,7 @@
.p-header .info .btns { .p-header .info .btns {
height: 2.5rem; height: 2.5rem;
display: flex;
} }
.p-header .info .btns .play { .p-header .info .btns .play {
@ -117,12 +119,29 @@
background-image: url(../../assets/icons/play.svg); background-image: url(../../assets/icons/play.svg);
} }
.p-header .info .btns .options {
width: 2.5rem;
height: 100%;
background-color: #0465a7;
border-radius: 50%;
background-image: url(../../assets/icons/options.svg);
background-size: 80%;
background-position: center;
border: none;
transition: all 0.5s ease;
}
.p-header .info .btns .options:hover {
transform: rotate(90deg);
transition: all 0.5s ease;
background-color: #2da8c7;
}
.p-header .info .albums { .p-header .info .albums {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5rem; grid-gap: 0.5rem;
// border: solid;
position: absolute; position: absolute;
bottom: -0.5em; bottom: -0.5em;
right: -1em; right: -1em;

2
src/views/FolderView.vue
View File

@ -48,7 +48,7 @@ export default {
#scrollable { #scrollable {
overflow-y: scroll; overflow-y: scroll;
height: calc(100% - 5rem); height: 100%;
padding-right: 1rem; padding-right: 1rem;
} }
</style> </style>