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:
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user