EHV/librodrome
18
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix accueil : hero fade doux, icônes safelist, blocs cliquables, menu, dark fort

Browse Source 
- Hero : réécriture composable timeout pur (plus de Transition callbacks)
  Animation fade opacity 1s très douce, lisible
- Icônes : safelist UnoCSS dans nuxt.config.ts (résout pastilles vides)
- Menu : mis à jour site.yml (Numérique/Économique/Citoyenne/Événement)
- Blocs : card entière cliquable, zone actions séparée (border-top)
- Économie du don : lié à /modele-eco (page chapitres préservée)
- Tarifs de l'eau : bouton SejeteralO (localhost:3009 / collectivites.librodrome.org)
- Dark theme fort : bg 220 12% 15%, surface 19%, surface-light 24%
- Config SejeteralO + Glibredecision dans app.config.ts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-03-03 04:08:47 +01:00
parent 97ba6dd04c
commit 082a17d09b
9 changed files with 184 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
app/components/home/AxisBlock.vue
View File

@@ -3,7 +3,7 @@
<!-- Header -->
<div class="flex items-center gap-3 mb-6">
<div class="axis-icon" :class="`axis-icon--${color}`">
<div :class="`i-lucide-${icon} h-6 w-6`" />
<div :class="iconClass(icon)" class="h-6 w-6" />
</div>
<h2 class="font-display text-2xl font-bold text-white">{{ title }}</h2>
</div>
@@ -16,57 +16,39 @@
class="axis-item card-surface"
:class="{ 'axis-item--gestation': item.gestation }"
>
<!-- Item icon -->
<div v-if="item.icon" class="axis-item-icon mb-3" :class="`axis-item-icon--${color}`">
<div :class="`i-lucide-${item.icon} h-5 w-5`" />
</div>
<h3 class="font-display text-lg font-semibold text-white mb-2">
{{ item.label }}
<span v-if="item.gestation" class="gestation-badge">
<div class="i-lucide-flask-conical h-3 w-3" />
En gestation
</span>
</h3>
<p class="text-sm text-white/60 leading-relaxed mb-4">{{ item.description }}</p>
<!-- Actions or link -->
<div class="mt-auto">
<!-- Multiple actions (e.g., Économie du don) -->
<div v-if="item.actions?.length" class="flex flex-wrap gap-2">
<button
v-for="action in item.actions"
:key="action.id"
class="axis-action-btn"
@click="handleAction(action.id)"
>
<div :class="`i-lucide-${action.icon} h-3.5 w-3.5`" />
{{ action.label }}
</button>
<!-- Clickable card body -->
<component
:is="itemTag(item)"
v-bind="itemAttrs(item)"
class="axis-item-body"
>
<!-- Item icon -->
<div v-if="item.icon" class="axis-item-icon" :class="`axis-item-icon--${color}`">
<div :class="iconClass(item.icon)" class="h-5 w-5" />
</div>
<!-- External link -->
<a
v-else-if="item.href"
:href="item.href"
target="_blank"
rel="noopener noreferrer"
class="axis-link"
>
Découvrir
<div class="i-lucide-external-link h-3.5 w-3.5" />
</a>
<h3 class="font-display text-lg font-semibold text-white mb-1">
{{ item.label }}
<span v-if="item.gestation" class="gestation-badge">
<div class="i-lucide-flask-conical h-3 w-3" />
En gestation
</span>
</h3>
<!-- Internal link -->
<NuxtLink
v-else-if="item.to"
:to="item.to"
class="axis-link"
<p class="text-sm text-white/60 leading-relaxed">{{ item.description }}</p>
</component>
<!-- Actions zone (separate from card link) -->
<div v-if="item.actions?.length" class="axis-actions">
<button
v-for="action in item.actions"
:key="action.id"
class="axis-action-btn"
@click.stop="handleAction(action.id)"
>
{{ item.gestation ? 'En savoir plus' : 'Découvrir' }}
<div class="i-lucide-arrow-right h-3.5 w-3.5" />
</NuxtLink>
<div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
{{ action.label }}
</button>
</div>
</div>
</div>
@@ -88,6 +70,7 @@ interface AxisItem {
gestation?: boolean
icon?: string
actions?: AxisAction[]
presentation?: { title: string; text: string }
}
defineProps<{
@@ -108,6 +91,22 @@ function handleAction(id: string) {
else if (id === 'open-pdf') emit('open-pdf')
else if (id === 'launch-gratewizard') emit('launch-gratewizard')
}
function iconClass(name: string) {
return `i-lucide-${name}`
}
function itemTag(item: AxisItem) {
if (item.href) return 'a'
if (item.to) return resolveComponent('NuxtLink')
return 'div'
}
function itemAttrs(item: AxisItem) {
if (item.href) return { href: item.href, target: '_blank', rel: 'noopener noreferrer' }
if (item.to) return { to: item.to }
return {}
}
</script>
<style scoped>
@@ -140,24 +139,33 @@ function handleAction(id: string) {
.axis-item {
display: flex;
flex-direction: column;
padding: 1.25rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--color-text) / 0.08);
background: hsl(var(--color-surface));
transition: border-color 0.2s, box-shadow 0.2s;
overflow: hidden;
}
.axis-item:hover {
border-color: hsl(var(--color-text) / 0.15);
box-shadow: 0 4px 20px hsl(var(--color-text) / 0.05);
border-color: hsl(var(--color-primary) / 0.25);
box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
}
.axis-item--gestation {
opacity: 0.7;
opacity: 0.75;
}
.axis-item--gestation:hover {
opacity: 0.85;
opacity: 0.9;
}
.axis-item-body {
display: flex;
flex-direction: column;
padding: 1.25rem;
flex: 1;
text-decoration: none;
color: inherit;
}
.axis-item-icon {
@@ -167,6 +175,7 @@ function handleAction(id: string) {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5rem;
margin-bottom: 0.75rem;
}
.axis-item-icon--primary {
@@ -194,6 +203,15 @@ function handleAction(id: string) {
vertical-align: middle;
}
.axis-actions {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
padding: 0.75rem 1.25rem;
border-top: 1px solid hsl(var(--color-text) / 0.06);
background: hsl(var(--color-bg) / 0.4);
}
.axis-action-btn {
display: inline-flex;
align-items: center;
@@ -214,18 +232,4 @@ function handleAction(id: string) {
background: hsl(var(--color-primary) / 0.12);
border-color: hsl(var(--color-primary) / 0.3);
}
.axis-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.85rem;
font-weight: 500;
color: hsl(var(--color-primary) / 0.8);
transition: color 0.2s;
}
.axis-link:hover {
color: hsl(var(--color-primary));
}
</style>