From 6354f9972a3fc15898b8b180499d445715715feb Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 7 Feb 2025 21:42:31 +0100
Subject: [PATCH] [web] Remove remnants of the name forked-daapd in styles

---
 web-src/src/components/CoverArtwork.vue       | 57 ++++++++++++++++++-
 web-src/src/components/ListAlbums.vue         |  2 +-
 web-src/src/components/ListAlbumsSpotify.vue  |  2 +-
 web-src/src/components/ModalDialogAlbum.vue   |  2 +-
 .../components/ModalDialogAlbumSpotify.vue    |  2 +-
 web-src/src/mystyles.scss                     | 54 +-----------------
 web-src/src/pages/PageAlbum.vue               |  2 +-
 web-src/src/pages/PageAlbumSpotify.vue        |  2 +-
 web-src/src/pages/PageAudiobooksAlbum.vue     |  2 +-
 web-src/src/pages/PageNowPlaying.vue          |  2 +-
 web-src/src/pages/PagePodcast.vue             |  2 +-
 web-src/src/templates/ContentWithHero.vue     |  6 +-
 12 files changed, 67 insertions(+), 68 deletions(-)

diff --git a/web-src/src/components/CoverArtwork.vue b/web-src/src/components/CoverArtwork.vue
index ec90765c..45e83fd7 100644
--- a/web-src/src/components/CoverArtwork.vue
+++ b/web-src/src/components/CoverArtwork.vue
@@ -1,5 +1,5 @@
 <template>
-  <figure>
+  <figure class="cover has-shadow">
     <img v-lazy="{ src: url, lifecycle }" @click="$emit('click')" />
   </figure>
 </template>
@@ -50,3 +50,58 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@use 'bulma/sass/utilities/mixins';
+
+.cover {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  &.is-small {
+    width: 4rem;
+    height: 4rem;
+    img {
+      border-radius: var(--bulma-radius-small);
+      max-width: 4rem;
+      max-height: 4rem;
+    }
+  }
+  &.is-medium {
+    @include mixins.tablet {
+      justify-content: right;
+    }
+    img {
+      border-radius: var(--bulma-radius);
+      max-height: calc(150px - 1.5rem);
+    }
+  }
+  &.is-normal {
+    img {
+      border-radius: var(--bulma-radius-large);
+      width: 100%;
+    }
+  }
+  &.is-big {
+    @include mixins.mobile {
+      @media screen and (orientation: landscape) {
+        img {
+          display: none;
+        }
+      }
+    }
+    img {
+      border-radius: var(--bulma-radius-large);
+      max-height: calc(100vh - 26rem);
+    }
+    &.is-masked {
+      filter: blur(0.5rem) opacity(0.2);
+    }
+  }
+}
+.has-shadow img {
+  box-shadow:
+    0 0.25rem 0.5rem 0 var(--bulma-background-active),
+    0 0.375rem 1.25rem 0 var(--bulma-background-active);
+}
+</style>
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 5d8c39f7..c005239b 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -17,7 +17,7 @@
         :url="item.item.artwork_url"
         :artist="item.item.artist"
         :album="item.item.name"
-        class="media-left fd-has-shadow fd-cover fd-cover-small-image"
+        class="media-left is-small"
       />
       <div class="media-content">
         <div class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index d42528b3..2ce0eeaa 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -12,7 +12,7 @@
           :url="artwork_url(item)"
           :artist="item.artist"
           :album="item.name"
-          class="fd-has-shadow fd-cover fd-cover-small-image"
+          class="is-small"
         />
       </div>
       <div class="media-content">
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 5ab2e983..4a9e43c8 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -8,7 +8,7 @@
         :url="item.artwork_url"
         :artist="item.artist"
         :album="item.name"
-        class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
+        class="is-normal mb-3"
       />
       <div v-if="media_kind_resolved === 'podcast'" class="buttons">
         <a
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index 505503d2..89aa525e 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -8,7 +8,7 @@
         :url="artwork_url(item)"
         :artist="item.artist"
         :album="item.name"
-        class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
+        class="is-normal mb-3"
         @load="artwork_loaded"
         @error="artwork_error"
       />
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 3c17ff43..4ab81dc4 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -12,12 +12,6 @@
   width: 100%;
 }
 
-.fd-has-shadow img {
-  box-shadow:
-    0 0.25rem 0.5rem 0 var(--bulma-background-active),
-    0 0.375rem 1.25rem 0 var(--bulma-background-active);
-}
-
 .is-full-height {
   min-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
 }
@@ -35,52 +29,6 @@
   justify-content: center;
 }
 
-.fd-cover {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  &-small-image {
-    width: 4rem;
-    height: 4rem;
-    img {
-      border-radius: var(--bulma-radius-small);
-      max-width: 4rem;
-      max-height: 4rem;
-    }
-  }
-  &-medium-image {
-    @include mixins.tablet {
-      justify-content: right;
-    }
-    img {
-      border-radius: var(--bulma-radius);
-      max-height: calc(150px - 1.5rem);
-    }
-  }
-  &-normal-image {
-    img {
-      border-radius: var(--bulma-radius-large);
-      width: 100%;
-    }
-  }
-  &-big-image {
-    @include mixins.mobile {
-      @media screen and (orientation: landscape) {
-        img {
-          display: none;
-        }
-      }
-    }
-    img {
-      border-radius: var(--bulma-radius-large);
-      max-height: calc(100vh - 26rem);
-    }
-    &.is-masked {
-      filter: blur(0.5rem) opacity(0.2);
-    }
-  }
-}
-
 .media:first-of-type {
   padding-top: 1rem;
 }
@@ -106,7 +54,7 @@
 }
 
 .column {
-  &.fd-has-cover {
+  &.has-cover {
     @include mixins.mobile {
       margin: auto;
     }
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index b9d45cab..89937f84 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -27,7 +27,7 @@
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
+          class="is-clickable is-medium"
           @click="show_details_modal = true"
         />
       </template>
diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index 4702b2fb..0027c540 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -24,7 +24,7 @@
           :url="artwork_url(album)"
           :artist="album.artists[0].name"
           :album="album.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
+          class="is-clickable is-medium"
           @click="show_details_modal = true"
         />
       </template>
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index be9e3398..92923999 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -24,7 +24,7 @@
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
+          class="is-clickable is-medium"
           @click="show_details_modal = true"
         />
       </template>
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index ae6ecc2d..0c56d2d8 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -7,7 +7,7 @@
             :url="track.artwork_url"
             :artist="track.artist"
             :album="track.album"
-            class="is-clickable fd-has-shadow fd-cover-big-image"
+            class="is-clickable is-big"
             :class="{ 'is-masked': lyricsStore.pane }"
             @click="open_dialog(track)"
           />
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index bcfd0360..4cd38e5b 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -24,7 +24,7 @@
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
+          class="is-clickable is-medium"
           @click="show_details_modal = true"
         />
       </template>
diff --git a/web-src/src/templates/ContentWithHero.vue b/web-src/src/templates/ContentWithHero.vue
index a2670937..1f9fc4d9 100644
--- a/web-src/src/templates/ContentWithHero.vue
+++ b/web-src/src/templates/ContentWithHero.vue
@@ -5,7 +5,7 @@
         <div class="columns is-centered">
           <div class="column is-four-fifths">
             <div class="columns is-flex-direction-row-reverse">
-              <div class="column fd-has-cover">
+              <div class="column has-cover">
                 <slot name="heading-right" />
               </div>
               <div
@@ -23,14 +23,10 @@
     <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>
     </div>
   </section>
 </template>
-
-<script></script>