jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(b3): M3 — vue Fiches mobile pleine hauteur, intention avant le compteur

Browse Source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Jules
2026-09-25 12:23:52 +02:00
co-authored by Claude Sonnet 5
parent 1838f4b02d
commit 13af3fa1c5
3 changed files with 55 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/FichesPanel.vue
+9 -5
View File
@@ -12,6 +12,10 @@
<div class="fiches-panel__head">
<p class="fiches-panel__intention">{{ intention }}</p>
<div class="fiches-panel__count">
{{ fiches.length }} fiche{{ fiches.length > 1 ? 's' : '' }}
</div>
<ChipGroup v-if="hashtags.length" aria-label="Filtrer les fiches" class="fiches-panel__chips">
<Chip
v-for="tag in hashtags"
@@ -22,10 +26,6 @@
@toggle="toggle(tag)"
/>
</ChipGroup>
<div class="fiches-panel__count">
{{ fiches.length }} fiche{{ fiches.length > 1 ? 's' : '' }}
</div>
</div>
<div class="fiches-panel__body">
@@ -93,7 +93,7 @@ function toggle(tag: string) {
}
.fiches-panel__count {
margin-top: var(--space-xs);
margin: 0 0 var(--space-xs);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
@@ -101,6 +101,10 @@ function toggle(tag: string) {
color: var(--text-subtle);
}
.fiches-panel__chips {
margin-top: var(--space-2xs);
}
.fiches-panel__body {
flex: 1;
min-height: 0;
pages/agences.vue
+22 -18
View File
@@ -310,10 +310,29 @@
</ClientOnly>
</div>
<!-- Fond neutre pour l'onglet « Fiches » (pas de carte dessous) -->
<div v-show="mobileMapView === 'fiches'" class="absolute inset-0" style="background: var(--nav-bg-alt);" />
<!-- Zone « Fiches » mobile (B3-M3) — pleine hauteur sous la barre d'onglets,
pas de carte dessous donc pas de sheet demi-hauteur (même logique que
la vue graphe qui masque déjà le MobileSheet). Fix 2026-09-25 : la
version précédente empilait un second MobileSheet (état half par
défaut) au-dessus d'un fond neutre plein écran, laissant ~45% de
hauteur vide au-dessus du panneau. -->
<div
v-show="mobileMapView === 'fiches'"
class="absolute inset-0 flex flex-col overflow-hidden"
style="background: var(--nav-bg-alt);"
>
<FichesPanel
:fiches="allStructuresMini"
:hashtags="allHashtags"
:selected="selectedHashtags"
:query="search"
intention="Toutes les agences et réseaux du répertoire, filtrables par hashtag."
@update:selected="selectedHashtags = $event"
@open="(fiche) => onSelectStructureMobile(String(fiche.id))"
/>
</div>
<!-- Bottom sheet swipable (masqué en vue graphique pour ne pas occulter le canvas) -->
<!-- Bottom sheet swipable (masqué en vue graphique et en vue fiches) -->
<ClientOnly v-if="mobileMapView !== 'graphe' && mobileMapView !== 'fiches'">
<MobileSheet :resultCount="filtered.length" :pending="pending">
<!-- Bandeau intention mobile -->
@@ -405,21 +424,6 @@
</div>
</MobileSheet>
</ClientOnly>
<!-- Bottom sheet — onglet « Fiches » mobile (B3-M3), contenu dédié -->
<ClientOnly v-else-if="mobileMapView === 'fiches'">
<MobileSheet :resultCount="filtered.length" :pending="pending">
<FichesPanel
:fiches="allStructuresMini"
:hashtags="allHashtags"
:selected="selectedHashtags"
:query="search"
intention="Toutes les agences et réseaux du répertoire, filtrables par hashtag."
@update:selected="selectedHashtags = $event"
@open="(fiche) => onSelectStructureMobile(String(fiche.id))"
/>
</MobileSheet>
</ClientOnly>
</div>
</main>
pages/index.vue
+24 -18
View File
@@ -193,12 +193,31 @@
</ClientOnly>
</div>
<!-- Fond neutre pour l'onglet « Fiches » (pas de carte dessous) -->
<div v-show="mobileMapView === 'fiches'" class="absolute inset-0" style="background: var(--nav-bg-alt);" />
<!-- Zone « Fiches » mobile (B3-M3) — pleine hauteur sous la barre d'onglets,
pas de carte dessous donc pas de sheet demi-hauteur (même logique que
la vue graphe qui masque aussi le MobileSheet). Fix 2026-09-25 : la
version précédente empilait un second MobileSheet (état half par
défaut) au-dessus d'un fond neutre plein écran, laissant ~45% de
hauteur vide au-dessus du panneau. -->
<div
v-show="mobileMapView === 'fiches'"
class="absolute inset-0 flex flex-col overflow-hidden"
style="background: var(--nav-bg-alt);"
>
<FichesPanel
:fiches="allFichesMini"
:hashtags="[...FONCTIONS]"
:selected="fonctions"
:query="search"
intention="Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer."
@update:selected="onFonctions"
@open="(fiche) => onSelectOrgMobile(Number(fiche.id))"
/>
</div>
<!-- Bottom sheet swipable (Métropole, Outre-mer et Fiches) -->
<ClientOnly>
<MobileSheet v-if="mobileMapView !== 'fiches'" :resultCount="filtered.length" :pending="pending">
<!-- Bottom sheet swipable (Métropole et Outre-mer uniquement) -->
<ClientOnly v-if="mobileMapView !== 'fiches'">
<MobileSheet :resultCount="filtered.length" :pending="pending">
<!-- Barre recherche -->
<div class="px-3 pt-2 pb-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
<label class="mobile-search-label" aria-label="Rechercher une organisation">
@@ -314,19 +333,6 @@
</div>
</div>
</MobileSheet>
<!-- Bottom sheet — onglet « Fiches » mobile (B3-M3), contenu dédié -->
<MobileSheet v-else :resultCount="filtered.length" :pending="pending">
<FichesPanel
:fiches="allFichesMini"
:hashtags="[...FONCTIONS]"
:selected="fonctions"
:query="search"
intention="Toutes les structures d'entraide, y compris celles sans adresse sur la carte. Cochez une fonction pour filtrer."
@update:selected="onFonctions"
@open="(fiche) => onSelectOrgMobile(Number(fiche.id))"
/>
</MobileSheet>
</ClientOnly>
</div>