1
0
forked from EHV/librodrome

Home/citoyenne : blocs entièrement cliquables + SejeteralO dans tarifs eau

- AxisBlock : overlay z-index 1 (au-dessus du contenu), actions z-index 2
  (boutons au-dessus de l'overlay) — fix blocage du clic sur tout le bloc
- citoyenne/index : même correction overlay/z-index ; suppression des
  NuxtLink "En savoir plus" devenus redondants (overlay gère la navigation)
- home.yml : ajout bouton "Ouvrir SejeteralO" sur le bloc Tarifs de l'eau

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-03-24 00:12:39 +01:00
parent efed0b9033
commit a038851895
3 changed files with 44 additions and 19 deletions

View File

@@ -16,12 +16,17 @@
class="axis-item card-surface" class="axis-item card-surface"
:class="{ 'axis-item--gestation': item.gestation }" :class="{ 'axis-item--gestation': item.gestation }"
> >
<!-- Clickable card body --> <!-- Overlay link full card clickable (z-index 0) -->
<component <component
:is="itemTag(item)" :is="itemTag(item)"
v-bind="itemAttrs(item)" v-bind="itemAttrs(item)"
class="axis-item-body" class="axis-item-overlay"
> :aria-label="item.label"
tabindex="-1"
/>
<!-- Card body (position relative, z-index 1 above overlay) -->
<div class="axis-item-body">
<!-- Item icon --> <!-- Item icon -->
<div v-if="item.icon" class="axis-item-icon" :class="`axis-item-icon--${color}`"> <div v-if="item.icon" class="axis-item-icon" :class="`axis-item-icon--${color}`">
<span v-if="item.icon === 'g1'" class="axis-item-icon-g1">Ğ1</span> <span v-if="item.icon === 'g1'" class="axis-item-icon-g1">Ğ1</span>
@@ -46,9 +51,9 @@
</div> </div>
<p class="axis-pi-text">{{ item.presentation.text }}</p> <p class="axis-pi-text">{{ item.presentation.text }}</p>
</div> </div>
</component> </div>
<!-- Actions zone (separate from card link) --> <!-- Actions zone z-index 1, above overlay, boutons ouvrent liens externes -->
<div v-if="item.actions?.length" class="axis-actions"> <div v-if="item.actions?.length" class="axis-actions">
<!-- Primary row --> <!-- Primary row -->
<div class="axis-actions-row"> <div class="axis-actions-row">
@@ -185,9 +190,18 @@ function itemAttrs(item: AxisItem) {
border: 1px solid hsl(var(--color-text) / 0.08); border: 1px solid hsl(var(--color-text) / 0.08);
background: hsl(var(--color-surface)); background: hsl(var(--color-surface));
transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
/* overflow: visible pour laisser le tooltip sortir du cadre */ /* overflow: visible pour laisser le tooltip sortir du cadre */
} }
/* Lien overlay — couvre toute la carte, AU-DESSUS du contenu */
.axis-item-overlay {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.axis-item:hover { .axis-item:hover {
border-color: hsl(var(--color-primary) / 0.25); border-color: hsl(var(--color-primary) / 0.25);
box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06); box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
@@ -206,7 +220,6 @@ function itemAttrs(item: AxisItem) {
flex-direction: column; flex-direction: column;
padding: 1.25rem; padding: 1.25rem;
flex: 1; flex: 1;
text-decoration: none;
color: inherit; color: inherit;
} }
@@ -262,6 +275,8 @@ function itemAttrs(item: AxisItem) {
background: hsl(var(--color-bg) / 0.4); background: hsl(var(--color-bg) / 0.4);
border-bottom-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
position: relative;
z-index: 2;
} }
.axis-actions-row { .axis-actions-row {

View File

@@ -343,7 +343,8 @@
<div class="mx-auto max-w-3xl flex flex-col gap-6"> <div class="mx-auto max-w-3xl flex flex-col gap-6">
<!-- Decision collective --> <!-- Decision collective -->
<div class="item-card"> <div class="item-card">
<NuxtLink to="/citoyenne/decision" class="item-body group"> <NuxtLink to="/citoyenne/decision" class="item-overlay" aria-label="Décision collective" tabindex="-1" />
<div class="item-body group">
<div class="item-header"> <div class="item-header">
<div class="item-icon"> <div class="item-icon">
<div class="i-lucide-gavel h-5 w-5" /> <div class="i-lucide-gavel h-5 w-5" />
@@ -355,11 +356,7 @@
<p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))"> <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
Se donner les moyens de la décision collective. Se donner les moyens de la décision collective.
</p> </p>
<div class="mt-3 inline-flex items-center gap-1 text-sm text-primary group-hover:text-primary/80 transition-colors"> </div>
En savoir plus
<div class="i-lucide-arrow-right h-3.5 w-3.5" />
</div>
</NuxtLink>
<div class="item-actions"> <div class="item-actions">
<a :href="decisionUrl" target="_blank" rel="noopener" class="action-btn action-btn--primary"> <a :href="decisionUrl" target="_blank" rel="noopener" class="action-btn action-btn--primary">
<div class="i-lucide-external-link h-3.5 w-3.5" /> <div class="i-lucide-external-link h-3.5 w-3.5" />
@@ -370,7 +367,8 @@
<!-- Tarifs de l'eau --> <!-- Tarifs de l'eau -->
<div class="item-card"> <div class="item-card">
<NuxtLink to="/citoyenne/tarifs-eau" class="item-body group"> <NuxtLink to="/citoyenne/tarifs-eau" class="item-overlay" aria-label="Tarifs de l'eau" tabindex="-1" />
<div class="item-body group">
<div class="item-header"> <div class="item-header">
<div class="item-icon"> <div class="item-icon">
<div class="i-lucide-droplets h-5 w-5" /> <div class="i-lucide-droplets h-5 w-5" />
@@ -387,11 +385,7 @@
Application pour obtenir justice sociale et incitation dynamique à la réduction. Application pour obtenir justice sociale et incitation dynamique à la réduction.
Permet de confier la décision à la population des communes. Permet de confier la décision à la population des communes.
</p> </p>
<div class="mt-3 inline-flex items-center gap-1 text-sm text-primary group-hover:text-primary/80 transition-colors"> </div>
En savoir plus
<div class="i-lucide-arrow-right h-3.5 w-3.5" />
</div>
</NuxtLink>
<div class="item-actions"> <div class="item-actions">
<a :href="sejeteral0Url" target="_blank" rel="noopener" class="action-btn action-btn--primary"> <a :href="sejeteral0Url" target="_blank" rel="noopener" class="action-btn action-btn--primary">
<div class="i-lucide-external-link h-3.5 w-3.5" /> <div class="i-lucide-external-link h-3.5 w-3.5" />
@@ -431,16 +425,24 @@ useHead({
background: hsl(var(--color-surface)); background: hsl(var(--color-surface));
transition: border-color 0.2s; transition: border-color 0.2s;
overflow: hidden; overflow: hidden;
position: relative;
cursor: pointer;
} }
.item-card:hover { .item-card:hover {
border-color: hsl(var(--color-primary) / 0.2); border-color: hsl(var(--color-primary) / 0.2);
} }
/* Lien overlay — couvre toute la carte, AU-DESSUS du contenu */
.item-overlay {
position: absolute;
inset: 0;
z-index: 1;
}
.item-body { .item-body {
display: block; display: block;
padding: 1.5rem; padding: 1.5rem;
text-decoration: none;
color: inherit; color: inherit;
} }
@@ -484,6 +486,8 @@ useHead({
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border-top: 1px solid hsl(var(--color-text) / 0.06); border-top: 1px solid hsl(var(--color-text) / 0.06);
background: hsl(var(--color-bg) / 0.4); background: hsl(var(--color-bg) / 0.4);
position: relative;
z-index: 2;
} }
.action-btn { .action-btn {

View File

@@ -121,6 +121,12 @@ axes:
to: /citoyenne/tarifs-eau to: /citoyenne/tarifs-eau
gestation: true gestation: true
icon: droplets icon: droplets
actions:
- id: open-sejeteral0
label: Ouvrir SejeteralO
icon: external-link
highlight: true
href: https://collectivites.librodrome.org
gratewizard: gratewizard:
title: grateWizard title: grateWizard
subtitle: Un utilitaire pratique pour estimer les valeurs de façon relative subtitle: Un utilitaire pratique pour estimer les valeurs de façon relative