From 892ce26f446b4d5df8b24db74b3e59ebc1960c2d Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 24 Jun 2023 10:56:00 +0200
Subject: [PATCH] [web] Fix spacing of elements in the pages with hero content

Spacing is now identical to the former spacing.
---
 web-src/src/pages/PageAlbum.vue           | 84 +++++++++++----------
 web-src/src/pages/PageAudiobooksAlbum.vue | 92 ++++++++++++-----------
 web-src/src/templates/ContentWithHero.vue | 58 +++++++-------
 3 files changed, 120 insertions(+), 114 deletions(-)

diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 373dae2a..2f79aca7 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -1,45 +1,49 @@
 <template>
-  <content-with-hero>
-    <template #heading-left>
-      <h1 class="title is-5" v-text="album.name" />
-      <h2 class="subtitle is-6 has-text-link has-text-weight-normal">
-        <a class="has-text-link" @click="open_artist" v-text="album.artist" />
-      </h2>
-      <div class="buttons fd-is-centered-mobile fd-has-margin-top">
-        <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><mdicon name="shuffle" size="16" /></span>
-          <span v-text="$t('page.album.shuffle')" />
-        </a>
-        <a
-          class="button is-small is-light is-rounded"
+  <div class="fd-page">
+    <content-with-hero>
+      <template #heading-left>
+        <h1 class="title is-5" v-text="album.name" />
+        <h2 class="subtitle is-6 has-text-link has-text-weight-normal">
+          <a class="has-text-link" @click="open_artist" v-text="album.artist" />
+        </h2>
+        <div class="buttons fd-is-centered-mobile fd-has-margin-top">
+          <a class="button is-small is-dark is-rounded" @click="play">
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <span v-text="$t('page.album.shuffle')" />
+          </a>
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_album_details_modal = true"
+          >
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
+          </a>
+        </div>
+      </template>
+      <template #heading-right>
+        <cover-artwork
+          :artwork_url="album.artwork_url"
+          :artist="album.artist"
+          :album="album.name"
+          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
           @click="show_album_details_modal = true"
-        >
-          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-        </a>
-      </div>
-    </template>
-    <template #heading-right>
-      <cover-artwork
-        :artwork_url="album.artwork_url"
-        :artist="album.artist"
-        :album="album.name"
-        class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
-        @click="show_album_details_modal = true"
-      />
-    </template>
-    <template #content>
-      <p
-        class="heading is-7 has-text-centered-mobile fd-has-margin-top"
-        v-text="$t('page.album.track-count', { count: album.track_count })"
-      />
-      <list-tracks :tracks="tracks" :uris="album.uri" />
-      <modal-dialog-album
-        :show="show_album_details_modal"
-        :album="album"
-        @close="show_album_details_modal = false"
-      />
-    </template>
-  </content-with-hero>
+        />
+      </template>
+      <template #content>
+        <p
+          class="heading is-7 has-text-centered-mobile fd-has-margin-top"
+          v-text="$t('page.album.track-count', { count: album.track_count })"
+        />
+        <list-tracks :tracks="tracks" :uris="album.uri" />
+        <modal-dialog-album
+          :show="show_album_details_modal"
+          :album="album"
+          @close="show_album_details_modal = false"
+        />
+      </template>
+    </content-with-hero>
+  </div>
 </template>
 
 <script>
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index c777daeb..dde2e6e0 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -1,48 +1,54 @@
 <template>
-  <content-with-hero>
-    <template #heading-left>
-      <h1 class="title is-5" v-text="album.name" />
-      <h2 class="subtitle is-6 has-text-link has-text-weight-normal">
-        <a class="has-text-link" @click="open_artist" v-text="album.artist" />
-      </h2>
-      <div class="buttons fd-is-centered-mobile fd-has-margin-top">
-        <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><mdicon name="play" size="16" /></span>
-          <span v-text="$t('page.audiobooks.album.play')" />
-        </a>
-        <a
-          class="button is-small is-light is-rounded"
+  <div class="fd-page">
+    <content-with-hero>
+      <template #heading-left>
+        <h1 class="title is-5" v-text="album.name" />
+        <h2 class="subtitle is-6 has-text-link has-text-weight-normal">
+          <a class="has-text-link" @click="open_artist" v-text="album.artist" />
+        </h2>
+        <div class="buttons fd-is-centered-mobile fd-has-margin-top">
+          <a class="button is-small is-dark is-rounded" @click="play">
+            <span class="icon"><mdicon name="play" size="16" /></span>
+            <span v-text="$t('page.audiobooks.album.play')" />
+          </a>
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_album_details_modal = true"
+          >
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
+          </a>
+        </div>
+      </template>
+      <template #heading-right>
+        <cover-artwork
+          :artwork_url="album.artwork_url"
+          :artist="album.artist"
+          :album="album.name"
+          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
           @click="show_album_details_modal = true"
-        >
-          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-        </a>
-      </div>
-    </template>
-    <template #heading-right>
-      <cover-artwork
-        :artwork_url="album.artwork_url"
-        :artist="album.artist"
-        :album="album.name"
-        class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
-        @click="show_album_details_modal = true"
-      />
-    </template>
-    <template #content>
-      <p
-        class="heading is-7 has-text-centered-mobile fd-has-margin-top"
-        v-text="
-          $t('page.audiobooks.album.track-count', { count: album.track_count })
-        "
-      />
-      <list-tracks :tracks="tracks" :uris="album.uri" />
-      <modal-dialog-album
-        :show="show_album_details_modal"
-        :album="album"
-        :media_kind="'audiobook'"
-        @close="show_album_details_modal = false"
-      />
-    </template>
-  </content-with-hero>
+        />
+      </template>
+      <template #content>
+        <p
+          class="heading is-7 has-text-centered-mobile fd-has-margin-top"
+          v-text="
+            $t('page.audiobooks.album.track-count', {
+              count: album.track_count
+            })
+          "
+        />
+        <list-tracks :tracks="tracks" :uris="album.uri" />
+        <modal-dialog-album
+          :show="show_album_details_modal"
+          :album="album"
+          :media_kind="'audiobook'"
+          @close="show_album_details_modal = false"
+        />
+      </template>
+    </content-with-hero>
+  </div>
 </template>
 
 <script>
diff --git a/web-src/src/templates/ContentWithHero.vue b/web-src/src/templates/ContentWithHero.vue
index 7734c517..84c131c5 100644
--- a/web-src/src/templates/ContentWithHero.vue
+++ b/web-src/src/templates/ContentWithHero.vue
@@ -1,42 +1,38 @@
 <template>
-  <div class="fd-page">
-    <section class="hero is-light is-bold">
-      <div class="hero-body">
-        <div class="container">
-          <div class="columns is-centered">
-            <div class="column is-four-fifths">
-              <div class="columns" style="flex-direction: row-reverse">
-                <div class="column fd-has-cover">
-                  <!-- Slot heading right -->
-                  <slot name="heading-right" />
-                </div>
-                <div
-                  class="column m-auto is-three-fifths has-text-centered-mobile"
-                >
-                  <!-- Slot heading left -->
-                  <slot name="heading-left" />
-                </div>
+  <section class="hero is-light is-bold">
+    <div class="hero-body">
+      <div class="container">
+        <div class="columns is-centered">
+          <div class="column is-four-fifths">
+            <div class="columns" style="flex-direction: row-reverse">
+              <div class="column fd-has-cover">
+                <!-- Slot heading right -->
+                <slot name="heading-right" />
+              </div>
+              <div
+                class="column m-auto is-three-fifths has-text-centered-mobile"
+              >
+                <!-- Slot heading left -->
+                <slot name="heading-left" />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </section>
-    <section class="section">
-      <div class="container">
-        <div class="columns is-centered">
-          <div class="column is-four-fifths">
-            <!-- Slot content -->
-            <slot name="content" />
-            <div style="margin-top: 16px">
-              <!-- Slot footer -->
-              <slot name="footer" />
-            </div>
-          </div>
+    </div>
+  </section>
+  <section class="section pt-0">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-four-fifths">
+          <!-- Slot content -->
+          <slot name="content" />
+          <!-- Slot footer -->
+          <slot name="footer" />
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
 
 <script></script>