MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-02-23 19:42:31 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Simplify the display of lists

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-01-01 21:28:30 +01:00
parent 0e3490e589
commit 44896d82f4
5 changed files with 72 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web-src/src/components/ListAlbums.vue
View File

@ -20,18 +20,16 @@
class="media-left fd-has-shadow fd-cover fd-cover-small-image" class="media-left fd-has-shadow fd-cover fd-cover-small-image"
/> />
<div class="media-content"> <div class="media-content">
<div class="content is-small"> <div class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
<div class="is-size-6 has-text-weight-bold" v-text="item.item.name" /> <div
<div class="is-size-7 has-text-grey has-text-weight-bold"
class="has-text-grey has-text-weight-bold" v-text="item.item.artist"
v-text="item.item.artist" />
/> <div
<div v-if="item.item.date_released && item.item.media_kind === 'music'"
v-if="item.item.date_released && item.item.media_kind === 'music'" class="is-size-7 has-text-grey"
class="has-text-grey" v-text="$filters.date(item.item.date_released)"
v-text="$filters.date(item.item.date_released)" />
/>
</div>
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)"> <a @click.prevent.stop="open_dialog(item.item)">

20
web-src/src/components/ListAlbumsSpotify.vue
View File

@ -16,17 +16,15 @@
/> />
</div> </div>
<div class="media-content"> <div class="media-content">
<div class="content is-small"> <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
<div class="is-size-6 has-text-weight-bold" v-text="item.name" /> <div
<div class="is-size-7 has-text-weight-bold has-text-grey"
class="has-text-weight-bold has-text-grey" v-text="item.artists[0]?.name"
v-text="item.artists[0]?.name" />
/> <div
<div class="is-size-7 has-text-grey"
class="has-text-grey" v-text="$filters.date(item.release_date)"
v-text="$filters.date(item.release_date)" />
/>
</div>
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item)"> <a @click.prevent.stop="open_dialog(item)">

19
web-src/src/components/ListPlaylistsSpotify.vue
View File

@ -1,14 +1,15 @@
<template> <template>
<template v-for="item in items" :key="item.id"> <template v-for="item in items" :key="item.id">
<div class="media is-align-items-center mb-0"> <div
<div class="media-content is-clickable" @click="open(item)"> class="media is-align-items-center is-clickable mb-0"
<div class="content is-small"> @click="open(item)"
<div class="is-size-6 has-text-weight-bold" v-text="item.name" /> >
<div <div class="media-content">
class="has-text-weight-bold has-text-grey" <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
v-text="item.owner.display_name" <div
/> class="is-size-7 has-text-weight-bold has-text-grey"
</div> v-text="item.owner.display_name"
/>
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item)"> <a @click.prevent.stop="open_dialog(item)">

40
web-src/src/components/ListTracks.vue
View File

@ -15,27 +15,25 @@
> >
<mdicon v-if="show_icon" class="media-left icon" name="file-outline" /> <mdicon v-if="show_icon" class="media-left icon" name="file-outline" />
<div class="media-content"> <div class="media-content">
<div class="content is-small"> <div
<div class="is-size-6 has-text-weight-bold"
class="is-size-6 has-text-weight-bold" :class="{
:class="{ 'has-text-grey':
'has-text-grey': item.item.media_kind === 'podcast' && item.item.play_count > 0
item.item.media_kind === 'podcast' && item.item.play_count > 0 }"
}" v-text="item.item.title"
v-text="item.item.title" />
/> <div
<div class="is-size-7 has-text-weight-bold has-text-grey"
class="has-text-weight-bold has-text-grey" v-text="item.item.artist"
v-text="item.item.artist" />
/> <div class="is-size-7 has-text-grey" v-text="item.item.album" />
<div class="has-text-grey" v-text="item.item.album" /> <progress
<progress v-if="show_progress && item.item.seek_ms > 0"
v-if="show_progress && item.item.seek_ms > 0" class="progress is-info"
class="progress is-info" :max="item.item.length_ms"
:max="item.item.length_ms" :value="item.item.seek_ms"
:value="item.item.seek_ms" />
/>
</div>
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)"> <a @click.prevent.stop="open_dialog(item.item)">

50
web-src/src/components/ListTracksSpotify.vue
View File

@ -9,32 +9,30 @@
}" }"
@click="play(item)" @click="play(item)"
> >
<div class="content is-small"> <div
<div class="is-size-6 has-text-weight-bold"
class="is-size-6 has-text-weight-bold" :class="{ 'has-text-grey-light': !item.is_playable }"
:class="{ 'has-text-grey-light': !item.is_playable }" v-text="item.name"
v-text="item.name" />
/> <div
<div class="is-size-7 has-text-weight-bold"
class="has-text-weight-bold" :class="{
:class="{ 'has-text-grey': item.is_playable,
'has-text-grey': item.is_playable, 'has-text-grey-light': !item.is_playable
'has-text-grey-light': !item.is_playable }"
}" v-text="item.artists[0].name"
v-text="item.artists[0].name" />
/> <div class="is-size-7 has-text-grey" v-text="item.album.name" />
<div class="has-text-grey" v-text="item.album.name" /> <div v-if="!item.is_playable" class="is-size-7 has-text-grey">
<div v-if="!item.is_playable" class="has-text-grey"> (<span v-text="$t('list.spotify.not-playable-track')" />
(<span v-text="$t('list.spotify.not-playable-track')" /> <span
<span v-if="item.restrictions?.reason"
v-if="item.restrictions?.reason" v-text="
v-text=" $t('list.spotify.restriction-reason', {
$t('list.spotify.restriction-reason', { reason: item.restrictions.reason
reason: item.restrictions.reason })
}) "
" />)
/>)
</div>
</div> </div>
</div> </div>
<div class="media-right"> <div class="media-right">