[web] Fix cover artwork display on different pages #1506

On some pages, the cover artwork was overlapping or not displayed properly. Moreover, the use of the component CoverArtwork has been generalised.

web-src/src/pages/PageAlbum.vue

@@ -19,14 +19,13 @@
       </div>
     </template>
     <template #heading-right>
-      <p class="image is-square fd-has-shadow fd-has-action">
-        <cover-artwork
-          :artwork_url="album.artwork_url"
-          :artist="album.artist"
-          :album="album.name"
-          @click="show_album_details_modal = true"
-        />
-      </p>
+      <cover-artwork
+        :artwork_url="album.artwork_url"
+        :artist="album.artist"
+        :album="album.name"
+        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
+        @click="show_album_details_modal = true"
+      />
     </template>
     <template #content>
       <p

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -19,14 +19,13 @@
       </div>
     </template>
     <template #heading-right>
-      <p class="image is-square fd-has-shadow fd-has-action">
-        <cover-artwork
-          :artwork_url="album.artwork_url"
-          :artist="album.artist"
-          :album="album.name"
-          @click="show_album_details_modal = true"
-        />
-      </p>
+      <cover-artwork
+        :artwork_url="album.artwork_url"
+        :artist="album.artist"
+        :album="album.name"
+        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
+        @click="show_album_details_modal = true"
+      />
     </template>
     <template #content>
       <p
@@ -101,11 +100,6 @@ export default {
 
     play: function () {
       webapi.player_play_uri(this.album.uri, false)
-    },
-
-    open_dialog: function (track) {
-      this.selected_track = track
-      this.show_details_modal = true
     }
   }
 }

web-src/src/pages/PageNowPlaying.vue

@@ -1,19 +1,17 @@
 <template>
   <section>
     <div v-if="now_playing.id > 0" class="fd-is-fullheight">
-      <div class="fd-is-expanded">
-        <cover-artwork
-          :artwork_url="now_playing.artwork_url"
-          :artist="now_playing.artist"
-          :album="now_playing.album"
-          class="fd-cover-image fd-has-action"
-          @click="open_dialog(now_playing)"
-        />
-      </div>
+      <cover-artwork
+        :artwork_url="now_playing.artwork_url"
+        :artist="now_playing.artist"
+        :album="now_playing.album"
+        class="fd-has-action fd-has-shadow fd-is-expanded fd-cover fd-cover-big-image"
+        @click="open_dialog(now_playing)"
+      />
       <div class="fd-has-padding-left-right">
         <div class="container has-text-centered">
           <p class="control has-text-centered fd-progress-now-playing">
-            <Slider
+            <slider
               ref="slider"
               v-model="item_progress_ms"
               :min="0"

web-src/src/pages/SpotifyPageAlbum.vue

@@ -23,14 +23,13 @@
       </div>
     </template>
     <template #heading-right>
-      <p class="image is-square fd-has-shadow fd-has-action">
-        <cover-artwork
-          :artwork_url="artwork_url"
-          :artist="album.artist"
-          :album="album.name"
-          @click="show_album_details_modal = true"
-        />
-      </p>
+      <cover-artwork
+        :artwork_url="artwork_url"
+        :artist="album.artist"
+        :album="album.name"
+        class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
+        @click="show_album_details_modal = true"
+      />
     </template>
     <template #content>
       <p

web-src/src/pages/SpotifyPageArtist.vue

@@ -29,15 +29,14 @@
         @click="open_album(album)"
       >
         <template v-if="is_visible_artwork" #artwork>
-          <p class="image is-64x64 fd-has-shadow fd-has-action">
-            <cover-artwork
-              :artwork_url="artwork_url(album)"
-              :artist="album.artist"
-              :album="album.name"
-              :maxwidth="64"
-              :maxheight="64"
-            />
-          </p>
+          <cover-artwork
+            :artwork_url="artwork_url(album)"
+            :artist="album.artist"
+            :album="album.name"
+            class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+            :maxwidth="64"
+            :maxheight="64"
+          />
         </template>
         <template #actions>
           <a @click.prevent.stop="open_dialog(album)">

web-src/src/pages/SpotifyPageBrowse.vue

@@ -14,15 +14,14 @@
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="artwork_url(album)"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64"
-              />
-            </p>
+            <cover-artwork
+              :artwork_url="artwork_url(album)"
+              :artist="album.artist"
+              :album="album.name"
+              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+              :maxwidth="64"
+              :maxheight="64"
+            />
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">

web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@@ -13,15 +13,14 @@
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="artwork_url(album)"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64"
-              />
-            </p>
+            <cover-artwork
+              :artwork_url="artwork_url(album)"
+              :artist="album.artist"
+              :album="album.name"
+              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+              :maxwidth="64"
+              :maxheight="64"
+            />
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">

web-src/src/pages/SpotifyPageSearch.vue

@@ -157,15 +157,14 @@
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="artwork_url(album)"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64"
-              />
-            </p>
+            <cover-artwork
+              :artwork_url="artwork_url(album)"
+              :artist="album.artist"
+              :album="album.name"
+              class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
+              :maxwidth="64"
+              :maxheight="64"
+            />
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">