feat(aep): carte AEP — push Gitea 2026-04-28
This commit is contained in:
Jules Neny
179
V2-cadrage/M-prompt-session-2-mobile.md
Normal file
179
V2-cadrage/M-prompt-session-2-mobile.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# M — Prompt Sonnet 1.8 : Mobile UX dédié NAV V2
|
||||
|
||||
> **Lancer APRÈS Sonnet 1.7 (correctif desktop final).**
|
||||
> Mission : refonte de l'expérience mobile selon spec Jules validée 2026-04-14.
|
||||
|
||||
## Racine projet
|
||||
`C:\Users\jules\Dropbox\ATIS - IPCJRA\1 PROJETS\TECH - infra VPS, website pro, RAG\nav-carte\`
|
||||
|
||||
## État
|
||||
|
||||
Sonnet 1.7 a posé le desktop final (top search + onglets territoire haut + chatbot zone droite + sidebar filtres+fiches). Le mobile actuel = drawer générique. Toi tu refais le mobile selon la spec ci-dessous.
|
||||
|
||||
Lis AVANT :
|
||||
- `git log --oneline -25`
|
||||
- `JOURNAL-V2.md`
|
||||
- Composants : `app.vue`, `pages/index.vue`, `NavSidebar.vue`, `NavMap.vue`, `FilterDrawer.vue`, `EchelleFilter.vue`, `FonctionFilter.vue`, `TerritoireTabs.vue`, `TopSearchBar.vue`, `ChatbotPlaceholder.vue`
|
||||
|
||||
## Spec mobile (< 1024px)
|
||||
|
||||
```
|
||||
═══════════════════════════════════════════
|
||||
[Logo NAV] [🔍] [✚ Contribuer] ← top nav, recherche s'étend au tap
|
||||
═══════════════════════════════════════════
|
||||
[ Métropole ] [ Outre-mer ] ← onglets territoire (sous top nav)
|
||||
─────────────────────────────────────
|
||||
|
||||
CARTE LEAFLET ← haut, hauteur dynamique
|
||||
(Métropole ou grille ~40-50% viewport par défaut
|
||||
Outre-mer adaptée mobile)
|
||||
|
||||
─── ⇅ (poignée draggable - bonus) ───
|
||||
☐ Nat ☐ Rég ☐ Loc ← échelle ultra compact (1 ligne)
|
||||
[1] Jur ☐ Tech ☐ Eco ☐ Adm … ← fonctions inline, scroll horizontal
|
||||
───────────────────────────────────
|
||||
[card fiche 1] ← liste, scroll vertical, max espace
|
||||
[card fiche 2]
|
||||
[card fiche 3]
|
||||
...
|
||||
|
||||
┌────┐
|
||||
│ 💬 │ ← bouton flottant transparent
|
||||
└────┘ bas-droite, ~56x56px
|
||||
═══════════════════════════════════════════
|
||||
```
|
||||
|
||||
### A) Top nav mobile
|
||||
- `TopSearchBar.vue` reste fonctionnel — au tap, s'étend en pleine largeur
|
||||
- "Contribuer" en bouton compact (icône + texte ou icône seule selon largeur)
|
||||
- Pas de menu hamburger nécessaire (3 éléments suffisent)
|
||||
|
||||
### B) Onglets territoire mobile
|
||||
- Identiques au desktop, juste ré-adaptés en largeur
|
||||
- Placés sous le top nav, au-dessus de la carte
|
||||
- Compact : barre horizontale full-width
|
||||
|
||||
### C) Zone carte mobile
|
||||
- Métropole : carte Leaflet pleine largeur, hauteur ~40-50% viewport
|
||||
- Outre-mer : grille 5 mini-cartes adaptée mobile (1 colonne empilée OU 2 colonnes selon largeur)
|
||||
- Si 5 mini-cartes Leaflet trop lourd sur mobile → fallback 1 carte avec sélecteur dropdown du DOM-TOM affiché (note dans journal)
|
||||
|
||||
### D) Bonus poignée draggable (skip si non-trivial)
|
||||
- Barre horizontale entre carte et tagging (icône ⇅ ou poignée style iOS bottom sheet)
|
||||
- Drag vers le haut → réduit la carte à ~25%, étend la liste fiches
|
||||
- Drag vers le bas → étend la carte à ~70%
|
||||
- Skip si > 30 min de dev — note dans journal pour Session 3
|
||||
|
||||
### E) Tagging compact (entre carte et liste)
|
||||
- Bandeau ultra fin
|
||||
- Échelle : 3 checkboxes en ligne, taille mini (16-18px), labels courts ("Nat", "Rég", "Loc")
|
||||
- Fonctions : inline, scroll horizontal (overflow-x: auto), max 1 ligne visible
|
||||
- Chaque fonction : case + label compact
|
||||
- Numéro priorité visible quand sélectionnée [1], [2], etc.
|
||||
- Bouton "tout effacer" mini icône à droite si filtres actifs
|
||||
|
||||
### F) Liste fiches mobile
|
||||
- Cards compactes (densité supérieure au desktop)
|
||||
- Tap sur card → centre la carte sur la fiche + pin highlighted (animation léger zoom)
|
||||
- Scroll vertical infini (toutes les fiches filtrées)
|
||||
- Header "N résultats" sticky en haut de la liste
|
||||
|
||||
### G) Bouton chatbot flottant
|
||||
- Position fixed bas-droite, ~56x56px
|
||||
- Fond `--nav-primary` avec opacité ~85% (transparence)
|
||||
- Icône 💬 ou MessageCircle
|
||||
- Shadow légère
|
||||
- Tap → ouvre **bottom sheet plein écran** :
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ ← Retour 💬 NAV │ ← header sheet
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ (zone discussion IA) │
|
||||
│ placeholder pour S3 │
|
||||
│ │
|
||||
│ │
|
||||
├─────────────────────────────────────────┤
|
||||
│ [Pose ta question…] [➤] │ ← input + bouton envoi (disabled)
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- Composant `ChatbotSheet.vue` (ou réutiliser `ChatbotPlaceholder.vue` adapté)
|
||||
- Animation slide-up depuis le bas
|
||||
- Fermeture : tap "← Retour" ou backdrop ou swipe down
|
||||
- Logique : strictement visuelle, pas d'IA branchée (Session 3)
|
||||
|
||||
### H) Suppression du drawer "Filtres" actuel
|
||||
|
||||
- L'ancien drawer `FilterDrawer.vue` n'a plus de raison d'être (filtres sont maintenant inline dans le flow mobile)
|
||||
- Soit : supprimer FilterDrawer + bouton flottant "Filtres" associé
|
||||
- Soit : transformer en `ChatbotSheet.vue` et brancher au bouton 💬
|
||||
|
||||
→ Tranche au plus propre.
|
||||
|
||||
## Règles
|
||||
|
||||
- Mobile-first
|
||||
- Ne touche pas : page fiche détail, formulaire `/contribuer`, schéma NocoDB, worker IA
|
||||
- Palette stricte
|
||||
- Accents français
|
||||
- Commits atomiques par bloc
|
||||
- Update `JOURNAL-V2.md`
|
||||
|
||||
## Délégation cascade autorisée
|
||||
|
||||
Sous-agents Task pour : recherche pattern bottom sheet Vue, recherche pattern poignée draggable, recherche multi-Leaflet adaptation mobile.
|
||||
|
||||
## Critère de fin
|
||||
|
||||
- Mobile (< 1024px en devtools ou vrai téléphone) :
|
||||
- Top nav avec recherche fonctionnelle
|
||||
- Onglets territoire commutent vue carte
|
||||
- Carte Leaflet en haut, lisible
|
||||
- Tagging compact échelle + fonctions inline
|
||||
- Liste fiches scrollable
|
||||
- Tap card → centre carte
|
||||
- Bouton chatbot flottant
|
||||
- Tap chatbot → bottom sheet plein écran
|
||||
- `npm run build` clean
|
||||
- Aucune régression desktop (≥ 1024px)
|
||||
- Commits poussés
|
||||
- JOURNAL-V2 à jour
|
||||
|
||||
## Doute / blocage
|
||||
|
||||
- Multi-Leaflet 5 instances trop lourd mobile → fallback 1 carte + dropdown sélecteur DOM-TOM
|
||||
- Poignée draggable non-trivial → skip + note S3
|
||||
- Bottom sheet animation Vue compliqué → utiliser `<Teleport>` + transition CSS simple
|
||||
- Spec ambiguë → tranche au plus simple, note journal
|
||||
- Blocage dur → STOP + reporte
|
||||
|
||||
## Résumé attendu
|
||||
|
||||
```
|
||||
## S2 Étape 2 — Mobile UX [DONE / BLOCKED]
|
||||
|
||||
### Ajustements
|
||||
- ✓/✗ A) Top nav mobile (recherche)
|
||||
- ✓/✗ B) Onglets territoire mobile
|
||||
- ✓/✗ C) Zone carte (Métropole + Outre-mer adapté)
|
||||
- ✓/✗ D) Poignée draggable (bonus) : fait / skipped
|
||||
- ✓/✗ E) Tagging compact inline
|
||||
- ✓/✗ F) Liste fiches + tap → centre carte
|
||||
- ✓/✗ G) Bouton chatbot flottant + bottom sheet
|
||||
- ✓/✗ H) Drawer Filtres supprimé/transformé
|
||||
|
||||
### Décisions
|
||||
- Multi-Leaflet mobile : fait / fallback (raison)
|
||||
- Poignée : fait / skipped (raison)
|
||||
|
||||
### À tester
|
||||
- Devtools mobile (Pixel 7, iPhone 14 Pro)
|
||||
- Si possible : vrai tel via npm run dev -- --host
|
||||
|
||||
### Fichiers / Commits
|
||||
- ...
|
||||
```
|
||||
|
||||
Go.
|
||||
Reference in New Issue
Block a user