From 44896d82f4dea0508b6d2ba475284c43ba227a71 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 1 Jan 2025 21:28:30 +0100
Subject: [PATCH] [web] Simplify the display of lists

---
 web-src/src/components/ListAlbums.vue         | 22 ++++----
 web-src/src/components/ListAlbumsSpotify.vue  | 20 ++++----
 .../src/components/ListPlaylistsSpotify.vue   | 19 +++----
 web-src/src/components/ListTracks.vue         | 40 +++++++--------
 web-src/src/components/ListTracksSpotify.vue  | 50 +++++++++----------
 5 files changed, 72 insertions(+), 79 deletions(-)

diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 9050c2d5..2203f92c 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -20,18 +20,16 @@
         class="media-left fd-has-shadow fd-cover fd-cover-small-image"
       />
       <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 class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
+        <div
+          class="is-size-7 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="is-size-7 has-text-grey"
+          v-text="$filters.date(item.item.date_released)"
+        />
       </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 00834763..d42528b3 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -16,17 +16,15 @@
         />
       </div>
       <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 class="is-size-6 has-text-weight-bold" v-text="item.name" />
+        <div
+          class="is-size-7 has-text-weight-bold has-text-grey"
+          v-text="item.artists[0]?.name"
+        />
+        <div
+          class="is-size-7 has-text-grey"
+          v-text="$filters.date(item.release_date)"
+        />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
diff --git a/web-src/src/components/ListPlaylistsSpotify.vue b/web-src/src/components/ListPlaylistsSpotify.vue
index 7ecec34e..f4f76697 100644
--- a/web-src/src/components/ListPlaylistsSpotify.vue
+++ b/web-src/src/components/ListPlaylistsSpotify.vue
@@ -1,14 +1,15 @@
 <template>
   <template v-for="item in items" :key="item.id">
-    <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
+      class="media is-align-items-center is-clickable mb-0"
+      @click="open(item)"
+    >
+      <div class="media-content">
+        <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
+        <div
+          class="is-size-7 has-text-weight-bold has-text-grey"
+          v-text="item.owner.display_name"
+        />
       </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 49029f6c..e2b081fd 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -15,27 +15,25 @@
     >
       <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
+          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="is-size-7 has-text-weight-bold has-text-grey"
+          v-text="item.item.artist"
+        />
+        <div class="is-size-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"
+        />
       </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 e0fc88b0..ac817f39 100644
--- a/web-src/src/components/ListTracksSpotify.vue
+++ b/web-src/src/components/ListTracksSpotify.vue
@@ -9,32 +9,30 @@
         }"
         @click="play(item)"
       >
-        <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
+          class="is-size-6 has-text-weight-bold"
+          :class="{ 'has-text-grey-light': !item.is_playable }"
+          v-text="item.name"
+        />
+        <div
+          class="is-size-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"
+        />
+        <div class="is-size-7 has-text-grey" v-text="item.album.name" />
+        <div v-if="!item.is_playable" class="is-size-7 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 class="media-right">