[web] Remove the non-standard heading class

web-src/src/pages/PageAlbum.vue

@@ -2,10 +2,10 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <p class="title is-5" v-text="album.name" />
-        <p class="subtitle is-6 has-text-link">
-          <a class="has-text-link" @click="open_artist" v-text="album.artist" />
-        </p>
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artist" />
+        </div>
         <div class="buttons is-centered-mobile mt-5">
           <a
             class="button has-background-light is-small is-rounded"
@@ -32,8 +32,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile my-5"
           v-text="$t('page.album.track-count', { count: album.track_count })"
         />
         <list-tracks :items="tracks" :uris="album.uri" />

web-src/src/pages/PageAlbumSpotify.vue

@@ -2,14 +2,10 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <p class="title is-5" v-text="album.name" />
-        <p class="subtitle is-6 has-text-link">
-          <a
-            class="has-text-link"
-            @click="open_artist"
-            v-text="album.artists[0].name"
-          />
-        </p>
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artists[0].name" />
+        </div>
         <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="shuffle" size="16" />
@@ -33,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile mt-5"
           v-text="
             $t('page.spotify.album.track-count', { count: album.tracks.total })
           "

web-src/src/pages/PageAlbums.vue

@@ -6,7 +6,10 @@
         <index-button-list :indices="albums.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.albums.filter')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.albums.filter')"
+            />
             <control-switch v-model="uiStore.hide_singles">
               <template #label>
                 <span v-text="$t('page.albums.hide-singles')" />
@@ -28,7 +31,10 @@
             </control-switch>
           </div>
           <div class="column">
-            <p class="heading" v-text="$t('page.albums.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.albums.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.albums_sort"
               :options="groupings"
@@ -37,9 +43,9 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.albums.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.albums.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.albums.count', { count: albums.count })"
         />
       </template>

web-src/src/pages/PageArtist.vue

@@ -4,7 +4,10 @@
       <template #options>
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.filter')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.filter')"
+            />
             <control-switch
               v-if="spotify_enabled"
               v-model="uiStore.hide_spotify"
@@ -18,7 +21,10 @@
             </control-switch>
           </div>
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.artist_albums_sort"
               :options="groupings"
@@ -27,7 +33,17 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="$t('page.artist.album-count', { count: albums.count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="$t('page.artist.track-count', { count: track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -44,17 +60,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="$t('page.artist.album-count', { count: albums.count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="$t('page.artist.track-count', { count: track_count })"
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-artist
           :item="artist"

web-src/src/pages/PageArtistSpotify.vue

@@ -2,7 +2,11 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('page.spotify.artist.album-count', { count: total })"
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,10 +23,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="$t('page.spotify.artist.album-count', { count: total })"
-        />
         <list-albums-spotify :items="albums" />
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>

web-src/src/pages/PageArtistTracks.vue

@@ -5,7 +5,10 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.filter')" />
+            <p
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.filter')"
+            />
             <control-switch
               v-if="spotify_enabled"
               v-model="uiStore.hide_spotify"
@@ -19,7 +22,10 @@
             </control-switch>
           </div>
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.sort.title')" />
+            <p
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.artist_tracks_sort"
               :options="groupings"
@@ -29,6 +35,16 @@
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="artist.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_artist"
+            v-text="$t('page.artist.album-count', { count: album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="$t('page.artist.track-count', { count: tracks.count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -45,17 +61,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_artist"
-            v-text="$t('page.artist.album-count', { count: album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="$t('page.artist.track-count', { count: tracks.count })"
-          />
-        </p>
         <list-tracks :items="tracks" :uris="track_uris" />
         <modal-dialog-artist
           :item="artist"

web-src/src/pages/PageArtists.vue

@@ -6,7 +6,10 @@
         <index-button-list :indices="artists.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artists.filter')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artists.filter')"
+            />
             <control-switch v-model="uiStore.hide_singles">
               <template #label>
                 <span v-text="$t('page.artists.hide-singles')" />
@@ -27,7 +30,10 @@
             </div>
           </div>
           <div class="column">
-            <p class="heading" v-text="$t('page.artists.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artists.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.artists_sort"
               :options="groupings"
@@ -36,9 +42,9 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.artists.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.artists.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.artists.count', { count: artists.count })"
         />
       </template>

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -2,10 +2,10 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <p class="title is-5" v-text="album.name" />
-        <p class="subtitle is-6 has-text-link">
-          <a class="has-text-link" @click="open_artist" v-text="album.artist" />
-        </p>
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artist" />
+        </div>
         <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
@@ -29,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile mt-5"
           v-text="
             $t('page.audiobooks.album.track-count', {
               count: album.track_count

web-src/src/pages/PageAudiobooksAlbums.vue

@@ -8,7 +8,7 @@
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.audiobooks.albums.title')" />
         <p
-          class="heading"
+          class="is-size-7 is-uppercase"
           v-text="$t('page.audiobooks.albums.count', { count: albums.count })"
         />
       </template>

web-src/src/pages/PageAudiobooksArtist.vue

@@ -2,7 +2,15 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="
+            $t('page.audiobooks.artist.album-count', {
+              count: artist.album_count
+            })
+          "
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,14 +27,6 @@
         </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 :items="albums" />
         <modal-dialog-artist
           :item="artist"

web-src/src/pages/PageAudiobooksArtists.vue

@@ -6,9 +6,9 @@
         <index-button-list :indices="artists.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.audiobooks.artists.count', { count: artists.count })"
         />
       </template>

web-src/src/pages/PageAudiobooksGenres.vue

@@ -6,9 +6,9 @@
         <index-button-list :indices="genres.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.genres.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.genres.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.genres.count', { count: genres.total })"
         />
       </template>

web-src/src/pages/PageComposerAlbums.vue

@@ -2,7 +2,21 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="composer.name" />
+        <div class="title is-4" v-text="composer.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="
+              $t('page.composer.album-count', { count: composer.album_count })
+            "
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="
+              $t('page.composer.track-count', { count: composer.track_count })
+            "
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,21 +33,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="
-              $t('page.composer.album-count', { count: composer.album_count })
-            "
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="
-              $t('page.composer.track-count', { count: composer.track_count })
-            "
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-composer
           :item="composer"

web-src/src/pages/PageComposerTracks.vue

@@ -5,7 +5,10 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.composer_tracks_sort"
               :options="groupings"
@@ -14,7 +17,23 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="composer.name" />
+        <div class="title is-4" v-text="composer.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_albums"
+            v-text="
+              $t('page.composer.album-count', {
+                count: composer.album_count
+              })
+            "
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="
+              $t('page.composer.track-count', { count: composer.track_count })
+            "
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -31,23 +50,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_albums"
-            v-text="
-              $t('page.composer.album-count', {
-                count: composer.album_count
-              })
-            "
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="
-              $t('page.composer.track-count', { count: composer.track_count })
-            "
-          />
-        </p>
         <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-composer
           :item="composer"

web-src/src/pages/PageComposers.vue

@@ -6,9 +6,9 @@
         <index-button-list :indices="composers.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.composers.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.composers.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.composers.count', { count: composers.total })"
         />
       </template>

web-src/src/pages/PageGenreAlbums.vue

@@ -5,7 +5,17 @@
         <index-button-list :indices="albums.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="genre.name" />
+        <div class="title is-4" v-text="genre.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="$t('page.genre.album-count', { count: genre.album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="$t('page.genre.track-count', { count: genre.track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -22,17 +32,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="$t('page.genre.album-count', { count: genre.album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="$t('page.genre.track-count', { count: genre.track_count })"
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-genre
           :item="genre"

web-src/src/pages/PageGenreTracks.vue

@@ -5,7 +5,10 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.genre.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.genre.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.genre_tracks_sort"
               :options="groupings"
@@ -14,7 +17,17 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="genre.name" />
+        <div class="title is-4" v-text="genre.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_genre"
+            v-text="$t('page.genre.album-count', { count: genre.album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="$t('page.genre.track-count', { count: genre.track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -31,17 +44,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_genre"
-            v-text="$t('page.genre.album-count', { count: genre.album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="$t('page.genre.track-count', { count: genre.track_count })"
-          />
-        </p>
         <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-genre
           :item="genre"

web-src/src/pages/PageGenres.vue

@@ -6,9 +6,9 @@
         <index-button-list :indices="genres.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.genres.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.genres.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.genres.count', { count: genres.total })"
         />
       </template>

web-src/src/pages/PagePlaylistFolder.vue

@@ -2,14 +2,14 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p
+        <div
           class="title is-4"
           v-text="
             playlist.id === 0 ? $t('page.playlists.title') : playlist.name
           "
         />
-        <p
-          class="heading"
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.playlists.count', { count: playlists.count })"
         />
       </template>

web-src/src/pages/PagePlaylistTracks.vue

@@ -3,6 +3,10 @@
     <content-with-heading>
       <template #heading-left>
         <div class="title is-4" v-text="playlist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('page.playlist.track-count', { count: tracks.count })"
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,10 +23,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="$t('page.playlist.track-count', { count: tracks.count })"
-        />
         <list-tracks :items="tracks" :uris="uris" />
         <modal-dialog-playlist
           :item="playlist"

web-src/src/pages/PagePlaylistTracksSpotify.vue

@@ -3,6 +3,12 @@
     <content-with-heading>
       <template #heading-left>
         <div class="title is-4" v-text="playlist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="
+            $t('page.spotify.playlist.count', { count: playlist.tracks.total })
+          "
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,12 +25,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="
-            $t('page.spotify.playlist.count', { count: playlist.tracks.total })
-          "
-        />
         <list-tracks-spotify :items="tracks" :context_uri="playlist.uri" />
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>

web-src/src/pages/PagePodcast.vue

@@ -2,10 +2,10 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <p class="title is-5" v-text="album.name" />
-        <p class="subtitle is-6">
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
           <br />
-        </p>
+        </div>
         <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
@@ -29,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile my-5"
           v-text="$t('page.podcast.track-count', { count: album.track_count })"
         />
         <list-tracks

web-src/src/pages/PagePodcasts.vue

@@ -22,9 +22,9 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.podcasts.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.podcasts.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.podcasts.count', { count: albums.total })"
         />
       </template>

web-src/src/pages/PageQueue.vue

@@ -2,9 +2,9 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.queue.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.queue.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.queue.count', { count: queue.count })"
         />
       </template>

web-src/src/pages/PageRadioStreams.vue

@@ -2,9 +2,9 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.radio.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.radio.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.radio.count', { count: tracks.total })"
         />
       </template>