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

[web] Remove the non-standard heading class

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-01-01 21:13:48 +01:00
parent a415e619af
commit 0e3490e589
41 changed files with 720 additions and 622 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web-src/src/components/ControlMainVolume.vue
View File

@ -6,7 +6,7 @@
</a>
</div>
<div class="media-content">
<p class="heading" v-text="$t('navigation.volume')" />
<div class="is-size-7 is-uppercase" v-text="$t('navigation.volume')" />
<control-slider
v-model:value="player.volume"
:cursor="cursor"

4
web-src/src/components/ControlOutputVolume.vue
View File

@ -10,8 +10,8 @@
</a>
</div>
<div class="media-content">
<p
class="heading"
<div
class="is-size-7 is-uppercase"
:class="{ 'has-text-grey-light': !output.selected }"
v-text="output.name"
/>

4
web-src/src/components/ControlStreamVolume.vue
View File

@ -17,8 +17,8 @@
class="is-flex is-align-content-center"
:class="{ 'has-text-grey-light': !playing }"
>
<p class="heading" v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="heading ml-2" target="_blank">
<div class="is-size-7 is-uppercase" v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="ml-2" target="_blank">
<mdicon class="icon is-small" name="open-in-new" />
</a>
</div>

17
web-src/src/components/ListItemQueueItem.vue
View File

@ -1,7 +1,8 @@
<template>
<div
v-if="is_next || !show_only_next_items"
class="media is-align-items-center"
class="media is-align-items-center is-clickable mb-0"
@click="play"
>
<div v-if="edit_mode" class="media-left">
<mdicon
@ -10,17 +11,17 @@
size="18"
/>
</div>
<div class="media-content is-clickable is-clipped" @click="play">
<p
class="title is-6"
<div class="media-content">
<div
class="is-size-6 has-text-weight-bold"
:class="{
'has-text-primary': item.id === player.item_id,
'has-text-grey-light': !is_next
}"
v-text="item.title"
/>
<p
class="subtitle is-7 has-text-weight-bold"
<div
class="is-size-7 has-text-weight-bold"
:class="{
'has-text-primary': item.id === player.item_id,
'has-text-grey-light': !is_next,
@ -28,8 +29,8 @@
}"
v-text="item.artist"
/>
<p
class="subtitle is-7"
<div
class="is-size-7"
:class="{
'has-text-primary': item.id === player.item_id,
'has-text-grey-light': !is_next,

104
web-src/src/components/ModalDialogAlbum.vue
View File

@ -1,15 +1,15 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
<cover-artwork
:url="item.artwork_url"
:artist="item.artist"
:album="item.name"
class="fd-has-shadow fd-cover fd-cover-normal-image"
class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
/>
<p class="title is-4">
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div v-if="media_kind_resolved === 'podcast'" class="buttons">
<a
class="button is-small"
@ -23,50 +23,58 @@
v-text="$t('dialog.album.remove-podcast')"
/>
</div>
<div class="content is-small">
<p v-if="item.artist">
<span class="heading" v-text="$t('dialog.album.artist')" />
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="item.artist"
/>
</p>
<p v-if="item.date_released">
<span class="heading" v-text="$t('dialog.album.release-date')" />
<span class="title is-6" v-text="$filters.date(item.date_released)" />
</p>
<p v-else-if="item.year">
<span class="heading" v-text="$t('dialog.album.year')" />
<span class="title is-6" v-text="item.year" />
</p>
<p>
<span class="heading" v-text="$t('dialog.album.tracks')" />
<span class="title is-6" v-text="item.track_count" />
</p>
<p>
<span class="heading" v-text="$t('dialog.album.duration')" />
<span
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.album.type')" />
<span
class="title is-6"
v-text="
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.album.added-on')" />
<span
class="title is-6"
v-text="$filters.datetime(item.time_added)"
/>
</p>
<div v-if="item.artist" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.album.artist')"
/>
<div class="title is-6">
<a @click="open_artist" v-text="item.artist" />
</div>
</div>
<div v-if="item.date_released" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.album.release-date')"
/>
<div class="title is-6" v-text="$filters.date(item.date_released)" />
</div>
<div v-else-if="item.year" class="mb-3">
<div class="is-size-7 is-uppercase" v-text="$t('dialog.album.year')" />
<div class="title is-6" v-text="item.year" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.album.tracks')"
/>
<div class="title is-6" v-text="item.track_count" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.album.duration')"
/>
<div
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</div>
<div class="mb-3">
<div class="is-size-7 is-uppercase" v-text="$t('dialog.album.type')" />
<div
class="title is-6"
v-text="
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
"
/>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.album.added-on')"
/>
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
</div>
</template>
<template #footer>

53
web-src/src/components/ModalDialogAlbumSpotify.vue
View File

@ -1,40 +1,39 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
<cover-artwork
:url="artwork_url(item)"
:artist="item.artist"
:album="item.name"
class="fd-has-shadow fd-cover fd-cover-normal-image"
class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
@load="artwork_loaded"
@error="artwork_error"
/>
<p class="title is-4">
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<span
class="heading"
v-text="$t('dialog.spotify.album.album-artist')"
/>
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="item.artists[0].name"
/>
</p>
<p>
<span
class="heading"
v-text="$t('dialog.spotify.album.release-date')"
/>
<span class="title is-6" v-text="$filters.date(item.release_date)" />
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.album.type')" />
<span class="title is-6" v-text="item.album_type" />
</p>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.album.album-artist')"
/>
<div class="title is-6">
<a @click="open_artist" v-text="item.artists[0].name" />
</div>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.album.release-date')"
/>
<div class="title is-6" v-text="$filters.date(item.release_date)" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.album.type')"
/>
<div class="title is-6" v-text="item.album_type" />
</div>
</template>
<template #footer>

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

@ -1,29 +1,33 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<p class="title is-4">
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.artist.albums')" />
<span class="title is-6" v-text="item.album_count" />
</p>
<p>
<span class="heading" v-text="$t('dialog.artist.tracks')" />
<span class="title is-6" v-text="item.track_count" />
</p>
<p>
<span class="heading" v-text="$t('dialog.artist.type')" />
<span class="title is-6" v-text="$t(`data.kind.${item.data_kind}`)" />
</p>
<p>
<span class="heading" v-text="$t('dialog.artist.added-on')" />
<span
class="title is-6"
v-text="$filters.datetime(item.time_added)"
/>
</p>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.artist.albums')"
/>
<div class="title is-6" v-text="item.album_count" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.artist.tracks')"
/>
<div class="title is-6" v-text="item.track_count" />
</div>
<div class="mb-3">
<div class="is-size-7 is-uppercase" v-text="$t('dialog.artist.type')" />
<div class="title is-6" v-text="$t(`data.kind.${item.data_kind}`)" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.artist.added-on')"
/>
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
</div>
</template>
<template #footer>

37
web-src/src/components/ModalDialogArtistSpotify.vue
View File

@ -1,24 +1,25 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<p class="title is-4">
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<span
class="heading"
v-text="$t('dialog.spotify.artist.popularity')"
/>
<span
class="title is-6"
v-text="[item.popularity, item.followers.total].join(' / ')"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.artist.genres')" />
<span class="title is-6" v-text="item.genres.join(', ')" />
</p>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.artist.popularity')"
/>
<div
class="title is-6"
v-text="[item.popularity, item.followers.total].join(' / ')"
/>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.artist.genres')"
/>
<div class="title is-6" v-text="item.genres.join(', ')" />
</div>
</template>
<template #footer>

47
web-src/src/components/ModalDialogComposer.vue
View File

@ -1,32 +1,37 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<p class="title is-4">
<a class="has-text-link" @click="open_albums" v-text="item.name" />
</p>
<p>
<span class="heading" v-text="$t('dialog.composer.albums')" />
<a
class="has-text-link is-6"
@click="open_albums"
v-text="item.album_count"
<div class="title is-4">
<a @click="open_albums" v-text="item.name" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.composer.albums')"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.composer.tracks')" />
<a
class="has-text-link is-6"
@click="open_tracks"
v-text="item.track_count"
<div class="title is-6">
<a @click="open_albums" v-text="item.album_count" />
</div>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.composer.tracks')"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.composer.duration')" />
<span
<div class="title is-6">
<a @click="open_tracks" v-text="item.track_count" />
</div>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.composer.duration')"
/>
<div
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
</div>
</template>
<template #footer>
<a class="card-footer-item has-text-dark" @click="queue_add">

45
web-src/src/components/ModalDialogGenre.vue
View File

@ -1,25 +1,32 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<p class="title is-4">
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.genre.albums')" />
<span class="title is-6" v-text="item.album_count" />
</p>
<p>
<span class="heading" v-text="$t('dialog.genre.tracks')" />
<span class="title is-6" v-text="item.track_count" />
</p>
<p>
<span class="heading" v-text="$t('dialog.genre.duration')" />
<span
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.genre.albums')"
/>
<div class="title is-6" v-text="item.album_count" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.genre.tracks')"
/>
<div class="title is-6" v-text="item.track_count" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.genre.duration')"
/>
<div
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</div>
</template>
<template #footer>

39
web-src/src/components/ModalDialogPlaylist.vue
View File

@ -1,22 +1,29 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<p class="title is-4">
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.playlist.path')" />
<span class="title is-6" v-text="item.path" />
</p>
<p>
<span class="heading" v-text="$t('dialog.playlist.type')" />
<span class="title is-6" v-text="$t(`playlist.type.${item.type}`)" />
</p>
<p v-if="!item.folder">
<span class="heading" v-text="$t('dialog.playlist.tracks')" />
<span class="title is-6" v-text="item.item_count" />
</p>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.playlist.path')"
/>
<div class="title is-6" v-text="item.path" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.playlist.type')"
/>
<div class="title is-6" v-text="$t(`playlist.type.${item.type}`)" />
</div>
<div v-if="!item.folder" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.playlist.tracks')"
/>
<div class="title is-6" v-text="item.item_count" />
</div>
</template>
<template v-if="!item.folder" #footer>

39
web-src/src/components/ModalDialogPlaylistSpotify.vue
View File

@ -1,22 +1,29 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<p class="title is-4">
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.spotify.playlist.owner')" />
<span class="title is-6" v-text="item.owner.display_name" />
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.playlist.tracks')" />
<span class="title is-6" v-text="item.tracks.total" />
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.playlist.path')" />
<span class="title is-6" v-text="item.uri" />
</p>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.playlist.owner')"
/>
<div class="title is-6" v-text="item.owner.display_name" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.playlist.tracks')"
/>
<div class="title is-6" v-text="item.tracks.total" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.playlist.path')"
/>
<div class="title is-6" v-text="item.uri" />
</div>
</template>
<template #footer>

192
web-src/src/components/ModalDialogQueueItem.vue
View File

@ -1,95 +1,117 @@
<template>
<base-modal :show="show" @close="$emit('close')">
<template #content>
<p class="title is-4" v-text="item.title" />
<p class="subtitle" v-text="item.artist" />
<div class="content is-small">
<p v-if="item.album">
<span class="heading" v-text="$t('dialog.queue-item.album')" />
<a
class="title is-6 has-text-link"
@click="open_album"
v-text="item.album"
/>
</p>
<p v-if="item.album_artist">
<span class="heading" v-text="$t('dialog.queue-item.album-artist')" />
<a
class="title is-6 has-text-link"
@click="open_album_artist"
v-text="item.album_artist"
/>
</p>
<p v-if="item.composer">
<span class="heading" v-text="$t('dialog.queue-item.composer')" />
<span class="title is-6" v-text="item.composer" />
</p>
<p v-if="item.year">
<span class="heading" v-text="$t('dialog.queue-item.year')" />
<span class="title is-6" v-text="item.year" />
</p>
<p v-if="item.genre">
<span class="heading" v-text="$t('dialog.queue-item.genre')" />
<a
class="title is-6 has-text-link"
@click="open_genre"
v-text="item.genre"
/>
</p>
<p v-if="item.disc_number">
<span class="heading" v-text="$t('dialog.queue-item.position')" />
<div class="title is-4" v-text="item.title" />
<div class="subtitle" v-text="item.artist" />
<div v-if="item.album" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.album')"
/>
<div class="title is-6">
<a @click="open_album" v-text="item.album" />
</div>
</div>
<div v-if="item.album_artist" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.album-artist')"
/>
<div class="title is-6">
<a @click="open_album_artist" v-text="item.album_artist" />
</div>
</div>
<div v-if="item.composer" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.composer')"
/>
<div class="title is-6" v-text="item.composer" />
</div>
<div v-if="item.year" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.year')"
/>
<div class="title is-6" v-text="item.year" />
</div>
<div v-if="item.genre" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.genre')"
/>
<div class="title is-6">
<a @click="open_genre" v-text="item.genre" />
</div>
</div>
<div v-if="item.disc_number" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.position')"
/>
<div
class="title is-6"
v-text="[item.disc_number, item.track_number].join(' / ')"
/>
</div>
<div v-if="item.length_ms" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.duration')"
/>
<div
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.path')"
/>
<div class="title is-6" v-text="item.path" />
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.type')"
/>
<div class="title is-6">
<span
class="title is-6"
v-text="[item.disc_number, item.track_number].join(' / ')"
v-text="
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
"
/>
</p>
<p v-if="item.length_ms">
<span class="heading" v-text="$t('dialog.queue-item.duration')" />
</div>
</div>
<div v-if="item.samplerate" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.queue-item.quality')"
/>
<div class="title is-6">
<span v-text="item.type" />
<span
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
v-if="item.samplerate"
v-text="
$t('dialog.queue-item.samplerate', {
rate: item.samplerate
})
"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.queue-item.path')" />
<span class="title is-6" v-text="item.path" />
</p>
<p>
<span class="heading" v-text="$t('dialog.queue-item.type')" />
<span class="title is-6">
<span
v-text="
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
"
/>
</span>
</p>
<p v-if="item.samplerate">
<span class="heading" v-text="$t('dialog.queue-item.quality')" />
<span class="title is-6">
<span v-text="item.type" />
<span
v-if="item.samplerate"
v-text="
$t('dialog.queue-item.samplerate', {
rate: item.samplerate
})
"
/>
<span
v-if="item.channels"
v-text="
$t('dialog.queue-item.channels', {
channels: $filters.channels(item.channels)
})
"
/>
<span
v-if="item.bitrate"
v-text="$t('dialog.queue-item.bitrate', { rate: item.bitrate })"
/>
</span>
</p>
<span
v-if="item.channels"
v-text="
$t('dialog.queue-item.channels', {
channels: $filters.channels(item.channels)
})
"
/>
<span
v-if="item.bitrate"
v-text="$t('dialog.queue-item.bitrate', { rate: item.bitrate })"
/>
</div>
</div>
</template>
<template #footer>

233
web-src/src/components/ModalDialogTrack.vue
View File

@ -17,118 +17,137 @@
v-text="$t('dialog.track.mark-as-played')"
/>
</div>
<div class="content is-small">
<p v-if="item.album">
<span class="heading" v-text="$t('dialog.track.album')" />
<a
class="title is-6 has-text-link"
@click="open_album"
v-text="item.album"
/>
</p>
<p v-if="item.album_artist && item.media_kind !== 'audiobook'">
<span class="heading" v-text="$t('dialog.track.album-artist')" />
<a
class="title is-6 has-text-link"
@click="open_album_artist"
v-text="item.album_artist"
/>
</p>
<p v-if="item.composer">
<span class="heading" v-text="$t('dialog.track.composer')" />
<span class="title is-6" v-text="item.composer" />
</p>
<p v-if="item.date_released">
<span class="heading" v-text="$t('dialog.track.release-date')" />
<span class="title is-6" v-text="$filters.date(item.date_released)" />
</p>
<p v-else-if="item.year">
<span class="heading" v-text="$t('dialog.track.year')" />
<span class="title is-6" v-text="item.year" />
</p>
<p v-if="item.genre">
<span class="heading" v-text="$t('dialog.track.genre')" />
<a
class="title is-6 has-text-link"
@click="open_genre"
v-text="item.genre"
/>
</p>
<p v-if="item.disc_number">
<span class="heading" v-text="$t('dialog.track.position')" />
<div v-if="item.album" class="mb-3">
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.album')" />
<div class="title is-6">
<a @click="open_album" v-text="item.album" />
</div>
</div>
<div
v-if="item.album_artist && item.media_kind !== 'audiobook'"
class="mb-3"
>
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.album-artist')"
/>
<div class="title is-6">
<a @click="open_album_artist" v-text="item.album_artist" />
</div>
</div>
<div v-if="item.composer" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.composer')"
/>
<div class="title is-6" v-text="item.composer" />
</div>
<div v-if="item.date_released" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.release-date')"
/>
<div class="title is-6" v-text="$filters.date(item.date_released)" />
</div>
<div v-else-if="item.year" class="mb-3">
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.year')" />
<div class="title is-6" v-text="item.year" />
</div>
<div v-if="item.genre" class="mb-3">
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.genre')" />
<div class="title is-6">
<a @click="open_genre" v-text="item.genre" />
</div>
</div>
<div v-if="item.disc_number" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.position')"
/>
<div
class="title is-6"
v-text="[item.disc_number, item.track_number].join(' / ')"
/>
</div>
<div v-if="item.length_ms" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.duration')"
/>
<div
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</div>
<div class="mb-3">
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.path')" />
<div class="title is-6" v-text="item.path" />
</div>
<div class="mb-3">
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.type')" />
<div
class="title is-6"
v-text="
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
"
/>
</div>
<div v-if="item.samplerate" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.quality')"
/>
<div class="title is-6">
<span v-text="item.type" />
<span
class="title is-6"
v-text="[item.disc_number, item.track_number].join(' / ')"
/>
</p>
<p v-if="item.length_ms">
<span class="heading" v-text="$t('dialog.track.duration')" />
<span
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.track.path')" />
<span class="title is-6" v-text="item.path" />
</p>
<p>
<span class="heading" v-text="$t('dialog.track.type')" />
<span
class="title is-6"
v-if="item.samplerate"
v-text="
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
"
/>
</p>
<p v-if="item.samplerate">
<span class="heading" v-text="$t('dialog.track.quality')" />
<span class="title is-6">
<span v-text="item.type" />
<span
v-if="item.samplerate"
v-text="
$t('dialog.track.samplerate', {
rate: item.samplerate
})
"
/>
<span
v-if="item.channels"
v-text="
$t('dialog.track.channels', {
channels: $filters.channels(item.channels)
})
"
/>
<span
v-if="item.bitrate"
v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
/>
</span>
</p>
<p>
<span class="heading" v-text="$t('dialog.track.added-on')" />
<span
class="title is-6"
v-text="$filters.datetime(item.time_added)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.track.rating')" />
<span
class="title is-6"
v-text="
$t('dialog.track.rating-value', {
rating: Math.floor(item.rating / 10)
$t('dialog.track.samplerate', {
rate: item.samplerate
})
"
/>
</p>
<p v-if="item.comment">
<span class="heading" v-text="$t('dialog.track.comment')" />
<span class="title is-6" v-text="item.comment" />
</p>
<span
v-if="item.channels"
v-text="
$t('dialog.track.channels', {
channels: $filters.channels(item.channels)
})
"
/>
<span
v-if="item.bitrate"
v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
/>
</div>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.added-on')"
/>
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
</div>
<div>
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.rating')"
/>
<div
class="title is-6"
v-text="
$t('dialog.track.rating-value', {
rating: Math.floor(item.rating / 10)
})
"
/>
</div>
<div v-if="item.comment" class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.track.comment')"
/>
<div class="title is-6" v-text="item.comment" />
</div>
</template>
<template #footer>

102
web-src/src/components/ModalDialogTrackSpotify.vue
View File

@ -3,54 +3,60 @@
<template #content>
<p class="title is-4" v-text="item.name" />
<p class="subtitle" v-text="item.artists[0].name" />
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.spotify.track.album')" />
<a
class="title is-6 has-text-link"
@click="open_album"
v-text="item.album.name"
/>
</p>
<p>
<span
class="heading"
v-text="$t('dialog.spotify.track.album-artist')"
/>
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="item.artists[0].name"
/>
</p>
<p>
<span
class="heading"
v-text="$t('dialog.spotify.track.release-date')"
/>
<span
class="title is-6"
v-text="$filters.date(item.album.release_date)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.track.position')" />
<span
class="title is-6"
v-text="[item.disc_number, item.track_number].join(' / ')"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.track.duration')" />
<span
class="title is-6"
v-text="$filters.durationInHours(item.duration_ms)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.track.path')" />
<span class="title is-6" v-text="item.uri" />
</p>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.track.album')"
/>
<div class="title is-6">
<a @click="open_album" v-text="item.album.name" />
</div>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.track.album-artist')"
/>
<div class="title is-6">
<a @click="open_artist" v-text="item.artists[0].name" />
</div>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.track.release-date')"
/>
<div
class="title is-6"
v-text="$filters.date(item.album.release_date)"
/>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.track.position')"
/>
<div
class="title is-6"
v-text="[item.disc_number, item.track_number].join(' / ')"
/>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.track.duration')"
/>
<div
class="title is-6"
v-text="$filters.durationInHours(item.duration_ms)"
/>
</div>
<div class="mb-3">
<div
class="is-size-7 is-uppercase"
v-text="$t('dialog.spotify.track.path')"
/>
<div class="title is-6" v-text="item.uri" />
</div>
</template>
<template #footer>

8
web-src/src/mystyles.scss
View File

@ -105,14 +105,6 @@
}
}
.heading {
display: block;
font-size: 0.75rem;
letter-spacing: 1px;
margin-bottom: 0px !important;
text-transform: uppercase;
}
.column {
&.fd-has-cover {
@include mixins.mobile {

12
web-src/src/pages/PageAlbum.vue
View File

@ -2,10 +2,10 @@
<div>
<content-with-hero>
<template #heading-left>
<p class="title is-5" v-text="album.name" />
<p class="subtitle is-6 has-text-link">
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
</p>
<div class="title is-5" v-text="album.name" />
<div class="subtitle is-6">
<a @click="open_artist" v-text="album.artist" />
</div>
<div class="buttons is-centered-mobile mt-5">
<a
class="button has-background-light is-small is-rounded"
@ -32,8 +32,8 @@
/>
</template>
<template #content>
<p
class="heading has-text-centered-mobile mt-5"
<div
class="is-size-7 is-uppercase has-text-centered-mobile my-5"
v-text="$t('page.album.track-count', { count: album.track_count })"
/>
<list-tracks :items="tracks" :uris="album.uri" />

16
web-src/src/pages/PageAlbumSpotify.vue
View File

@ -2,14 +2,10 @@
<div>
<content-with-hero>
<template #heading-left>
<p class="title is-5" v-text="album.name" />
<p class="subtitle is-6 has-text-link">
<a
class="has-text-link"
@click="open_artist"
v-text="album.artists[0].name"
/>
</p>
<div class="title is-5" v-text="album.name" />
<div class="subtitle is-6">
<a @click="open_artist" v-text="album.artists[0].name" />
</div>
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
@ -33,8 +29,8 @@
/>
</template>
<template #content>
<p
class="heading has-text-centered-mobile mt-5"
<div
class="is-size-7 is-uppercase has-text-centered-mobile mt-5"
v-text="
$t('page.spotify.album.track-count', { count: album.tracks.total })
"

16
web-src/src/pages/PageAlbums.vue
View File

@ -6,7 +6,10 @@
<index-button-list :indices="albums.indices" />
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.albums.filter')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.albums.filter')"
/>
<control-switch v-model="uiStore.hide_singles">
<template #label>
<span v-text="$t('page.albums.hide-singles')" />
@ -28,7 +31,10 @@
</control-switch>
</div>
<div class="column">
<p class="heading" v-text="$t('page.albums.sort.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.albums.sort.title')"
/>
<control-dropdown
v-model:value="uiStore.albums_sort"
:options="groupings"
@ -37,9 +43,9 @@
</div>
</template>
<template #heading-left>
<p class="title is-4" v-text="$t('page.albums.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.albums.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.albums.count', { count: albums.count })"
/>
</template>

33
web-src/src/pages/PageArtist.vue
View File

@ -4,7 +4,10 @@
<template #options>
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.artist.filter')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.artist.filter')"
/>
<control-switch
v-if="spotify_enabled"
v-model="uiStore.hide_spotify"
@ -18,7 +21,10 @@
</control-switch>
</div>
<div class="column">
<p class="heading" v-text="$t('page.artist.sort.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.artist.sort.title')"
/>
<control-dropdown
v-model:value="uiStore.artist_albums_sort"
:options="groupings"
@ -27,7 +33,17 @@
</div>
</template>
<template #heading-left>
<p class="title is-4" v-text="artist.name" />
<div class="title is-4" v-text="artist.name" />
<div class="is-size-7 is-uppercase">
<span
v-text="$t('page.artist.album-count', { count: albums.count })"
/>
<span>&nbsp;|&nbsp;</span>
<a
@click="open_tracks"
v-text="$t('page.artist.track-count', { count: track_count })"
/>
</div>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -44,17 +60,6 @@
</div>
</template>
<template #content>
<p class="heading has-text-centered-mobile">
<span
v-text="$t('page.artist.album-count', { count: albums.count })"
/>
<span>&nbsp;|&nbsp;</span>
<a
class="has-text-link"
@click="open_tracks"
v-text="$t('page.artist.track-count', { count: track_count })"
/>
</p>
<list-albums :items="albums" />
<modal-dialog-artist
:item="artist"

10
web-src/src/pages/PageArtistSpotify.vue
View File

@ -2,7 +2,11 @@
<div>
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="artist.name" />
<div class="title is-4" v-text="artist.name" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.spotify.artist.album-count', { count: total })"
/>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -19,10 +23,6 @@
</div>
</template>
<template #content>
<p
class="heading has-text-centered-mobile"
v-text="$t('page.spotify.artist.album-count', { count: total })"
/>
<list-albums-spotify :items="albums" />
<VueEternalLoading v-if="offset < total" :load="load_next">
<template #loading>

31
web-src/src/pages/PageArtistTracks.vue
View File

@ -5,7 +5,10 @@
<index-button-list :indices="tracks.indices" />
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.artist.filter')" />
<p
class="is-size-7 is-uppercase"
v-text="$t('page.artist.filter')"
/>
<control-switch
v-if="spotify_enabled"
v-model="uiStore.hide_spotify"
@ -19,7 +22,10 @@
</control-switch>
</div>
<div class="column">
<p class="heading" v-text="$t('page.artist.sort.title')" />
<p
class="is-size-7 is-uppercase"
v-text="$t('page.artist.sort.title')"
/>
<control-dropdown
v-model:value="uiStore.artist_tracks_sort"
:options="groupings"
@ -29,6 +35,16 @@
</template>
<template #heading-left>
<p class="title is-4" v-text="artist.name" />
<div class="is-size-7 is-uppercase">
<a
@click="open_artist"
v-text="$t('page.artist.album-count', { count: album_count })"
/>
<span>&nbsp;|&nbsp;</span>
<span
v-text="$t('page.artist.track-count', { count: tracks.count })"
/>
</div>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -45,17 +61,6 @@
</div>
</template>
<template #content>
<p class="heading has-text-centered-mobile">
<a
class="has-text-link"
@click="open_artist"
v-text="$t('page.artist.album-count', { count: album_count })"
/>
<span>&nbsp;|&nbsp;</span>
<span
v-text="$t('page.artist.track-count', { count: tracks.count })"
/>
</p>
<list-tracks :items="tracks" :uris="track_uris" />
<modal-dialog-artist
:item="artist"

16
web-src/src/pages/PageArtists.vue
View File

@ -6,7 +6,10 @@
<index-button-list :indices="artists.indices" />
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.artists.filter')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.artists.filter')"
/>
<control-switch v-model="uiStore.hide_singles">
<template #label>
<span v-text="$t('page.artists.hide-singles')" />
@ -27,7 +30,10 @@
</div>
</div>
<div class="column">
<p class="heading" v-text="$t('page.artists.sort.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.artists.sort.title')"
/>
<control-dropdown
v-model:value="uiStore.artists_sort"
:options="groupings"
@ -36,9 +42,9 @@
</div>
</template>
<template #heading-left>
<p class="title is-4" v-text="$t('page.artists.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.artists.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.artists.count', { count: artists.count })"
/>
</template>

12
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -2,10 +2,10 @@
<div>
<content-with-hero>
<template #heading-left>
<p class="title is-5" v-text="album.name" />
<p class="subtitle is-6 has-text-link">
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
</p>
<div class="title is-5" v-text="album.name" />
<div class="subtitle is-6">
<a @click="open_artist" v-text="album.artist" />
</div>
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
@ -29,8 +29,8 @@
/>
</template>
<template #content>
<p
class="heading has-text-centered-mobile mt-5"
<div
class="is-size-7 is-uppercase has-text-centered-mobile mt-5"
v-text="
$t('page.audiobooks.album.track-count', {
count: album.track_count

2
web-src/src/pages/PageAudiobooksAlbums.vue
View File

@ -8,7 +8,7 @@
<template #heading-left>
<p class="title is-4" v-text="$t('page.audiobooks.albums.title')" />
<p
class="heading"
class="is-size-7 is-uppercase"
v-text="$t('page.audiobooks.albums.count', { count: albums.count })"
/>
</template>

18
web-src/src/pages/PageAudiobooksArtist.vue
View File

@ -2,7 +2,15 @@
<div>
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="artist.name" />
<div class="title is-4" v-text="artist.name" />
<div
class="is-size-7 is-uppercase"
v-text="
$t('page.audiobooks.artist.album-count', {
count: artist.album_count
})
"
/>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -19,14 +27,6 @@
</div>
</template>
<template #content>
<p
class="heading has-text-centered-mobile"
v-text="
$t('page.audiobooks.artist.album-count', {
count: artist.album_count
})
"
/>
<list-albums :items="albums" />
<modal-dialog-artist
:item="artist"

6
web-src/src/pages/PageAudiobooksArtists.vue
View File

@ -6,9 +6,9 @@
<index-button-list :indices="artists.indices" />
</template>
<template #heading-left>
<p class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.audiobooks.artists.count', { count: artists.count })"
/>
</template>

6
web-src/src/pages/PageAudiobooksGenres.vue
View File

@ -6,9 +6,9 @@
<index-button-list :indices="genres.indices" />
</template>
<template #heading-left>
<p class="title is-4" v-text="$t('page.genres.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.genres.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.genres.count', { count: genres.total })"
/>
</template>

31
web-src/src/pages/PageComposerAlbums.vue
View File

@ -2,7 +2,21 @@
<div>
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="composer.name" />
<div class="title is-4" v-text="composer.name" />
<div class="is-size-7 is-uppercase">
<span
v-text="
$t('page.composer.album-count', { count: composer.album_count })
"
/>
<span>&nbsp;|&nbsp;</span>
<a
@click="open_tracks"
v-text="
$t('page.composer.track-count', { count: composer.track_count })
"
/>
</div>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -19,21 +33,6 @@
</div>
</template>
<template #content>
<p class="heading has-text-centered-mobile">
<span
v-text="
$t('page.composer.album-count', { count: composer.album_count })
"
/>
<span>&nbsp;|&nbsp;</span>
<a
class="has-text-link"
@click="open_tracks"
v-text="
$t('page.composer.track-count', { count: composer.track_count })
"
/>
</p>
<list-albums :items="albums" />
<modal-dialog-composer
:item="composer"

40
web-src/src/pages/PageComposerTracks.vue
View File

@ -5,7 +5,10 @@
<index-button-list :indices="tracks.indices" />
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.artist.sort.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.artist.sort.title')"
/>
<control-dropdown
v-model:value="uiStore.composer_tracks_sort"
:options="groupings"
@ -14,7 +17,23 @@
</div>
</template>
<template #heading-left>
<p class="title is-4" v-text="composer.name" />
<div class="title is-4" v-text="composer.name" />
<div class="is-size-7 is-uppercase">
<a
@click="open_albums"
v-text="
$t('page.composer.album-count', {
count: composer.album_count
})
"
/>
<span>&nbsp;|&nbsp;</span>
<span
v-text="
$t('page.composer.track-count', { count: composer.track_count })
"
/>
</div>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -31,23 +50,6 @@
</div>
</template>
<template #content>
<p class="heading has-text-centered-mobile">
<a
class="has-text-link"
@click="open_albums"
v-text="
$t('page.composer.album-count', {
count: composer.album_count
})
"
/>
<span>&nbsp;|&nbsp;</span>
<span
v-text="
$t('page.composer.track-count', { count: composer.track_count })
"
/>
</p>
<list-tracks :items="tracks" :expression="expression" />
<modal-dialog-composer
:item="composer"

6
web-src/src/pages/PageComposers.vue
View File

@ -6,9 +6,9 @@
<index-button-list :indices="composers.indices" />
</template>
<template #heading-left>
<p class="title is-4" v-text="$t('page.composers.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.composers.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.composers.count', { count: composers.total })"
/>
</template>

23
web-src/src/pages/PageGenreAlbums.vue
View File

@ -5,7 +5,17 @@
<index-button-list :indices="albums.indices" />
</template>
<template #heading-left>
<p class="title is-4" v-text="genre.name" />
<div class="title is-4" v-text="genre.name" />
<div class="is-size-7 is-uppercase">
<span
v-text="$t('page.genre.album-count', { count: genre.album_count })"
/>
<span>&nbsp;|&nbsp;</span>
<a
@click="open_tracks"
v-text="$t('page.genre.track-count', { count: genre.track_count })"
/>
</div>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -22,17 +32,6 @@
</div>
</template>
<template #content>
<p class="heading has-text-centered-mobile">
<span
v-text="$t('page.genre.album-count', { count: genre.album_count })"
/>
<span>&nbsp;|&nbsp;</span>
<a
class="has-text-link"
@click="open_tracks"
v-text="$t('page.genre.track-count', { count: genre.track_count })"
/>
</p>
<list-albums :items="albums" />
<modal-dialog-genre
:item="genre"

28
web-src/src/pages/PageGenreTracks.vue
View File

@ -5,7 +5,10 @@
<index-button-list :indices="tracks.indices" />
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.genre.sort.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.genre.sort.title')"
/>
<control-dropdown
v-model:value="uiStore.genre_tracks_sort"
:options="groupings"
@ -14,7 +17,17 @@
</div>
</template>
<template #heading-left>
<p class="title is-4" v-text="genre.name" />
<div class="title is-4" v-text="genre.name" />
<div class="is-size-7 is-uppercase">
<a
@click="open_genre"
v-text="$t('page.genre.album-count', { count: genre.album_count })"
/>
<span>&nbsp;|&nbsp;</span>
<span
v-text="$t('page.genre.track-count', { count: genre.track_count })"
/>
</div>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -31,17 +44,6 @@
</div>
</template>
<template #content>
<p class="heading has-text-centered-mobile">
<a
class="has-text-link"
@click="open_genre"
v-text="$t('page.genre.album-count', { count: genre.album_count })"
/>
<span>&nbsp;|&nbsp;</span>
<span
v-text="$t('page.genre.track-count', { count: genre.track_count })"
/>
</p>
<list-tracks :items="tracks" :expression="expression" />
<modal-dialog-genre
:item="genre"

6
web-src/src/pages/PageGenres.vue
View File

@ -6,9 +6,9 @@
<index-button-list :indices="genres.indices" />
</template>
<template #heading-left>
<p class="title is-4" v-text="$t('page.genres.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.genres.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.genres.count', { count: genres.total })"
/>
</template>

6
web-src/src/pages/PagePlaylistFolder.vue
View File

@ -2,14 +2,14 @@
<div>
<content-with-heading>
<template #heading-left>
<p
<div
class="title is-4"
v-text="
playlist.id === 0 ? $t('page.playlists.title') : playlist.name
"
/>
<p
class="heading"
<div
class="is-size-7 is-uppercase"
v-text="$t('page.playlists.count', { count: playlists.count })"
/>
</template>

8
web-src/src/pages/PagePlaylistTracks.vue
View File

@ -3,6 +3,10 @@
<content-with-heading>
<template #heading-left>
<div class="title is-4" v-text="playlist.name" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.playlist.track-count', { count: tracks.count })"
/>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -19,10 +23,6 @@
</div>
</template>
<template #content>
<p
class="heading has-text-centered-mobile"
v-text="$t('page.playlist.track-count', { count: tracks.count })"
/>
<list-tracks :items="tracks" :uris="uris" />
<modal-dialog-playlist
:item="playlist"

12
web-src/src/pages/PagePlaylistTracksSpotify.vue
View File

@ -3,6 +3,12 @@
<content-with-heading>
<template #heading-left>
<div class="title is-4" v-text="playlist.name" />
<div
class="is-size-7 is-uppercase"
v-text="
$t('page.spotify.playlist.count', { count: playlist.tracks.total })
"
/>
</template>
<template #heading-right>
<div class="buttons is-centered">
@ -19,12 +25,6 @@
</div>
</template>
<template #content>
<p
class="heading has-text-centered-mobile"
v-text="
$t('page.spotify.playlist.count', { count: playlist.tracks.total })
"
/>
<list-tracks-spotify :items="tracks" :context_uri="playlist.uri" />
<VueEternalLoading v-if="offset < total" :load="load_next">
<template #loading>

10
web-src/src/pages/PagePodcast.vue
View File

@ -2,10 +2,10 @@
<div>
<content-with-hero>
<template #heading-left>
<p class="title is-5" v-text="album.name" />
<p class="subtitle is-6">
<div class="title is-5" v-text="album.name" />
<div class="subtitle is-6">
<br />
</p>
</div>
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
@ -29,8 +29,8 @@
/>
</template>
<template #content>
<p
class="heading has-text-centered-mobile mt-5"
<div
class="is-size-7 is-uppercase has-text-centered-mobile my-5"
v-text="$t('page.podcast.track-count', { count: album.track_count })"
/>
<list-tracks

6
web-src/src/pages/PagePodcasts.vue
View File

@ -22,9 +22,9 @@
</content-with-heading>
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="$t('page.podcasts.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.podcasts.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.podcasts.count', { count: albums.total })"
/>
</template>

6
web-src/src/pages/PageQueue.vue
View File

@ -2,9 +2,9 @@
<div>
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="$t('page.queue.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.queue.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.queue.count', { count: queue.count })"
/>
</template>

6
web-src/src/pages/PageRadioStreams.vue
View File

@ -2,9 +2,9 @@
<div>
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="$t('page.radio.title')" />
<p
class="heading"
<div class="title is-4" v-text="$t('page.radio.title')" />
<div
class="is-size-7 is-uppercase"
v-text="$t('page.radio.count', { count: tracks.total })"
/>
</template>