From 1c65ba1ee2ea88069e1aed52867a3413da3dc1c3 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Tue, 30 Jun 2020 08:43:06 +0200
Subject: [PATCH] [web-src] Update Spotify album page spacing

Also make cover artwork clickable to open the album details dialog
---
 web-src/src/pages/PageAlbum.vue        |  5 +++--
 web-src/src/pages/SpotifyPageAlbum.vue | 13 ++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 5c98298e..87cabdc3 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -14,11 +14,12 @@
       </div>
     </template>
     <template slot="heading-right">
-      <p class="image is-square fd-has-shadow">
+      <p class="image is-square fd-has-shadow fd-has-action">
         <cover-artwork
           :artwork_url="album.artwork_url"
           :artist="album.artist"
-          :album="album.name" />
+          :album="album.name"
+          @click="show_album_details_modal = true" />
       </p>
     </template>
     <template slot="content">
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/SpotifyPageAlbum.vue
index 01dcb121..b646989d 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/web-src/src/pages/SpotifyPageAlbum.vue
@@ -1,9 +1,8 @@
 <template>
   <content-with-hero>
     <template slot="heading-left">
-      <h1 class="title is-4 fd-has-margin-top">{{ album.name }}</h1>
-      <h2 class="subtitle is-4 has-text-link has-text-weight-normal"><a class="has-text-link" @click="open_artist">{{ album.artists[0].name }}</a></h2>
-      <p class="heading has-text-centered-mobile">{{ album.tracks.total }} tracks</p>
+      <h1 class="title is-5">{{ album.name }}</h1>
+      <h2 class="subtitle is-6 has-text-link has-text-weight-normal"><a class="has-text-link" @click="open_artist">{{ album.artists[0].name }}</a></h2>
 
       <div class="buttons fd-is-centered-mobile fd-has-margin-top">
         <a class="button is-small is-dark is-rounded" @click="play">
@@ -14,15 +13,19 @@
         </a>
       </div>
     </template>
+
     <template slot="heading-right">
-      <p class="image is-square fd-has-shadow">
+      <p class="image is-square fd-has-shadow fd-has-action">
         <cover-artwork
           :artwork_url="artwork_url"
           :artist="album.artist"
-          :album="album.name" />
+          :album="album.name"
+          @click="show_album_details_modal = true" />
       </p>
     </template>
+
     <template slot="content">
+      <p class="heading is-7 has-text-centered-mobile fd-has-margin-top">{{ album.tracks.total }} tracks</p>
       <spotify-list-item-track v-for="(track, index) in album.tracks.items" :key="track.id" :track="track" :position="index" :album="album" :context_uri="album.uri">
         <template slot="actions">
           <a @click="open_track_dialog(track)">