tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-07-19 08:00:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[client] refurbish playlist header

Browse Source
This commit is contained in:
geoffrey45 2022-03-30 14:55:24 +03:00
parent 05d81930a4
commit 3924a11c85
1 changed files with 39 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,33 @@
<template> <template>
<div class="p-header"> <div class="p-header">
<div class="info"> <div class="carddd circular">
<div> <div class="type">❤ Playlist</div>
<div class="title">{{ props.info.name }}</div> <div class="title ellip">{{ props.info.name }}</div>
<div class="metrics rounded border"> <div class="desc">
{{ props.info.count }} Tracks • {{ props.info.duration }} {{ props.info.desc[0] }}
</div> </div>
</div> <div class="duration rounded">4 Tracks • 3 Hours</div>
<div class="buttons"> <div class="btns">
<button class="play"> <PlayBtnRect />
<div class="icon"></div>
Play
</button>
<button class="menu">
<div class="icon"></div>
</button>
</div> </div>
</div> </div>
<div class="last-updated"> <div class="last-updated">
<span class="status">Last updated {{props.info.lastUpdated}} |&#160;</span> <span class="status"
>Last updated {{ props.info.lastUpdated }} |&#160;</span
>
<span class="edit">Edit</span> <span class="edit">Edit</span>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import PlayBtnRect from "../shared/PlayBtnRect.vue";
const props = defineProps<{ const props = defineProps<{
info: { info: {
name: string; name: string;
count: number; count: number;
duration: string; duration: string;
desc: string;
lastUpdated: string; lastUpdated: string;
}; };
}>(); }>();
@ -44,6 +42,7 @@ const props = defineProps<{
position: relative; position: relative;
margin-top: $small; margin-top: $small;
border-radius: 0.75rem; border-radius: 0.75rem;
color: $white;
.last-updated { .last-updated {
position: absolute; position: absolute;
@ -71,66 +70,45 @@ const props = defineProps<{
} }
} }
.info { .carddd {
position: absolute; position: absolute;
width: 25rem;
height: 10rem;
bottom: $small; bottom: $small;
left: $small; left: $small;
display: flex; width: 25rem;
flex-direction: row; padding: 1rem;
align-items: flex-end; background-color: rgba(5, 4, 4, 0.829);
padding: 1rem 1rem 4rem 1rem;
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
border-radius: 0.75rem;
background-color: $body;
@include phone-only { .type {
width: calc(100% - 1rem); color: rgba(255, 255, 255, 0.692);
} }
.title { .title {
font-size: 1.5rem; font-size: 2.5rem;
font-weight: bold; font-weight: 900;
color: $white;
} }
.metrics { .desc {
margin-top: $small; overflow: hidden;
color: $blue; text-overflow: ellipsis;
padding: $small; white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.buttons { .duration {
position: absolute; position: absolute;
right: 1rem;
bottom: 1rem; bottom: 1rem;
left: 1rem; font-size: 0.8rem;
display: flex; color: $white;
gap: $small; padding: $smaller;
border: solid 1px $gray1;
.play { user-select: none;
width: 5rem;
height: 2.5rem;
padding: 0.25rem $small;
.icon {
width: 1.5rem;
height: 1.5rem;
background-image: url("../../assets/icons/play.svg");
background-size: 1.5rem;
background-position: center;
margin-right: 0.25rem;
}
} }
.menu { .btns {
width: 2.5rem; margin-top: $small;
height: 2.5rem;
background-image: url("../../assets/icons/options.svg");
background-size: 2rem;
background-repeat: no-repeat;
background-position: center;
}
} }
} }
} }