From 91c5a4fa671232a129f91ced8cd37569d6bf65de Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 1 Jul 2023 18:19:29 +0200
Subject: [PATCH] [web] Remove inline styles whenever possible

Most of the inline styles have been removed in favour of standard Bulma styles.
---
 web-src/src/components/IndexButtonList.vue    |  2 +-
 web-src/src/components/ModalDialogUpdate.vue  |  6 +---
 web-src/src/components/NavbarBottom.vue       | 33 ++++++++-----------
 web-src/src/components/NavbarTop.vue          |  6 +---
 web-src/src/components/SettingsCheckbox.vue   |  2 +-
 web-src/src/components/SettingsIntfield.vue   |  3 +-
 web-src/src/pages/PageAlbums.vue              | 12 ++-----
 web-src/src/pages/PageArtist.vue              |  6 +---
 web-src/src/pages/PageArtistTracks.vue        |  6 +---
 web-src/src/pages/PageArtists.vue             | 12 ++-----
 web-src/src/pages/PageComposerTracks.vue      |  6 +---
 web-src/src/pages/PageGenreTracks.vue         |  6 +---
 web-src/src/pages/PageSearch.vue              |  2 +-
 .../src/pages/SettingsPageOnlineServices.vue  |  5 +--
 .../src/pages/SettingsPageRemotesOutputs.vue  |  2 +-
 web-src/src/pages/SpotifyPageSearch.vue       |  2 +-
 web-src/src/templates/ContentWithHeading.vue  |  7 ++--
 web-src/src/templates/ContentWithHero.vue     |  2 +-
 18 files changed, 34 insertions(+), 86 deletions(-)

diff --git a/web-src/src/components/IndexButtonList.vue b/web-src/src/components/IndexButtonList.vue
index dd67ade6..911976f2 100644
--- a/web-src/src/components/IndexButtonList.vue
+++ b/web-src/src/components/IndexButtonList.vue
@@ -1,6 +1,6 @@
 <template>
   <section>
-    <nav class="buttons is-centered fd-is-square" style="margin-bottom: 16px">
+    <nav class="buttons is-centered mb-4 fd-is-square">
       <a
         v-for="char in index"
         :key="char"
diff --git a/web-src/src/components/ModalDialogUpdate.vue b/web-src/src/components/ModalDialogUpdate.vue
index bd7a333c..519c6ca6 100644
--- a/web-src/src/components/ModalDialogUpdate.vue
+++ b/web-src/src/components/ModalDialogUpdate.vue
@@ -32,11 +32,7 @@
         </div>
         <div class="field">
           <label class="checkbox is-size-7 is-small">
-            <input
-              v-model="rescan_metadata"
-              type="checkbox"
-              style="margin-right: 5px"
-            />
+            <input v-model="rescan_metadata" type="checkbox" class="mr-2" />
             <span v-text="$t('dialog.update.rescan-metadata')" />
           </label>
         </div>
diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index 356099d2..459036e6 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -92,10 +92,7 @@
             size="18"
           />
         </a>
-        <div
-          class="navbar-dropdown is-right is-boxed"
-          style="margin-right: 6px; margin-bottom: 6px; border-radius: 6px"
-        >
+        <div class="navbar-dropdown is-right">
           <div class="navbar-item">
             <!-- Outputs: master volume -->
             <div class="level is-mobile">
@@ -153,20 +150,19 @@
                 </div>
                 <div class="level-item">
                   <div class="is-flex-grow-1">
-                    <p
-                      class="heading"
+                    <div
+                      class="is-flex is-align-content-center"
                       :class="{ 'has-text-grey-light': !playing }"
                     >
-                      <span v-text="$t('navigation.stream')" />
-                      <a href="stream.mp3" class="ml-2" target="_blank"
+                      <p class="heading" v-text="$t('navigation.stream')" />
+                      <a href="stream.mp3" class="heading ml-2" target="_blank"
                         ><mdicon
-                          class="icon"
+                          class="icon is-small"
                           name="open-in-new"
                           size="16"
-                          style="vertical-align: middle"
                         />
                       </a>
-                    </p>
+                    </div>
                     <input
                       v-model="stream_volume"
                       :disabled="!playing"
@@ -238,7 +234,7 @@
                     class="slider"
                     max="100"
                     type="range"
-                    :style="{ '--ratio': player.volume }"
+                    :style="{ '--ratio': player.volume / 100 }"
                     @change="change_volume"
                   />
                 </div>
@@ -270,20 +266,19 @@
               </div>
               <div class="level-item">
                 <div class="is-flex-grow-1">
-                  <p
-                    class="heading"
+                  <div
+                    class="is-flex is-align-content-center"
                     :class="{ 'has-text-grey-light': !playing }"
                   >
-                    <span v-text="$t('navigation.stream')" />
-                    <a href="stream.mp3" class="ml-2" target="_blank"
+                    <p class="heading" v-text="$t('navigation.stream')" />
+                    <a href="stream.mp3" class="heading ml-2" target="_blank"
                       ><mdicon
-                        class="icon"
+                        class="icon is-small"
                         name="open-in-new"
                         size="16"
-                        style="vertical-align: middle"
                       />
                     </a>
-                  </p>
+                  </div>
                   <input
                     v-model="stream_volume"
                     :disabled="!playing"
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index b202069e..bf236394 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -118,10 +118,7 @@
             <navbar-item-link to="/about">{{
               $t('navigation.about')
             }}</navbar-item-link>
-            <div
-              class="navbar-item is-hidden-desktop"
-              style="margin-bottom: 2.5rem"
-            />
+            <div class="navbar-item is-hidden-desktop" />
           </div>
         </div>
       </div>
@@ -129,7 +126,6 @@
     <div
       v-show="show_settings_menu"
       class="is-overlay"
-      style="z-index: 10; width: 100vw; height: 100vh"
       @click="show_settings_menu = false"
     />
   </nav>
diff --git a/web-src/src/components/SettingsCheckbox.vue b/web-src/src/components/SettingsCheckbox.vue
index 3925327a..bd414dd7 100644
--- a/web-src/src/components/SettingsCheckbox.vue
+++ b/web-src/src/components/SettingsCheckbox.vue
@@ -5,7 +5,7 @@
         ref="setting"
         type="checkbox"
         :checked="value"
-        style="margin-right: 5px"
+        class="mr-2"
         @change="set_update_timer"
       />
       <slot name="label" />
diff --git a/web-src/src/components/SettingsIntfield.vue b/web-src/src/components/SettingsIntfield.vue
index ed5bbd2a..3bc10eb2 100644
--- a/web-src/src/components/SettingsIntfield.vue
+++ b/web-src/src/components/SettingsIntfield.vue
@@ -12,10 +12,9 @@
       <div class="control">
         <input
           ref="setting"
-          class="input"
+          class="column input is-one-fifth"
           type="number"
           min="0"
-          style="width: 10em"
           :placeholder="placeholder"
           :value="value"
           @input="set_update_timer"
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index 22c70afe..8085e497 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -6,11 +6,7 @@
         <index-button-list :index="albums.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.albums.filter')"
-            />
+            <p class="heading mb-5" v-text="$t('page.albums.filter')" />
             <div class="field">
               <div class="control">
                 <input
@@ -45,11 +41,7 @@
             </div>
           </div>
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.albums.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.albums.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index cfacd662..1141c339 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -4,11 +4,7 @@
       <template #options>
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artist.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index a39292d9..2fb02ec5 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -5,11 +5,7 @@
         <index-button-list :index="tracks.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artist.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index 2f369237..bc2c67fc 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -6,11 +6,7 @@
         <index-button-list :index="artists.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artists.filter')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artists.filter')" />
             <div class="field">
               <div class="control">
                 <input
@@ -45,11 +41,7 @@
             </div>
           </div>
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artists.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artists.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 7b6929fb..19f655e2 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -5,11 +5,7 @@
         <index-button-list :index="tracks.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.artist.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index dc064367..07d9a43b 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -5,11 +5,7 @@
         <index-button-list :index="tracks.indexList" />
         <div class="columns">
           <div class="column">
-            <p
-              class="heading"
-              style="margin-bottom: 24px"
-              v-text="$t('page.genre.sort-by.title')"
-            />
+            <p class="heading mb-5" v-text="$t('page.genre.sort-by.title')" />
             <dropdown-menu
               v-model="selected_groupby_option_id"
               :options="groupby_options"
diff --git a/web-src/src/pages/PageSearch.vue b/web-src/src/pages/PageSearch.vue
index 639e3b0d..4fa766c1 100644
--- a/web-src/src/pages/PageSearch.vue
+++ b/web-src/src/pages/PageSearch.vue
@@ -23,7 +23,7 @@
                 </p>
               </div>
             </form>
-            <div class="tags" style="margin-top: 16px">
+            <div class="tags mt-4">
               <a
                 v-for="recent_search in recent_searches"
                 :key="recent_search"
diff --git a/web-src/src/pages/SettingsPageOnlineServices.vue b/web-src/src/pages/SettingsPageOnlineServices.vue
index fc3a09f0..42f1f762 100644
--- a/web-src/src/pages/SettingsPageOnlineServices.vue
+++ b/web-src/src/pages/SettingsPageOnlineServices.vue
@@ -47,10 +47,7 @@
               <span v-text="$t('page.settings.services.spotify.scopes')" />
               <code v-text="spotify_required_scope.join(', ')" />
             </p>
-            <div
-              v-if="spotify.webapi_token_valid"
-              class="field mt-5"
-            >
+            <div v-if="spotify.webapi_token_valid" class="field mt-5">
               <div class="control">
                 <a
                   class="button is-danger"
diff --git a/web-src/src/pages/SettingsPageRemotesOutputs.vue b/web-src/src/pages/SettingsPageRemotesOutputs.vue
index ceb353d7..f1fb89fb 100644
--- a/web-src/src/pages/SettingsPageRemotesOutputs.vue
+++ b/web-src/src/pages/SettingsPageRemotesOutputs.vue
@@ -57,7 +57,7 @@
                 <input
                   v-model="output.selected"
                   type="checkbox"
-                  style="margin-right: 5px"
+                  class="mr-2"
                   @change="output_toggle(output.id)"
                 />
                 <span v-text="output.name" />
diff --git a/web-src/src/pages/SpotifyPageSearch.vue b/web-src/src/pages/SpotifyPageSearch.vue
index 8b081e32..a156d7c6 100644
--- a/web-src/src/pages/SpotifyPageSearch.vue
+++ b/web-src/src/pages/SpotifyPageSearch.vue
@@ -21,7 +21,7 @@
                 </p>
               </div>
             </form>
-            <div class="tags" style="margin-top: 16px">
+            <div class="tags mt-4">
               <a
                 v-for="recent_search in recent_searches"
                 :key="recent_search"
diff --git a/web-src/src/templates/ContentWithHeading.vue b/web-src/src/templates/ContentWithHeading.vue
index 01a6e299..e7eda5eb 100644
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@@ -6,10 +6,7 @@
           <section v-if="$slots['options']">
             <div ref="options_ref" style="height: 1px" />
             <slot name="options" />
-            <nav
-              class="buttons is-centered"
-              style="margin-bottom: 6px; margin-top: 16px"
-            >
+            <nav class="buttons is-centered mt-4 mb-2">
               <a
                 v-if="!options_visible"
                 class="button is-small is-white"
@@ -42,7 +39,7 @@
               </div>
             </nav>
             <slot name="content" />
-            <div style="margin-top: 16px">
+            <div class="mt-4">
               <slot name="footer" />
             </div>
           </div>
diff --git a/web-src/src/templates/ContentWithHero.vue b/web-src/src/templates/ContentWithHero.vue
index 84c131c5..2eb1a058 100644
--- a/web-src/src/templates/ContentWithHero.vue
+++ b/web-src/src/templates/ContentWithHero.vue
@@ -4,7 +4,7 @@
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths">
-            <div class="columns" style="flex-direction: row-reverse">
+            <div class="columns is-flex-direction-row-reverse">
               <div class="column fd-has-cover">
                 <!-- Slot heading right -->
                 <slot name="heading-right" />