MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-03-29 08:43:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix spacing in lists of items

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-01-01 17:36:09 +01:00
parent 02307e86cd
commit 2d0747dbe9
11 changed files with 129 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,26 +7,31 @@
v-text="item.index" v-text="item.index"
/> />
</div> </div>
<div v-else class="media is-align-items-center" @click="open(item.item)"> <div
v-else
class="media is-align-items-center is-clickable mb-0"
@click="open(item.item)"
>
<cover-artwork <cover-artwork
v-if="settingsStore.show_cover_artwork_in_album_lists" v-if="settingsStore.show_cover_artwork_in_album_lists"
:url="item.item.artwork_url" :url="item.item.artwork_url"
:artist="item.item.artist" :artist="item.item.artist"
:album="item.item.name" :album="item.item.name"
class="media-left is-clickable 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 is-clickable"> <div class="content is-small">
<p class="title is-6" v-text="item.item.name" /> <div class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
<p <div
class="subtitle is-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"
/> />
<p <div
v-if="item.item.date_released && item.item.media_kind === 'music'" v-if="item.item.date_released && item.item.media_kind === 'music'"
class="subtitle is-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)">

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

@ -1,6 +1,9 @@
<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 is-clickable" @click="open(item)"> <div
class="media is-align-items-center is-clickable mb-0"
@click="open(item)"
>
<div <div
v-if="settingsStore.show_cover_artwork_in_album_lists" v-if="settingsStore.show_cover_artwork_in_album_lists"
class="media-left" class="media-left"
@ -12,18 +15,18 @@
class="fd-has-shadow fd-cover fd-cover-small-image" class="fd-has-shadow fd-cover fd-cover-small-image"
/> />
</div> </div>
<div class="media-content is-clipped"> <div class="media-content">
<p class="title is-6" v-text="item.name" /> <div class="content is-small">
<p <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
class="subtitle is-7 has-text-grey has-text-weight-bold" <div
v-text="item.artists[0]?.name" class="has-text-weight-bold has-text-grey"
/> v-text="item.artists[0]?.name"
<p />
class="subtitle is-7 has-text-grey" <div
v-text=" class="has-text-grey"
[item.album_type, $filters.date(item.release_date)].join(', ') 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)">

8
web-src/src/components/ListArtists.vue
View File

@ -9,8 +9,12 @@
/> />
</div> </div>
</div> </div>
<div v-else class="media is-align-items-center" @click="open(item.item)"> <div
<div class="media-content is-clickable is-clipped"> v-else
class="media is-align-items-center is-clickable mb-0"
@click="open(item.item)"
>
<div class="media-content">
<p class="title is-6" v-text="item.item.name" /> <p class="title is-6" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">

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

@ -1,7 +1,7 @@
<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"> <div class="media is-align-items-center mb-0">
<div class="media-content is-clickable is-clipped" @click="open(item)"> <div class="media-content is-clickable" @click="open(item)">
<p class="title is-6" v-text="item.name" /> <p class="title is-6" v-text="item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">

8
web-src/src/components/ListComposers.vue
View File

@ -9,8 +9,12 @@
/> />
</div> </div>
</div> </div>
<div v-else class="media is-align-items-center" @click="open(item.item)"> <div
<div class="media-content is-clickable is-clipped"> v-else
class="media is-align-items-center is-clickable mb-0"
@click="open(item.item)"
>
<div class="media-content">
<p class="title is-6" v-text="item.item.name" /> <p class="title is-6" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">

11
web-src/src/components/ListDirectories.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="$route.query.directory" class="media is-align-items-center"> <div v-if="$route.query.directory" class="media is-align-items-center mb-0">
<mdicon <mdicon
class="icon media-left is-clickable" class="icon media-left is-clickable"
name="chevron-left" name="chevron-left"
@ -21,9 +21,12 @@
</div> </div>
</div> </div>
<template v-for="item in items" :key="item.path"> <template v-for="item in items" :key="item.path">
<div class="media is-align-items-center" @click="open(item)"> <div
<mdicon class="media-left is-clickable icon" name="folder" /> class="media is-align-items-center is-clickable mb-0"
<div class="media-content is-clickable is-clipped"> @click="open(item)"
>
<mdicon class="media-left icon" name="folder" />
<div class="media-content">
<p class="title is-6" v-text="item.name" /> <p class="title is-6" v-text="item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">

8
web-src/src/components/ListGenres.vue
View File

@ -9,8 +9,12 @@
/> />
</div> </div>
</div> </div>
<div v-else class="media is-align-items-center" @click="open(item.item)"> <div
<div class="media-content is-clickable is-clipped"> v-else
class="media is-align-items-center is-clickable mb-0"
@click="open(item.item)"
>
<div class="media-content">
<p class="title is-6" v-text="item.item.name" /> <p class="title is-6" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">

9
web-src/src/components/ListPlaylists.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<template v-for="item in items" :key="item.itemId"> <template v-for="item in items" :key="item.itemId">
<div class="media is-align-items-center" @click="open(item.item)"> <div
<mdicon class="media-left is-clickable icon" :name="icon(item.item)" /> class="media is-align-items-center is-clickable mb-0"
<div class="media-content is-clickable is-clipped"> @click="open(item.item)"
>
<mdicon class="media-left icon" :name="icon(item.item)" />
<div class="media-content">
<p class="title is-6" v-text="item.item.name" /> <p class="title is-6" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">

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

@ -1,9 +1,14 @@
<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"> <div class="media is-align-items-center mb-0">
<div class="media-content is-clickable is-clipped" @click="open(item)"> <div class="media-content is-clickable" @click="open(item)">
<p class="title is-6" v-text="item.name" /> <div class="content is-small">
<p class="subtitle is-7" v-text="item.owner.display_name" /> <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
<div
class="has-text-weight-bold has-text-grey"
v-text="item.owner.display_name"
/>
</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)">

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

@ -9,35 +9,33 @@
</div> </div>
<div <div
v-else v-else
class="media is-align-items-center" class="media is-align-items-center is-clickable mb-0"
:class="{ 'with-progress': show_progress }" :class="{ 'with-progress': show_progress }"
@click="play(item.item)" @click="play(item.item)"
> >
<mdicon <mdicon v-if="show_icon" class="media-left icon" name="file-outline" />
v-if="show_icon" <div class="media-content">
class="media-left icon is-clickable" <div class="content is-small">
name="file-outline" <div
/> class="is-size-6 has-text-weight-bold"
<div class="media-content is-clipped"> :class="{
<p 'has-text-grey':
class="title is-6" item.item.media_kind === 'podcast' && item.item.play_count > 0
:class="{ }"
'has-text-grey': v-text="item.item.title"
item.item.media_kind === 'podcast' && item.item.play_count > 0 />
}" <div
v-text="item.item.title" class="has-text-weight-bold has-text-grey"
/> v-text="item.item.artist"
<p />
class="subtitle is-7 has-text-grey has-text-weight-bold" <div class="has-text-grey" v-text="item.item.album" />
v-text="item.item.artist" <progress
/> v-if="show_progress && item.item.seek_ms > 0"
<p class="subtitle is-7 has-text-grey" v-text="item.item.album" /> class="progress is-info"
<progress :max="item.item.length_ms"
v-if="show_progress && item.item.seek_ms > 0" :value="item.item.seek_ms"
class="progress is-info" />
:max="item.item.length_ms" </div>
:value="item.item.seek_ms"
/>
</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)">

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

@ -1,6 +1,6 @@
<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"> <div class="media is-align-items-center mb-0">
<div <div
class="media-content" class="media-content"
:class="{ :class="{
@ -9,31 +9,33 @@
}" }"
@click="play(item)" @click="play(item)"
> >
<p <div class="content is-small">
class="title is-6" <div
:class="{ 'has-text-grey-light': !item.is_playable }" class="is-size-6 has-text-weight-bold"
v-text="item.name" :class="{ 'has-text-grey-light': !item.is_playable }"
/> v-text="item.name"
<p />
class="subtitle is-7 has-text-weight-bold" <div
:class="{ class="has-text-weight-bold"
'has-text-grey': item.is_playable, :class="{
'has-text-grey-light': !item.is_playable 'has-text-grey': item.is_playable,
}" 'has-text-grey-light': !item.is_playable
v-text="item.artists[0].name" }"
/> v-text="item.artists[0].name"
<p class="subtitle is-7 has-text-grey" v-text="item.album.name" /> />
<p v-if="!item.is_playable" class="subtitle is-7"> <div class="has-text-grey" v-text="item.album.name" />
(<span v-text="$t('list.spotify.not-playable-track')" /> <div v-if="!item.is_playable" class="has-text-grey">
<span (<span v-text="$t('list.spotify.not-playable-track')" />
v-if="item.restrictions?.reason" <span
v-text=" v-if="item.restrictions?.reason"
$t('list.spotify.restriction-reason', { v-text="
reason: item.restrictions.reason $t('list.spotify.restriction-reason', {
}) reason: item.restrictions.reason
" })
/>) "
</p> />)
</div>
</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)">