[web] Fix spacing of pages due to changes in the Now Playing Page

The top and bottom spacing for all the pages have been streamlined. Moreover, CSS styles have been reduced.

web-src/src/components/TabsSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <section v-if="spotify_enabled" class="section pb-0">
+  <section v-if="spotify_enabled" class="section">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">

web-src/src/mystyles.scss

@@ -72,14 +72,6 @@ a.navbar-item {
   width: 100%;
 }
 
-section.fd-tabs-section + section.fd-content {
-  margin-top: 24px;
-}
-
-section.hero + section.fd-content {
-  padding-top: 0;
-}
-
 .fd-progress-bar {
   top: 52px !important;
 }
@@ -103,19 +95,6 @@ section.hero + section.fd-content {
   min-height: calc(100vh - 3.25rem - 3.25rem);
 }
 
-/* Now playing page */
-.fd-is-fullheight {
-  height: calc(100vh - 3.25rem - 3.25rem);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.fd-is-fullheight .fd-is-expanded {
-  padding: 1.5rem;
-  overflow: hidden;
-}
-
 .fd-cover {
   align-items: center;
   display: flex;

web-src/src/pages/PageAbout.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <section class="section fd-page">
+  <div class="fd-page">
+    <section class="section">
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths has-text-centered-mobile">

web-src/src/pages/PageArtist.vue

@@ -1,57 +1,65 @@
 <template>
-  <content-with-heading>
-    <template #options>
-      <div class="columns">
-        <div class="column">
-          <p
-            class="heading"
-            style="margin-bottom: 24px"
-            v-text="$t('page.artist.sort-by.title')"
-          />
-          <dropdown-menu
-            v-model="selected_groupby_option_id"
-            :options="groupby_options"
-          />
+  <div class="fd-page">
+    <content-with-heading>
+      <template #options>
+        <div class="columns">
+          <div class="column">
+            <p
+              class="heading"
+              style="margin-bottom: 24px"
+              v-text="$t('page.artist.sort-by.title')"
+            />
+            <dropdown-menu
+              v-model="selected_groupby_option_id"
+              :options="groupby_options"
+            />
+          </div>
         </div>
-      </div>
-    </template>
-    <template #heading-left>
-      <p class="title is-4" v-text="artist.name" />
-    </template>
-    <template #heading-right>
-      <div class="buttons is-centered">
-        <a
-          class="button is-small is-light is-rounded"
-          @click="show_artist_details_modal = true"
-        >
-          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-        </a>
-        <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.artist.shuffle')" />
-        </a>
-      </div>
-    </template>
-    <template #content>
-      <p class="heading has-text-centered-mobile">
-        <span
-          v-text="$t('page.artist.album-count', { count: artist.album_count })"
+      </template>
+      <template #heading-left>
+        <p class="title is-4" v-text="artist.name" />
+      </template>
+      <template #heading-right>
+        <div class="buttons is-centered">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_artist_details_modal = true"
+          >
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
+          </a>
+          <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.artist.shuffle')" />
+          </a>
+        </div>
+      </template>
+      <template #content>
+        <p class="heading has-text-centered-mobile">
+          <span
+            v-text="
+              $t('page.artist.album-count', { count: artist.album_count })
+            "
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            class="has-text-link"
+            @click="open_tracks"
+            v-text="
+              $t('page.artist.track-count', { count: artist.track_count })
+            "
+          />
+        </p>
+        <list-albums :albums="albums" :hide_group_title="true" />
+        <modal-dialog-artist
+          :show="show_artist_details_modal"
+          :artist="artist"
+          @close="show_artist_details_modal = false"
         />
-        <span>&nbsp;|&nbsp;</span>
-        <a
-          class="has-text-link"
-          @click="open_tracks"
-          v-text="$t('page.artist.track-count', { count: artist.track_count })"
-        />
-      </p>
-      <list-albums :albums="albums" :hide_group_title="true" />
-      <modal-dialog-artist
-        :show="show_artist_details_modal"
-        :artist="artist"
-        @close="show_artist_details_modal = false"
-      />
-    </template>
-  </content-with-heading>
+      </template>
+    </content-with-heading>
+  </div>
 </template>
 
 <script>

web-src/src/pages/PageArtistTracks.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page">
     <content-with-heading>
       <template #options>
         <index-button-list :index="tracks.indexList" />

web-src/src/pages/PageAudiobooksArtist.vue

@@ -1,39 +1,43 @@
 <template>
-  <content-with-heading>
-    <template #heading-left>
-      <p class="title is-4" v-text="artist.name" />
-    </template>
-    <template #heading-right>
-      <div class="buttons is-centered">
-        <a
-          class="button is-small is-light is-rounded"
-          @click="show_artist_details_modal = true"
-        >
-          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-        </a>
-        <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.artist.play')" />
-        </a>
-      </div>
-    </template>
-    <template #content>
-      <p
-        class="heading has-text-centered-mobile"
-        v-text="
-          $t('page.audiobooks.artist.album-count', {
-            count: artist.album_count
-          })
-        "
-      />
-      <list-albums :albums="albums" />
-      <modal-dialog-artist
-        :show="show_artist_details_modal"
-        :artist="artist"
-        @close="show_artist_details_modal = false"
-      />
-    </template>
-  </content-with-heading>
+  <div class="fd-page">
+    <content-with-heading>
+      <template #heading-left>
+        <p class="title is-4" v-text="artist.name" />
+      </template>
+      <template #heading-right>
+        <div class="buttons is-centered">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_artist_details_modal = true"
+          >
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
+          </a>
+          <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.artist.play')" />
+          </a>
+        </div>
+      </template>
+      <template #content>
+        <p
+          class="heading has-text-centered-mobile"
+          v-text="
+            $t('page.audiobooks.artist.album-count', {
+              count: artist.album_count
+            })
+          "
+        />
+        <list-albums :albums="albums" />
+        <modal-dialog-artist
+          :show="show_artist_details_modal"
+          :artist="artist"
+          @close="show_artist_details_modal = false"
+        />
+      </template>
+    </content-with-heading>
+  </div>
 </template>
 
 <script>

web-src/src/pages/PageComposer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page">
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="composer.name" />

web-src/src/pages/PageComposerTracks.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page">
     <content-with-heading>
       <template #options>
         <index-button-list :index="tracks.indexList" />

web-src/src/pages/PageComposers.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page-with-tabs">
     <tabs-music />
     <content-with-heading>
       <template #options>

web-src/src/pages/PageFiles.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page">
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.files.title')" />

web-src/src/pages/PageGenre.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page">
     <content-with-heading>
       <template #options>
         <index-button-list :index="albums_list.indexList" />

web-src/src/pages/PageGenreTracks.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page">
     <content-with-heading>
       <template #options>
         <index-button-list :index="tracks.indexList" />

web-src/src/pages/PagePlaylist.vue

@@ -1,36 +1,40 @@
 <template>
-  <content-with-heading>
-    <template #heading-left>
-      <div class="title is-4" v-text="playlist.name" />
-    </template>
-    <template #heading-right>
-      <div class="buttons is-centered">
-        <a
-          class="button is-small is-light is-rounded"
-          @click="show_playlist_details_modal = true"
-        >
-          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-        </a>
-        <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.playlist.shuffle')" />
-        </a>
-      </div>
-    </template>
-    <template #content>
-      <p
-        class="heading has-text-centered-mobile"
-        v-text="$t('page.playlist.track-count', { count: tracks.count })"
-      />
-      <list-tracks :tracks="tracks" :uris="uris" />
-      <modal-dialog-playlist
-        :show="show_playlist_details_modal"
-        :playlist="playlist"
-        :uris="uris"
-        @close="show_playlist_details_modal = false"
-      />
-    </template>
-  </content-with-heading>
+  <div class="fd-page">
+    <content-with-heading>
+      <template #heading-left>
+        <div class="title is-4" v-text="playlist.name" />
+      </template>
+      <template #heading-right>
+        <div class="buttons is-centered">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_playlist_details_modal = true"
+          >
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
+          </a>
+          <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.playlist.shuffle')" />
+          </a>
+        </div>
+      </template>
+      <template #content>
+        <p
+          class="heading has-text-centered-mobile"
+          v-text="$t('page.playlist.track-count', { count: tracks.count })"
+        />
+        <list-tracks :tracks="tracks" :uris="uris" />
+        <modal-dialog-playlist
+          :show="show_playlist_details_modal"
+          :playlist="playlist"
+          :uris="uris"
+          @close="show_playlist_details_modal = false"
+        />
+      </template>
+    </content-with-heading>
+  </div>
 </template>
 
 <script>

web-src/src/pages/PagePlaylists.vue

@@ -1,16 +1,18 @@
 <template>
-  <content-with-heading>
-    <template #heading-left>
-      <p class="title is-4" v-text="playlist.name" />
-      <p
-        class="heading"
-        v-text="$t('page.playlists.count', { count: playlists.count })"
-      />
-    </template>
-    <template #content>
-      <list-playlists :playlists="playlists" />
-    </template>
-  </content-with-heading>
+  <div class="fd-page">
+    <content-with-heading>
+      <template #heading-left>
+        <p class="title is-4" v-text="playlist.name" />
+        <p
+          class="heading"
+          v-text="$t('page.playlists.count', { count: playlists.count })"
+        />
+      </template>
+      <template #content>
+        <list-playlists :playlists="playlists" />
+      </template>
+    </content-with-heading>
+  </div>
 </template>
 
 <script>

web-src/src/pages/PagePodcast.vue

@@ -1,58 +1,62 @@
 <template>
-  <content-with-heading>
-    <template #heading-left>
-      <div class="title is-4" v-text="album.name" />
-    </template>
-    <template #heading-right>
-      <div class="buttons is-centered">
-        <a
-          class="button is-small is-light is-rounded"
-          @click="show_details_modal = true"
+  <div class="fd-page">
+    <content-with-heading>
+      <template #heading-left>
+        <div class="title is-4" v-text="album.name" />
+      </template>
+      <template #heading-right>
+        <div class="buttons is-centered">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_details_modal = true"
+          >
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
+          </a>
+          <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.podcast.play')" />
+          </a>
+        </div>
+      </template>
+      <template #content>
+        <p
+          class="heading has-text-centered-mobile"
+          v-text="$t('page.podcast.track-count', { count: album.track_count })"
+        />
+        <list-tracks
+          :tracks="tracks"
+          :show_progress="true"
+          @play-count-changed="reload_tracks"
+        />
+        <modal-dialog-album
+          :show="show_details_modal"
+          :album="album"
+          :media_kind="'podcast'"
+          :new_tracks="new_tracks"
+          @close="show_details_modal = false"
+          @play-count-changed="reload_tracks"
+          @remove-podcast="open_remove_podcast_dialog"
+        />
+        <modal-dialog
+          :show="show_remove_podcast_modal"
+          :title="$t('page.podcast.remove-podcast')"
+          :delete_action="$t('page.podcast.remove')"
+          @close="show_remove_podcast_modal = false"
+          @delete="remove_podcast"
         >
-          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-        </a>
-        <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.podcast.play')" />
-        </a>
-      </div>
-    </template>
-    <template #content>
-      <p
-        class="heading has-text-centered-mobile"
-        v-text="$t('page.podcast.track-count', { count: album.track_count })"
-      />
-      <list-tracks
-        :tracks="tracks"
-        :show_progress="true"
-        @play-count-changed="reload_tracks"
-      />
-      <modal-dialog-album
-        :show="show_details_modal"
-        :album="album"
-        :media_kind="'podcast'"
-        :new_tracks="new_tracks"
-        @close="show_details_modal = false"
-        @play-count-changed="reload_tracks"
-        @remove-podcast="open_remove_podcast_dialog"
-      />
-      <modal-dialog
-        :show="show_remove_podcast_modal"
-        :title="$t('page.podcast.remove-podcast')"
-        :delete_action="$t('page.podcast.remove')"
-        @close="show_remove_podcast_modal = false"
-        @delete="remove_podcast"
-      >
-        <template #modal-content>
-          <p v-text="$t('page.podcast.remove-info-1')" />
-          <p class="is-size-7">
-            (<span v-text="$t('page.podcast.remove-info-2')" />
-            <b v-text="rss_playlist_to_remove.name" />)
-          </p>
-        </template>
-      </modal-dialog>
-    </template>
-  </content-with-heading>
+          <template #modal-content>
+            <p v-text="$t('page.podcast.remove-info-1')" />
+            <p class="is-size-7">
+              (<span v-text="$t('page.podcast.remove-info-2')" />
+              <b v-text="rss_playlist_to_remove.name" />)
+            </p>
+          </template>
+        </modal-dialog>
+      </template>
+    </content-with-heading>
+  </div>
 </template>
 
 <script>

web-src/src/pages/PagePodcasts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page">
     <content-with-heading v-if="new_episodes.items.length > 0">
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.podcasts.new-episodes')" />

web-src/src/pages/PageQueue.vue

@@ -1,100 +1,102 @@
 <template>
-  <content-with-heading>
-    <template #heading-left>
-      <p class="title is-4" v-text="$t('page.queue.title')" />
-      <p
-        class="heading"
-        v-text="$t('page.queue.count', { count: queue.count })"
-      />
-    </template>
-    <template #heading-right>
-      <div class="buttons is-centered">
-        <a
-          class="button is-small"
-          :class="{ 'is-info': show_only_next_items }"
-          @click="update_show_next_items"
-        >
-          <span class="icon"
-            ><mdicon name="arrow-collapse-down" size="16"
-          /></span>
-          <span v-text="$t('page.queue.hide-previous')" />
-        </a>
-        <a class="button is-small" @click="open_add_stream_dialog">
-          <span class="icon"><mdicon name="web" size="16" /></span>
-          <span v-text="$t('page.queue.add-stream')" />
-        </a>
-        <a
-          class="button is-small"
-          :class="{ 'is-info': edit_mode }"
-          @click="edit_mode = !edit_mode"
-        >
-          <span class="icon"><mdicon name="pencil" size="16" /></span>
-          <span v-text="$t('page.queue.edit')" />
-        </a>
-        <a class="button is-small" @click="queue_clear">
-          <span class="icon"><mdicon name="delete-empty" size="16" /></span>
-          <span v-text="$t('page.queue.clear')" />
-        </a>
-        <a
-          v-if="is_queue_save_allowed"
-          class="button is-small"
-          :disabled="queue_items.length === 0"
-          @click="save_dialog"
-        >
-          <span class="icon"><mdicon name="content-save" size="16" /></span>
-          <span v-text="$t('page.queue.save')" />
-        </a>
-      </div>
-    </template>
-    <template #content>
-      <draggable
-        v-model="queue_items"
-        handle=".handle"
-        item-key="id"
-        @end="move_item"
-      >
-        <template #item="{ element, index }">
-          <list-item-queue-item
-            :item="element"
-            :position="index"
-            :current_position="current_position"
-            :show_only_next_items="show_only_next_items"
-            :edit_mode="edit_mode"
+  <div class="fd-page">
+    <content-with-heading>
+      <template #heading-left>
+        <p class="title is-4" v-text="$t('page.queue.title')" />
+        <p
+          class="heading"
+          v-text="$t('page.queue.count', { count: queue.count })"
+        />
+      </template>
+      <template #heading-right>
+        <div class="buttons is-centered">
+          <a
+            class="button is-small"
+            :class="{ 'is-info': show_only_next_items }"
+            @click="update_show_next_items"
           >
-            <template #actions>
-              <a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
-                <span class="icon has-text-dark"
-                  ><mdicon name="dots-vertical" size="16"
-                /></span>
-              </a>
-              <a
-                v-if="element.id !== state.item_id && edit_mode"
-                @click.prevent.stop="remove(element)"
-              >
-                <span class="icon has-text-grey"
-                  ><mdicon name="delete" size="18"
-                /></span>
-              </a>
-            </template>
-          </list-item-queue-item>
-        </template>
-      </draggable>
-      <modal-dialog-queue-item
-        :show="show_details_modal"
-        :item="selected_item"
-        @close="show_details_modal = false"
-      />
-      <modal-dialog-add-url-stream
-        :show="show_url_modal"
-        @close="show_url_modal = false"
-      />
-      <modal-dialog-playlist-save
-        v-if="is_queue_save_allowed"
-        :show="show_pls_save_modal"
-        @close="show_pls_save_modal = false"
-      />
-    </template>
-  </content-with-heading>
+            <span class="icon"
+              ><mdicon name="arrow-collapse-down" size="16"
+            /></span>
+            <span v-text="$t('page.queue.hide-previous')" />
+          </a>
+          <a class="button is-small" @click="open_add_stream_dialog">
+            <span class="icon"><mdicon name="web" size="16" /></span>
+            <span v-text="$t('page.queue.add-stream')" />
+          </a>
+          <a
+            class="button is-small"
+            :class="{ 'is-info': edit_mode }"
+            @click="edit_mode = !edit_mode"
+          >
+            <span class="icon"><mdicon name="pencil" size="16" /></span>
+            <span v-text="$t('page.queue.edit')" />
+          </a>
+          <a class="button is-small" @click="queue_clear">
+            <span class="icon"><mdicon name="delete-empty" size="16" /></span>
+            <span v-text="$t('page.queue.clear')" />
+          </a>
+          <a
+            v-if="is_queue_save_allowed"
+            class="button is-small"
+            :disabled="queue_items.length === 0"
+            @click="save_dialog"
+          >
+            <span class="icon"><mdicon name="content-save" size="16" /></span>
+            <span v-text="$t('page.queue.save')" />
+          </a>
+        </div>
+      </template>
+      <template #content>
+        <draggable
+          v-model="queue_items"
+          handle=".handle"
+          item-key="id"
+          @end="move_item"
+        >
+          <template #item="{ element, index }">
+            <list-item-queue-item
+              :item="element"
+              :position="index"
+              :current_position="current_position"
+              :show_only_next_items="show_only_next_items"
+              :edit_mode="edit_mode"
+            >
+              <template #actions>
+                <a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
+                  <span class="icon has-text-dark"
+                    ><mdicon name="dots-vertical" size="16"
+                  /></span>
+                </a>
+                <a
+                  v-if="element.id !== state.item_id && edit_mode"
+                  @click.prevent.stop="remove(element)"
+                >
+                  <span class="icon has-text-grey"
+                    ><mdicon name="delete" size="18"
+                  /></span>
+                </a>
+              </template>
+            </list-item-queue-item>
+          </template>
+        </draggable>
+        <modal-dialog-queue-item
+          :show="show_details_modal"
+          :item="selected_item"
+          @close="show_details_modal = false"
+        />
+        <modal-dialog-add-url-stream
+          :show="show_url_modal"
+          @close="show_url_modal = false"
+        />
+        <modal-dialog-playlist-save
+          v-if="is_queue_save_allowed"
+          :show="show_pls_save_modal"
+          @close="show_pls_save_modal = false"
+        />
+      </template>
+    </content-with-heading>
+  </div>
 </template>
 
 <script>

web-src/src/pages/PageRadioStreams.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="fd-page">
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.radio.title')" />

web-src/src/pages/PageSearch.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="fd-page">
     <!-- Search field + recent searches -->
-    <section class="section fd-page pb-0">
+    <section class="section pb-0">
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths">
@@ -40,7 +40,7 @@
     </section>
     <tabs-search :query="search_query" />
     <!-- Tracks -->
-    <content-with-heading v-if="show_tracks && tracks.total">
+    <content-with-heading v-if="show_tracks && tracks.total" class="pt-0">
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.search.tracks')" />
       </template>
@@ -63,7 +63,7 @@
         </nav>
       </template>
     </content-with-heading>
-    <content-text v-if="show_tracks && !tracks.total" class="mt-6">
+    <content-text v-if="show_tracks && !tracks.total" class="pt-0">
       <template #content>
         <p><i v-text="$t('page.search.no-tracks')" /></p>
       </template>

web-src/src/pages/SpotifyPageAlbum.vue

@@ -1,71 +1,75 @@
 <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.artists[0].name"
-        />
-      </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.spotify.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="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.spotify.album.track-count', { count: album.tracks.total })
-        "
-      />
-      <spotify-list-item-track
-        v-for="(track, index) in album.tracks.items"
-        :key="track.id"
-        :track="track"
-        :position="index"
-        :context_uri="album.uri"
-      >
-        <template #actions>
-          <a @click.prevent.stop="open_track_dialog(track)">
-            <span class="icon has-text-dark"
-              ><mdicon name="dots-vertical" size="16"
+  <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.artists[0].name"
+          />
+        </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.spotify.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>
-        </template>
-      </spotify-list-item-track>
-      <spotify-modal-dialog-track
-        :show="show_track_details_modal"
-        :track="selected_track"
-        :album="album"
-        @close="show_track_details_modal = false"
-      />
-      <spotify-modal-dialog-album
-        :show="show_album_details_modal"
-        :album="album"
-        @close="show_album_details_modal = false"
-      />
-    </template>
-  </content-with-hero>
+        </div>
+      </template>
+      <template #heading-right>
+        <cover-artwork
+          :artwork_url="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.spotify.album.track-count', { count: album.tracks.total })
+          "
+        />
+        <spotify-list-item-track
+          v-for="(track, index) in album.tracks.items"
+          :key="track.id"
+          :track="track"
+          :position="index"
+          :context_uri="album.uri"
+        >
+          <template #actions>
+            <a @click.prevent.stop="open_track_dialog(track)">
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
+            </a>
+          </template>
+        </spotify-list-item-track>
+        <spotify-modal-dialog-track
+          :show="show_track_details_modal"
+          :track="selected_track"
+          :album="album"
+          @close="show_track_details_modal = false"
+        />
+        <spotify-modal-dialog-album
+          :show="show_album_details_modal"
+          :album="album"
+          @close="show_album_details_modal = false"
+        />
+      </template>
+    </content-with-hero>
+  </div>
 </template>
 
 <script>

web-src/src/pages/SpotifyPageArtist.vue

@@ -1,66 +1,70 @@
 <template>
-  <content-with-heading>
-    <template #heading-left>
-      <p class="title is-4" v-text="artist.name" />
-    </template>
-    <template #heading-right>
-      <div class="buttons is-centered">
-        <a
-          class="button is-small is-light is-rounded"
-          @click="show_artist_details_modal = true"
-        >
-          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-        </a>
-        <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.spotify.artist.shuffle')" />
-        </a>
-      </div>
-    </template>
-    <template #content>
-      <p
-        class="heading has-text-centered-mobile"
-        v-text="$t('page.spotify.artist.album-count', { count: total })"
-      />
-      <spotify-list-item-album
-        v-for="album in albums"
-        :key="album.id"
-        :album="album"
-        @click="open_album(album)"
-      >
-        <template v-if="is_visible_artwork" #artwork>
-          <cover-artwork
-            :artwork_url="artwork_url(album)"
-            :artist="album.artist"
-            :album="album.name"
-            class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
-            :maxwidth="64"
-            :maxheight="64"
-          />
-        </template>
-        <template #actions>
-          <a @click.prevent.stop="open_dialog(album)">
-            <span class="icon has-text-dark"
-              ><mdicon name="dots-vertical" size="16"
+  <div class="fd-page">
+    <content-with-heading>
+      <template #heading-left>
+        <p class="title is-4" v-text="artist.name" />
+      </template>
+      <template #heading-right>
+        <div class="buttons is-centered">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_artist_details_modal = true"
+          >
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
             /></span>
           </a>
-        </template>
-      </spotify-list-item-album>
-      <VueEternalLoading v-if="offset < total" :load="load_next">
-        <template #no-more> . </template>
-      </VueEternalLoading>
-      <spotify-modal-dialog-album
-        :show="show_details_modal"
-        :album="selected_album"
-        @close="show_details_modal = false"
-      />
-      <spotify-modal-dialog-artist
-        :show="show_artist_details_modal"
-        :artist="artist"
-        @close="show_artist_details_modal = false"
-      />
-    </template>
-  </content-with-heading>
+          <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.spotify.artist.shuffle')" />
+          </a>
+        </div>
+      </template>
+      <template #content>
+        <p
+          class="heading has-text-centered-mobile"
+          v-text="$t('page.spotify.artist.album-count', { count: total })"
+        />
+        <spotify-list-item-album
+          v-for="album in albums"
+          :key="album.id"
+          :album="album"
+          @click="open_album(album)"
+        >
+          <template v-if="is_visible_artwork" #artwork>
+            <cover-artwork
+              :artwork_url="artwork_url(album)"
+              :artist="album.artist"
+              :album="album.name"
+              class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
+              :maxwidth="64"
+              :maxheight="64"
+            />
+          </template>
+          <template #actions>
+            <a @click.prevent.stop="open_dialog(album)">
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
+            </a>
+          </template>
+        </spotify-list-item-album>
+        <VueEternalLoading v-if="offset < total" :load="load_next">
+          <template #no-more> . </template>
+        </VueEternalLoading>
+        <spotify-modal-dialog-album
+          :show="show_details_modal"
+          :album="selected_album"
+          @close="show_details_modal = false"
+        />
+        <spotify-modal-dialog-artist
+          :show="show_artist_details_modal"
+          :artist="artist"
+          @close="show_artist_details_modal = false"
+        />
+      </template>
+    </content-with-heading>
+  </div>
 </template>
 
 <script>

web-src/src/pages/SpotifyPagePlaylist.vue

@@ -1,60 +1,64 @@
 <template>
-  <content-with-heading>
-    <template #heading-left>
-      <div class="title is-4" v-text="playlist.name" />
-    </template>
-    <template #heading-right>
-      <div class="buttons is-centered">
-        <a
-          class="button is-small is-light is-rounded"
-          @click="show_playlist_details_modal = true"
-        >
-          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-        </a>
-        <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.spotify.playlist.shuffle')" />
-        </a>
-      </div>
-    </template>
-    <template #content>
-      <p
-        class="heading has-text-centered-mobile"
-        v-text="
-          $t('page.spotify.playlist.count', { count: playlist.tracks.total })
-        "
-      />
-      <spotify-list-item-track
-        v-for="track in tracks"
-        :key="track.id"
-        :track="track"
-        :position="track.position"
-        :context_uri="playlist.uri"
-      >
-        <template #actions>
-          <a @click.prevent.stop="open_track_dialog(track)">
-            <span class="icon has-text-dark"
-              ><mdicon name="dots-vertical" size="16"
+  <div class="fd-page">
+    <content-with-heading>
+      <template #heading-left>
+        <div class="title is-4" v-text="playlist.name" />
+      </template>
+      <template #heading-right>
+        <div class="buttons is-centered">
+          <a
+            class="button is-small is-light is-rounded"
+            @click="show_playlist_details_modal = true"
+          >
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
             /></span>
           </a>
-        </template>
-      </spotify-list-item-track>
-      <VueEternalLoading v-if="offset < total" :load="load_next">
-        <template #no-more> . </template>
-      </VueEternalLoading>
-      <spotify-modal-dialog-track
-        :show="show_track_details_modal"
-        :track="selected_track"
-        :album="selected_track.album"
-        @close="show_track_details_modal = false"
-      />
-      <spotify-modal-dialog-playlist
-        :show="show_playlist_details_modal"
-        :playlist="playlist"
-        @close="show_playlist_details_modal = false"
-      />
-    </template>
-  </content-with-heading>
+          <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.spotify.playlist.shuffle')" />
+          </a>
+        </div>
+      </template>
+      <template #content>
+        <p
+          class="heading has-text-centered-mobile"
+          v-text="
+            $t('page.spotify.playlist.count', { count: playlist.tracks.total })
+          "
+        />
+        <spotify-list-item-track
+          v-for="track in tracks"
+          :key="track.id"
+          :track="track"
+          :position="track.position"
+          :context_uri="playlist.uri"
+        >
+          <template #actions>
+            <a @click.prevent.stop="open_track_dialog(track)">
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
+            </a>
+          </template>
+        </spotify-list-item-track>
+        <VueEternalLoading v-if="offset < total" :load="load_next">
+          <template #no-more> . </template>
+        </VueEternalLoading>
+        <spotify-modal-dialog-track
+          :show="show_track_details_modal"
+          :track="selected_track"
+          :album="selected_track.album"
+          @close="show_track_details_modal = false"
+        />
+        <spotify-modal-dialog-playlist
+          :show="show_playlist_details_modal"
+          :playlist="playlist"
+          @close="show_playlist_details_modal = false"
+        />
+      </template>
+    </content-with-heading>
+  </div>
 </template>
 
 <script>

web-src/src/pages/SpotifyPageSearch.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="fd-page">
     <!-- Search field + recent searches -->
-    <section class="section pb-0 fd-page">
+    <section class="section pb-0">
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths">
@@ -37,7 +37,7 @@
     </section>
     <tabs-search :query="search_query" />
     <!-- Tracks -->
-    <content-with-heading v-if="show_tracks && tracks.total">
+    <content-with-heading v-if="show_tracks && tracks.total" class="pt-0">
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.spotify.search.tracks')" />
       </template>
@@ -86,7 +86,7 @@
         </nav>
       </template>
     </content-with-heading>
-    <content-text v-if="show_tracks && !tracks.total" class="mt-6">
+    <content-text v-if="show_tracks && !tracks.total" class="pt-0">
       <template #content>
         <p><i v-text="$t('page.spotify.search.no-tracks')" /></p>
       </template>

web-src/src/templates/ContentText.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="section fd-content py-3">
+  <section class="section py-3">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">

web-src/src/templates/ContentWithHeading.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="section fd-page fd-content">
+  <section class="section">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">

web-src/src/templates/ContentWithHero.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <section class="hero is-light is-bold fd-page fd-content">
+  <div class="fd-page">
+    <section class="hero is-light is-bold">
       <div class="hero-body">
         <div class="container">
           <div class="columns is-centered">
@@ -22,7 +22,7 @@
         </div>
       </div>
     </section>
-    <section class="section fd-content">
+    <section class="section">
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths">