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

add hover state to playlist card

Browse Source
This commit is contained in:
geoffrey45
2022-09-02 23:15:35 +03:00
parent 2dd4d58574
commit 7c575be4bc
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlaylistsList/PlaylistCard.vue
+7 -4
View File
@@ -5,7 +5,7 @@
class="p-card rounded noscroll" class="p-card rounded noscroll"
> >
<img :src="imguri + props.playlist.thumb" /> <img :src="imguri + props.playlist.thumb" />
<div class="overlay pad-lg"> <div class="overlay rounded pad-lg">
<div class="p-name ellip">{{ playlist.name }}</div> <div class="p-name ellip">{{ playlist.name }}</div>
<div class="p-count"> <div class="p-count">
{{ playlist.count + ` ${playlist.count == 1 ? "Track" : "Tracks"}` }} {{ playlist.count + ` ${playlist.count == 1 ? "Track" : "Tracks"}` }}
@@ -38,7 +38,7 @@ const props = defineProps<{
height: 100%; height: 100%;
aspect-ratio: 1/1.2; aspect-ratio: 1/1.2;
object-fit: cover; object-fit: cover;
border-radius: $medium; transition: all 0.25s ease;
} }
.overlay { .overlay {
@@ -46,7 +46,7 @@ const props = defineProps<{
top: 0; top: 0;
background-image: linear-gradient( background-image: linear-gradient(
to top, to top,
rgba(0, 0, 0, 0.753), rgba(0, 0, 0, 0.55),
transparent 60% transparent 60%
); );
height: 100%; height: 100%;
@@ -54,6 +54,7 @@ const props = defineProps<{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
transition: all 0.25s ease;
.p-count { .p-count {
opacity: 0.75; opacity: 0.75;
@@ -62,7 +63,9 @@ const props = defineProps<{
} }
&:hover { &:hover {
background-color: $darkestblue; img {
transform: scale(1.1);
}
} }
.bottom { .bottom {
src/stores/queue.ts
+4 -2
View File
@@ -208,9 +208,11 @@ export default defineStore("Queue", {
this.tracklist = shuffled; this.tracklist = shuffled;
this.currentindex = 0; this.currentindex = 0;
this.play(this.currentindex);
this.currentid = shuffled[0].trackid; this.currentid = shuffled[0].trackid;
if (this.playing) {
this.play(this.currentindex);
}
}, },
removeFromQueue(index: number = 0) { removeFromQueue(index: number = 0) {
this.tracklist.splice(index, 1); this.tracklist.splice(index, 1);