MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style(front): Queue track details links

This commit is contained in:
ArneBo 2025-02-05 20:20:49 +01:00
parent 8766bac14f
commit f109ae0c53
2 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
front/src/components/Queue.vue
View File

@ -23,6 +23,8 @@ import VirtualList from '~/components/vui/list/VirtualList.vue'
import QueueItem from '~/components/QueueItem.vue'
import Button from '~/components/ui/Button.vue'
import Link from '~/components/ui/Link.vue'
import Pill from '~/components/ui/Pill.vue'
const MilkDrop = defineAsyncComponent(() => import('~/components/audio/visualizer/MilkDrop.vue'))
@ -274,41 +276,42 @@ if (!isWebGLSupported) {
</div>
</div>
<h1 class="ui header">
<div class="content ellipsis">
<router-link
class="small header discrete link track"
:to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}"
>
{{ currentTrack.title }}
</router-link>
<div class="sub header ellipsis">
<span>
<template
v-for="ac in currentTrack.artistCredit"
:key="ac.artist.id"
>
<router-link
class="discrete link"
:to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
@click.stop.prevent=""
>
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
</router-link>
<span>{{ ac.joinphrase }}</span>
</template>
</span>
<template v-if="currentTrack.albumId !== -1">
<span class="middle slash symbol" />
<router-link
class="discrete link album"
:to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
>
{{ currentTrack.albumTitle ?? t('components.Queue.meta.unknownAlbum') }}
</router-link>
</template>
</div>
</div>
<Link
class="track"
:to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}"
>
{{ currentTrack.title }}
</Link>
</h1>
<h2>
<template v-if="currentTrack.albumId !== -1">
<Link
class="album"
:to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
>
{{ currentTrack.albumTitle ?? t('components.Queue.meta.unknownAlbum') }}
</Link>
</template>
</h2>
<span>
<template
v-for="ac in currentTrack.artistCredit"
:key="ac.artist.id"
>
<router-link
:to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
@click.stop.prevent=""
>
<Pill>
<template #image v-if="ac.artist.attachment_cover">
<img v-lazy="ac.artist.attachment_cover?.urls.medium_square_crop">
</template>
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
</Pill>
</router-link>
<span>{{ ac.joinphrase }}</span>
</template>
</span>
<div
v-if="currentTrack && errored"
class="ui small warning message"

16
front/src/style/components/_queue.scss
View File

@ -315,6 +315,21 @@
max-width: 90%;
}
h1 {
margin-bottom: 0px;
a.track {
font-size: 24px;
font-weight: 600;
}
}
h2 {
margin-top: 0px;
margin-bottom: 10px;
a {
font-size: 16px;
}
}
.cover-container {
width: 50vh;
max-width: 90%;
@ -345,6 +360,7 @@
img {
object-fit: contain;
object-position: center;
box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
}
&:hover .cover-buttons {