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:
@@ -312,6 +312,26 @@
|
||||
@highlightOrgs="onHighlightOrgs"
|
||||
/>
|
||||
|
||||
<!-- ═══════════════════════════════════════ POP-UP MISSION ENTRAIDE -->
|
||||
<button
|
||||
class="mission-info-btn"
|
||||
type="button"
|
||||
@click="missionOpen = true"
|
||||
aria-label="À propos de cette carte d'entraide"
|
||||
title="À propos de cette carte"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="12" y1="16" x2="12" y2="12"/>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<MissionPopup
|
||||
:modelValue="missionOpen"
|
||||
@update:modelValue="missionOpen = $event"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -344,6 +364,15 @@ const chatbotOpen = ref(false)
|
||||
const ficheModalOpen = ref(false)
|
||||
const ficheModalId = ref<number | null>(null)
|
||||
const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
|
||||
const missionOpen = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
if (!localStorage.getItem('aep_mission_seen')) {
|
||||
missionOpen.value = true
|
||||
}
|
||||
} catch {}
|
||||
})
|
||||
// Surlignage temporaire (5 sec) suite à une réponse chatbot
|
||||
// → sélectionne le premier ID recommandé sur la carte, puis remet à null
|
||||
let highlightTimer: ReturnType<typeof setTimeout> | null = null
|
||||
@@ -575,3 +604,29 @@ function fonctionsList(org: Org): string[] {
|
||||
|
||||
useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mission-info-btn {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 16px;
|
||||
z-index: 1000;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--nav-surface);
|
||||
color: var(--nav-text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 12px rgba(26,34,56,0.18);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s, transform 0.1s;
|
||||
}
|
||||
.mission-info-btn:hover { opacity: 0.85; transform: translateY(-1px); color: var(--nav-text); }
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.mission-info-btn { bottom: 16px; left: 340px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user