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>

88
app/components/home/TypewriterText.vue
View File

@@ -1,36 +1,25 @@
<template>
<ClientOnly>
<div class="hero-text" @click="handleClick">
<!-- Locked sentences (stays: true, already shown) -->
<!-- Locked sentences (stays: true, already revealed) -->
<TransitionGroup name="lock">
<div v-for="(item, i) in lockedSentences" :key="`lock-${i}`">
<div v-if="item.separator" class="hero-separator" />
<p
v-else
class="hero-line"
:class="styleClass(item.style)"
>
<p v-else class="hero-line" :class="styleClass(item.style)">
{{ item.text }}
</p>
</div>
</TransitionGroup>
<!-- Active sentence — fade + swipe -->
<!-- Active sentence — pure CSS opacity fade -->
<div class="hero-active-zone">
<Transition
name="sentence"
@after-enter="onEntered"
@after-leave="onLeft"
<p
v-show="currentText"
class="hero-line hero-active"
:class="[styleClass(currentStyle), { 'is-visible': isVisible }]"
>
<p
v-if="showActive && currentSentence"
:key="currentIndex"
class="hero-line"
:class="styleClass(currentSentence.style)"
>
{{ currentSentence.text }}
</p>
</Transition>
{{ currentText }}
</p>
</div>
</div>
@@ -60,13 +49,11 @@ const props = defineProps<{
const stayingSentences = computed(() => props.sentences.filter(s => s.stays))
const {
currentIndex,
currentSentence,
showActive,
currentText,
currentStyle,
isVisible,
lockedSentences,
isComplete,
onEntered,
onLeft,
start,
skipToEnd,
} = useTypewriter(props.sentences)
@@ -91,7 +78,7 @@ function styleClass(style?: string) {
<style scoped>
.hero-text {
text-align: center;
min-height: 14rem;
min-height: 16rem;
display: flex;
flex-direction: column;
justify-content: center;
@@ -104,30 +91,30 @@ function styleClass(style?: string) {
margin: 0;
padding: 0.3em 0;
font-family: var(--font-display);
line-height: 1.35;
line-height: 1.4;
}
.hero-line--title {
font-weight: 700;
font-size: clamp(1.4rem, 4vw, 2.4rem);
color: hsl(var(--color-text));
font-weight: 600;
font-size: clamp(1.3rem, 3.5vw, 2.2rem);
color: hsl(var(--color-text) / 0.95);
letter-spacing: -0.01em;
}
.hero-line--citation {
font-style: italic;
font-weight: 400;
font-size: clamp(1.1rem, 3vw, 1.6rem);
color: hsl(var(--color-text) / 0.75);
max-width: 38ch;
font-size: clamp(1.05rem, 2.8vw, 1.5rem);
color: hsl(var(--color-text) / 0.7);
max-width: 40ch;
margin-inline: auto;
}
.hero-line--body {
font-weight: 400;
font-size: clamp(1rem, 2.5vw, 1.35rem);
font-size: clamp(1rem, 2.5vw, 1.3rem);
color: hsl(var(--color-text) / 0.6);
max-width: 44ch;
max-width: 46ch;
margin-inline: auto;
}
@@ -140,7 +127,7 @@ function styleClass(style?: string) {
background: linear-gradient(
to right,
transparent,
hsl(var(--color-primary) / 0.5),
hsl(var(--color-primary) / 0.45),
transparent
);
border-radius: 1px;
@@ -149,44 +136,33 @@ function styleClass(style?: string) {
/* ── Active zone ── */
.hero-active-zone {
min-height: 4.5rem;
min-height: 5rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* ── Active sentence transition (fade + swipe) ── */
/* ── Active sentence — opacity fade ── */
.sentence-enter-active {
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sentence-leave-active {
transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0),
transform 0.6s cubic-bezier(0.7, 0, 0.84, 0);
}
.sentence-enter-from {
.hero-active {
opacity: 0;
transform: translateY(24px);
transition: opacity 1s ease;
}
.sentence-leave-to {
opacity: 0;
transform: translateY(-18px);
.hero-active.is-visible {
opacity: 1;
}
/* ── Locked sentences transition ── */
/* ── Locked sentences entrance ── */
.lock-enter-active {
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.lock-enter-from {
opacity: 0;
transform: translateY(12px);
transform: translateY(8px);
}
.lock-move {