From ee2819d826f57348466eddf6a4b6fa14cc1cd2b7 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sat, 14 Dec 2024 14:48:17 +0100
Subject: [PATCH] fix(ui): repair link in card with `to` route (whole card as
 link)

---
 front/src/components/ui/Card.vue | 42 ++++++++++++++++----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index b7c278853..8569111a1 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -25,8 +25,6 @@ const image = typeof props.image === 'string' ? { src: props.image } : props.ima
 const isExternalLink = computed(() => {
   return typeof props.to === 'string' && props.to.startsWith('http')
 })
-
-const c = useCssModule()
 </script>
 
 <style module>
@@ -49,6 +47,14 @@ const c = useCssModule()
   >.covering {
     position: absolute;
     inset: 0;
+
+    &~:is(.title, .content) {
+      pointer-events:none;
+    }
+
+    &:hover~:is(.content) {
+      text-decoration: underline
+    }
   }
 
   &:has(>.image) {
@@ -139,50 +145,44 @@ const c = useCssModule()
 </style>
 
 <template>
-  <Layout stack :class="{ [c.card]: true, [c['is-category']]: category }" style="--gap:16px">
+  <Layout stack :class="{ [$style.card]: true, [$style['is-category']]: category }" style="--gap:16px">
 
-    <a v-if="props.to && isExternalLink" :class="c.covering" :href="to?.toString()" target="_blank">
-      Link to `to`
-    </a>
-
-    <RouterLink v-if="props.to && !isExternalLink" :to="props.to" v-slot="{ isActive, href, navigate }">
-      <a :href="href" @click="navigate" :class="{ [c.covering]: true, activeClass: isActive }">
-        LINK
-
-      </a>
-    </RouterLink>
+    <!-- Link -->
+    <a v-if="props.to && isExternalLink" :class="$style.covering" :href="to?.toString()" target="_blank" />
+    <RouterLink v-if="props.to && !isExternalLink" :class="$style.covering" :to="props.to"
+    />
 
     <!-- Image -->
-    <div v-if="$slots.image" :class="c.image">
+    <div v-if="$slots.image" :class="$style.image">
       <slot name="image" :src="image" />
     </div>
     <img v-else-if="image" :src="image?.src"
-      :class="{ [c.image]: true, [c['with-padding']]: image?.style === 'withPadding' }" />
+      :class="{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }" />
     <Spacer v-else style="--size:12px" />
 
     <!-- Content -->
-    <component :class="c.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component>
+    <component :class="$style.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component>
 
-    <Alert v-if="$slots.alert" :class="c.alert">
+    <Alert v-if="$slots.alert" :class="$style.alert">
       <slot name="alert" />
     </Alert>
 
-    <div v-if="tags" :class="c.tags">
+    <div v-if="tags" :class="$style.tags">
       <Pill v-for="tag in tags" :key="tag">
         #{{ tag }}
       </Pill>
     </div>
 
-    <div v-if="$slots.default" :class="c.content">
+    <div v-if="$slots.default" :class="$style.content">
       <slot />
     </div>
 
     <!-- Footer and Action -->
-    <div v-if="$slots.footer" :class="c.footer">
+    <div v-if="$slots.footer" :class="$style.footer">
       <slot name="footer" />
     </div>
 
-    <div v-if="$slots.action" :class="c.action">
+    <div v-if="$slots.action" :class="$style.action">
       <slot name="action" />
     </div>
     <Spacer v-else-if="!$slots.footer" style="--size:16px" />