diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 14f86ecf..9050c2d5 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -7,26 +7,31 @@
v-text="item.index"
/>
</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
v-if="settingsStore.show_cover_artwork_in_album_lists"
:url="item.item.artwork_url"
:artist="item.item.artist"
: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 is-clickable">
- <p class="title is-6" v-text="item.item.name" />
- <p
- class="subtitle is-7 has-text-grey has-text-weight-bold"
- v-text="item.item.artist"
- />
- <p
- v-if="item.item.date_released && item.item.media_kind === 'music'"
- class="subtitle is-7 has-text-grey"
- v-text="$filters.date(item.item.date_released)"
- />
+ <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="has-text-grey has-text-weight-bold"
+ v-text="item.item.artist"
+ />
+ <div
+ v-if="item.item.date_released && item.item.media_kind === 'music'"
+ class="has-text-grey"
+ v-text="$filters.date(item.item.date_released)"
+ />
+ </div>
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)">
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index 2f2dfda0..00834763 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -1,6 +1,9 @@
<template>
<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
v-if="settingsStore.show_cover_artwork_in_album_lists"
class="media-left"
@@ -12,18 +15,18 @@
class="fd-has-shadow fd-cover fd-cover-small-image"
/>
</div>
- <div class="media-content is-clipped">
- <p class="title is-6" v-text="item.name" />
- <p
- class="subtitle is-7 has-text-grey has-text-weight-bold"
- v-text="item.artists[0]?.name"
- />
- <p
- class="subtitle is-7 has-text-grey"
- v-text="
- [item.album_type, $filters.date(item.release_date)].join(', ')
- "
- />
+ <div class="media-content">
+ <div class="content is-small">
+ <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.artists[0]?.name"
+ />
+ <div
+ class="has-text-grey"
+ v-text="$filters.date(item.release_date)"
+ />
+ </div>
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(item)">
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index 16ff8593..268754ab 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -9,8 +9,12 @@
/>
</div>
</div>
- <div v-else class="media is-align-items-center" @click="open(item.item)">
- <div class="media-content is-clickable is-clipped">
+ <div
+ 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" />
</div>
<div class="media-right">
diff --git a/web-src/src/components/ListArtistsSpotify.vue b/web-src/src/components/ListArtistsSpotify.vue
index d8fcbf21..9010d0b7 100644
--- a/web-src/src/components/ListArtistsSpotify.vue
+++ b/web-src/src/components/ListArtistsSpotify.vue
@@ -1,7 +1,7 @@
<template>
<template v-for="item in items" :key="item.id">
- <div class="media is-align-items-center">
- <div class="media-content is-clickable is-clipped" @click="open(item)">
+ <div class="media is-align-items-center mb-0">
+ <div class="media-content is-clickable" @click="open(item)">
<p class="title is-6" v-text="item.name" />
</div>
<div class="media-right">
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index e87fe36f..59e4b403 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -9,8 +9,12 @@
/>
</div>
</div>
- <div v-else class="media is-align-items-center" @click="open(item.item)">
- <div class="media-content is-clickable is-clipped">
+ <div
+ 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" />
</div>
<div class="media-right">
diff --git a/web-src/src/components/ListDirectories.vue b/web-src/src/components/ListDirectories.vue
index cc8149ef..211ddd61 100644
--- a/web-src/src/components/ListDirectories.vue
+++ b/web-src/src/components/ListDirectories.vue
@@ -1,5 +1,5 @@
<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
class="icon media-left is-clickable"
name="chevron-left"
@@ -21,9 +21,12 @@
</div>
</div>
<template v-for="item in items" :key="item.path">
- <div class="media is-align-items-center" @click="open(item)">
- <mdicon class="media-left is-clickable icon" name="folder" />
- <div class="media-content is-clickable is-clipped">
+ <div
+ class="media is-align-items-center is-clickable mb-0"
+ @click="open(item)"
+ >
+ <mdicon class="media-left icon" name="folder" />
+ <div class="media-content">
<p class="title is-6" v-text="item.name" />
</div>
<div class="media-right">
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index 90fbe623..5b496fb8 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -9,8 +9,12 @@
/>
</div>
</div>
- <div v-else class="media is-align-items-center" @click="open(item.item)">
- <div class="media-content is-clickable is-clipped">
+ <div
+ 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" />
</div>
<div class="media-right">
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index 1c924ca9..3c9f21cf 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -1,8 +1,11 @@
<template>
<template v-for="item in items" :key="item.itemId">
- <div class="media is-align-items-center" @click="open(item.item)">
- <mdicon class="media-left is-clickable icon" :name="icon(item.item)" />
- <div class="media-content is-clickable is-clipped">
+ <div
+ class="media is-align-items-center is-clickable mb-0"
+ @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" />
</div>
<div class="media-right">
diff --git a/web-src/src/components/ListPlaylistsSpotify.vue b/web-src/src/components/ListPlaylistsSpotify.vue
index 8d507165..7ecec34e 100644
--- a/web-src/src/components/ListPlaylistsSpotify.vue
+++ b/web-src/src/components/ListPlaylistsSpotify.vue
@@ -1,9 +1,14 @@
<template>
<template v-for="item in items" :key="item.id">
- <div class="media is-align-items-center">
- <div class="media-content is-clickable is-clipped" @click="open(item)">
- <p class="title is-6" v-text="item.name" />
- <p class="subtitle is-7" v-text="item.owner.display_name" />
+ <div class="media is-align-items-center mb-0">
+ <div class="media-content is-clickable" @click="open(item)">
+ <div class="content is-small">
+ <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 class="media-right">
<a @click.prevent.stop="open_dialog(item)">
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index 1ad689cb..49029f6c 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -9,35 +9,33 @@
</div>
<div
v-else
- class="media is-align-items-center"
+ class="media is-align-items-center is-clickable mb-0"
:class="{ 'with-progress': show_progress }"
@click="play(item.item)"
>
- <mdicon
- v-if="show_icon"
- class="media-left icon is-clickable"
- name="file-outline"
- />
- <div class="media-content is-clipped">
- <p
- class="title is-6"
- :class="{
- 'has-text-grey':
- item.item.media_kind === 'podcast' && item.item.play_count > 0
- }"
- v-text="item.item.title"
- />
- <p
- class="subtitle is-7 has-text-grey has-text-weight-bold"
- v-text="item.item.artist"
- />
- <p class="subtitle is-7 has-text-grey" v-text="item.item.album" />
- <progress
- v-if="show_progress && item.item.seek_ms > 0"
- class="progress is-info"
- :max="item.item.length_ms"
- :value="item.item.seek_ms"
- />
+ <mdicon v-if="show_icon" class="media-left icon" name="file-outline" />
+ <div class="media-content">
+ <div class="content is-small">
+ <div
+ class="is-size-6 has-text-weight-bold"
+ :class="{
+ 'has-text-grey':
+ item.item.media_kind === 'podcast' && item.item.play_count > 0
+ }"
+ v-text="item.item.title"
+ />
+ <div
+ class="has-text-weight-bold has-text-grey"
+ v-text="item.item.artist"
+ />
+ <div class="has-text-grey" v-text="item.item.album" />
+ <progress
+ v-if="show_progress && item.item.seek_ms > 0"
+ class="progress is-info"
+ :max="item.item.length_ms"
+ :value="item.item.seek_ms"
+ />
+ </div>
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)">
diff --git a/web-src/src/components/ListTracksSpotify.vue b/web-src/src/components/ListTracksSpotify.vue
index aa96bb6d..e0fc88b0 100644
--- a/web-src/src/components/ListTracksSpotify.vue
+++ b/web-src/src/components/ListTracksSpotify.vue
@@ -1,6 +1,6 @@
<template>
<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"
:class="{
@@ -9,31 +9,33 @@
}"
@click="play(item)"
>
- <p
- class="title is-6"
- :class="{ 'has-text-grey-light': !item.is_playable }"
- v-text="item.name"
- />
- <p
- class="subtitle is-7 has-text-weight-bold"
- :class="{
- 'has-text-grey': item.is_playable,
- 'has-text-grey-light': !item.is_playable
- }"
- 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">
- (<span v-text="$t('list.spotify.not-playable-track')" />
- <span
- v-if="item.restrictions?.reason"
- v-text="
- $t('list.spotify.restriction-reason', {
- reason: item.restrictions.reason
- })
- "
- />)
- </p>
+ <div class="content is-small">
+ <div
+ class="is-size-6 has-text-weight-bold"
+ :class="{ 'has-text-grey-light': !item.is_playable }"
+ v-text="item.name"
+ />
+ <div
+ class="has-text-weight-bold"
+ :class="{
+ 'has-text-grey': item.is_playable,
+ 'has-text-grey-light': !item.is_playable
+ }"
+ v-text="item.artists[0].name"
+ />
+ <div class="has-text-grey" v-text="item.album.name" />
+ <div v-if="!item.is_playable" class="has-text-grey">
+ (<span v-text="$t('list.spotify.not-playable-track')" />
+ <span
+ v-if="item.restrictions?.reason"
+ v-text="
+ $t('list.spotify.restriction-reason', {
+ reason: item.restrictions.reason
+ })
+ "
+ />)
+ </div>
+ </div>
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(item)">