feat(mobile+UX): refonte hamburger, pop-ups Mission, Manifeste, fixes mobile
Hamburger: - Ajout Jobs, Manifeste, Soutenir - Ré-ordonnancement (cartes/RAG/Codev en haut, ressources en bas) Pop-ups Mission: - MissionPopup générique (slot, props title/ctaLabel/storageKey) - Auto-show 1ère visite Carte 1 (Entraide) et Carte 2 (Réseaux AEP) - Bouton (i) flottant pour rouvrir Pages: - /manifeste : nouvelle page (texte version page-carto-V1) - /a-propos : section 1 retirée (devient pop-up Carte 1) + scroll latéral fixé - /agences : 3e onglet "Graphe" sur mobile + labels structures sur GraphView - /trouver-du-taf : intro pédagogique repliable (onglets / tags / 5 axes), filtres mobile repliables, "Plateformes B2C" → "Pour archi indépendants" Mobile UX: - FAB coeur jaune Soutenir retiré (BandeauBas) — accessible via hamburger - FicheModal/V2 : décalage top:76px sur mobile pour ne plus mordre header - Logo header : "Architecture d'Écologie / Politique" en clair (2 lignes) Cause racine résolue: - /api/chatbot-reseaux n'avait jamais été déployé → 404 en prod avant ce build 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
35
app.vue
35
app.vue
@@ -7,21 +7,16 @@
|
||||
style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a href="/" class="flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0 group relative" title="Architecture d'Écologie Politique">
|
||||
<a href="/" class="logo-link flex items-center gap-2 hover:opacity-90 transition-opacity shrink-0" title="Architecture d'Écologie Politique">
|
||||
<div
|
||||
class="h-7 px-2 rounded-lg flex items-center justify-center shrink-0"
|
||||
class="h-8 px-2 rounded-lg flex items-center justify-center shrink-0"
|
||||
style="background: var(--nav-primary-solid);"
|
||||
>
|
||||
<span class="font-bold text-xs tracking-tight" style="color: var(--nav-text-on-primary);">AEP</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold text-base tracking-tight leading-tight" style="color: var(--nav-text);">AEP</span>
|
||||
<span class="text-xs leading-tight hidden lg:inline" style="color: var(--nav-text-muted);">Architecture d'Écologie Politique</span>
|
||||
</div>
|
||||
<!-- Tooltip sm (quand le sous-titre lg est caché) -->
|
||||
<div class="absolute left-0 top-full mt-2 px-2 py-1 rounded text-xs whitespace-nowrap pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity lg:hidden z-50"
|
||||
style="background: var(--nav-primary-solid); color: var(--nav-text-on-primary);">
|
||||
Architecture d'Écologie Politique
|
||||
<div class="logo-text flex flex-col leading-tight">
|
||||
<span class="logo-line-1 font-bold tracking-tight" style="color: var(--nav-text);">Architecture</span>
|
||||
<span class="logo-line-2 font-bold tracking-tight" style="color: var(--nav-text);">d'Écologie Politique</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -178,11 +173,14 @@
|
||||
@click="hamburgerOpen = false"
|
||||
>
|
||||
<NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink>
|
||||
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Réseaux AEP</NuxtLink>
|
||||
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/agences' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Réseaux AEP</NuxtLink>
|
||||
<NuxtLink to="/trouver-du-taf" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/trouver-du-taf' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Jobs</NuxtLink>
|
||||
<NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">RAG</NuxtLink>
|
||||
<NuxtLink to="/codev" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/codev') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Codev</NuxtLink>
|
||||
<div style="height: 1px; background: var(--nav-bg-alt); margin: 4px 0;"></div>
|
||||
<NuxtLink to="/manifeste" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path === '/manifeste' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text-muted);'">Manifeste</NuxtLink>
|
||||
<NuxtLink to="/a-propos" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">À propos</NuxtLink>
|
||||
<a href="https://liberapay.com/trans-former.fr/donate" target="_blank" rel="noopener noreferrer" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Soutenir →</a>
|
||||
<NuxtLink to="/signaler" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Signaler</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,6 +260,21 @@ function goRandom() {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* ── Logo header (texte 2 lignes) ─────────────────────────────────────── */
|
||||
.logo-text {
|
||||
line-height: 1.05;
|
||||
}
|
||||
.logo-line-1, .logo-line-2 {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.logo-line-1, .logo-line-2 { font-size: 0.78rem; }
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.logo-line-1, .logo-line-2 { font-size: 0.85rem; }
|
||||
}
|
||||
|
||||
/* ── Onglets header desktop ───────────────────────────────────────────── */
|
||||
.nav-tab {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user