From 2d0747dbe9f5ae7631f66d77ab9124a1d09d1127 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 1 Jan 2025 17:36:09 +0100
Subject: [PATCH] [web] Fix spacing in lists of items

---
 web-src/src/components/ListAlbums.vue         | 33 +++++++-----
 web-src/src/components/ListAlbumsSpotify.vue  | 29 +++++-----
 web-src/src/components/ListArtists.vue        |  8 ++-
 web-src/src/components/ListArtistsSpotify.vue |  4 +-
 web-src/src/components/ListComposers.vue      |  8 ++-
 web-src/src/components/ListDirectories.vue    | 11 ++--
 web-src/src/components/ListGenres.vue         |  8 ++-
 web-src/src/components/ListPlaylists.vue      |  9 ++--
 .../src/components/ListPlaylistsSpotify.vue   | 13 +++--
 web-src/src/components/ListTracks.vue         | 50 +++++++++--------
 web-src/src/components/ListTracksSpotify.vue  | 54 ++++++++++---------
 11 files changed, 129 insertions(+), 98 deletions(-)

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)">