From 4f37a52b9d69d20d4a256f5d1052cef997d3a7ee Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 22 Jan 2025 13:24:38 +0100
Subject: [PATCH] feat(ui): round card-image for artist cards

---
 front/src/components/artist/Card.vue | 27 ++++++++-------------------
 front/src/components/ui/Card.vue     |  4 ++--
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/front/src/components/artist/Card.vue b/front/src/components/artist/Card.vue
index e2edc29bb..05ef94927 100644
--- a/front/src/components/artist/Card.vue
+++ b/front/src/components/artist/Card.vue
@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 import Card from '~/components/ui/Card.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import type { Artist } from '~/types'
 
@@ -46,6 +47,7 @@ const imageUrl = computed(() => cover.value?.urls.original
   <Card
     :title="artist.name"
     :image="imageUrl"
+    class="card artist-card"
     :tags="artist.tags"
     :to="{name: 'library.artists.detail', params: {id: artist.id}}"
   >
@@ -79,33 +81,20 @@ const imageUrl = computed(() => cover.value?.urls.original
   </Card>
 </template>
 
-<style scoped>
+<style lang="scss">
+
 .funkwhale {
-  &.card.artist-card {
-    --fw-border-radius: 12px;
-    --fw-card-width: 208px;
-    --fw-card-image-width: calc(var(--fw-card-width) - 16px);
-    --fw-card-padding: 16px;
+  .card.artist-card {
 
     > .card-image {
-      border-radius: 50% !important;
-      width: var(--fw-card-image-width);
-      margin: calc(-1 * var(--fw-card-padding) + 8px) calc(-1 * var(--fw-card-padding) + 8px) 0;
+      border-radius: 50%;
+      width: 248px;
+      margin: 16px;
     }
 
     .play-button {
       top: calc(var(--fw-card-width) - 44px - 8px) !important;
     }
-
-    > .card-title {
-      font-size: 1rem;
-      text-align: left !important;
-    }
-
-    > .card-content {
-      padding-top: 6px !important;
-      text-align: left !important;
-    }
   }
 }
 </style>
diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index 8090972ec..f8e3e8ef2 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -49,11 +49,11 @@ const attributes = computed(() =>
 
     <!-- Image -->
 
-    <div v-if="$slots.image" :class="$style.image">
+    <div v-if="$slots.image" :class="[$style.image, 'card-image']">
       <slot name="image" :src="image" />
     </div>
     <img v-else-if="image" :src="image?.src"
-      :class="{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }" />
+      :class="[{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }, 'card-image']" />
     <Spacer v-else :size="'small' in props ? 20 : 28" />
 
     <!-- Icon -->