From efe5f24049f3161bdf08dd0586d12940dc91e361 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 1 Jul 2023 09:09:16 +0200
Subject: [PATCH] [web] Fix vertical alignment of items presented in lists

Items presented in lists are not vertically centered.
---
 web-src/src/components/ListAlbums.vue              | 10 +++++++---
 web-src/src/components/ListArtists.vue             |  2 +-
 web-src/src/components/ListComposers.vue           |  2 +-
 web-src/src/components/ListDirectories.vue         |  4 ++--
 web-src/src/components/ListGenres.vue              |  6 +++++-
 web-src/src/components/ListItemQueueItem.vue       |  5 ++++-
 web-src/src/components/ListPlaylists.vue           |  2 +-
 web-src/src/components/ListTracks.vue              |  2 +-
 web-src/src/components/SpotifyListItemAlbum.vue    |  2 +-
 web-src/src/components/SpotifyListItemArtist.vue   |  2 +-
 web-src/src/components/SpotifyListItemPlaylist.vue |  2 +-
 web-src/src/components/SpotifyListItemTrack.vue    |  2 +-
 12 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index e1e8a782..8916ba1f 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -7,7 +7,11 @@
         v-text="album.groupKey"
       />
     </div>
-    <div v-else-if="album.isItem" class="media" @click="open_album(album.item)">
+    <div
+      v-else-if="album.isItem"
+      class="media is-align-items-center"
+      @click="open_album(album.item)"
+    >
       <div v-if="is_visible_artwork" class="media-left">
         <cover-artwork
           :artwork_url="album.item.artwork_url"
@@ -18,7 +22,7 @@
         />
       </div>
       <div class="media-content is-clickable is-clipped">
-        <div style="margin-top: 0.7rem">
+        <div>
           <h1 class="title is-6" v-text="album.item.name" />
           <h2 class="subtitle is-7 has-text-grey">
             <b v-text="album.item.artist" />
@@ -30,7 +34,7 @@
           />
         </div>
       </div>
-      <div class="media-right" style="padding-top: 0.7rem">
+      <div class="media-right">
         <a @click.prevent.stop="open_dialog(album.item)">
           <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
         </a>
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index 825a48fb..5f22b8bb 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -11,7 +11,7 @@
     </div>
     <div
       v-else-if="artist.isItem"
-      class="media"
+      class="media is-align-items-center"
       @click="open_artist(artist.item)"
     >
       <div class="media-content is-clickable is-clipped">
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index 298e7487..ee3e0281 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -11,7 +11,7 @@
     </div>
     <div
       v-else-if="composer.isItem"
-      class="media"
+      class="media is-align-items-center"
       @click="open_composer(composer.item)"
     >
       <div class="media-content is-clickable is-clipped">
diff --git a/web-src/src/components/ListDirectories.vue b/web-src/src/components/ListDirectories.vue
index f1a715bf..d8410583 100644
--- a/web-src/src/components/ListDirectories.vue
+++ b/web-src/src/components/ListDirectories.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$route.query.directory"
-    class="media"
+    class="media is-align-items-center"
     @click="open_parent_directory()"
   >
     <figure class="media-left is-clickable">
@@ -15,7 +15,7 @@
     </div>
   </div>
   <template v-for="directory in directories" :key="directory.path">
-    <div class="media" @click="open_directory(directory)">
+    <div class="media is-align-items-center" @click="open_directory(directory)">
       <figure class="media-left is-clickable">
         <mdicon class="icon" name="folder" size="16" />
       </figure>
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index d99c3d74..2cf53f17 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -9,7 +9,11 @@
         />
       </div>
     </div>
-    <div v-else-if="genre.isItem" class="media" @click="open_genre(genre.item)">
+    <div
+      v-else-if="genre.isItem"
+      class="media is-align-items-center"
+      @click="open_genre(genre.item)"
+    >
       <div class="media-content is-clickable is-clipped">
         <h1 class="title is-6" v-text="genre.item.name" />
       </div>
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index 5f2306a0..f8808e7f 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="is_next || !show_only_next_items" class="media">
+  <div
+    v-if="is_next || !show_only_next_items"
+    class="media is-align-items-center"
+  >
     <div v-if="edit_mode" class="media-left">
       <mdicon
         class="icon has-text-grey fd-is-movable handle"
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index a05d78a5..3617d959 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -2,7 +2,7 @@
   <div
     v-for="playlist in playlists"
     :key="playlist.itemId"
-    class="media"
+    class="media is-align-items-center"
     :playlist="playlist"
     @click="open_playlist(playlist.item)"
   >
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index f04ca1e4..bd1d05fa 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -9,7 +9,7 @@
     </div>
     <div
       v-else-if="track.isItem"
-      class="media"
+      class="media is-align-items-center"
       :class="{ 'with-progress': show_progress }"
       @click="play_track(index, track.item)"
     >
diff --git a/web-src/src/components/SpotifyListItemAlbum.vue b/web-src/src/components/SpotifyListItemAlbum.vue
index 61a4a482..0a6f03ed 100644
--- a/web-src/src/components/SpotifyListItemAlbum.vue
+++ b/web-src/src/components/SpotifyListItemAlbum.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media is-align-items-center">
     <div v-if="$slots['artwork']" class="media-left is-clickable">
       <slot name="artwork" />
     </div>
diff --git a/web-src/src/components/SpotifyListItemArtist.vue b/web-src/src/components/SpotifyListItemArtist.vue
index 367d2962..fa28e8a3 100644
--- a/web-src/src/components/SpotifyListItemArtist.vue
+++ b/web-src/src/components/SpotifyListItemArtist.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media is-align-items-center">
     <div class="media-content is-clickable is-clipped" @click="open_artist">
       <h1 class="title is-6" v-text="artist.name" />
     </div>
diff --git a/web-src/src/components/SpotifyListItemPlaylist.vue b/web-src/src/components/SpotifyListItemPlaylist.vue
index aed2dad5..594e0353 100644
--- a/web-src/src/components/SpotifyListItemPlaylist.vue
+++ b/web-src/src/components/SpotifyListItemPlaylist.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media is-align-items-center">
     <div class="media-content is-clickable is-clipped" @click="open_playlist">
       <h1 class="title is-6" v-text="playlist.name" />
       <h2 class="subtitle is-7" v-text="playlist.owner.display_name" />
diff --git a/web-src/src/components/SpotifyListItemTrack.vue b/web-src/src/components/SpotifyListItemTrack.vue
index 854d0956..7e6ee706 100644
--- a/web-src/src/components/SpotifyListItemTrack.vue
+++ b/web-src/src/components/SpotifyListItemTrack.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media is-align-items-center">
     <div
       class="media-content is-clipped"
       :class="{