fix(b3): M3 — vue Fiches mobile pleine hauteur, intention avant le compteur
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -12,6 +12,10 @@
|
|||||||
<div class="fiches-panel__head">
|
<div class="fiches-panel__head">
|
||||||
<p class="fiches-panel__intention">{{ intention }}</p>
|
<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">
|
<ChipGroup v-if="hashtags.length" aria-label="Filtrer les fiches" class="fiches-panel__chips">
|
||||||
<Chip
|
<Chip
|
||||||
v-for="tag in hashtags"
|
v-for="tag in hashtags"
|
||||||
@@ -22,10 +26,6 @@
|
|||||||
@toggle="toggle(tag)"
|
@toggle="toggle(tag)"
|
||||||
/>
|
/>
|
||||||
</ChipGroup>
|
</ChipGroup>
|
||||||
|
|
||||||
<div class="fiches-panel__count">
|
|
||||||
{{ fiches.length }} fiche{{ fiches.length > 1 ? 's' : '' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="fiches-panel__body">
|
<div class="fiches-panel__body">
|
||||||
@@ -93,7 +93,7 @@ function toggle(tag: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fiches-panel__count {
|
.fiches-panel__count {
|
||||||
margin-top: var(--space-xs);
|
margin: 0 0 var(--space-xs);
|
||||||
font-size: var(--fs-xs);
|
font-size: var(--fs-xs);
|
||||||
font-weight: var(--fw-semibold);
|
font-weight: var(--fw-semibold);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -101,6 +101,10 @@ function toggle(tag: string) {
|
|||||||
color: var(--text-subtle);
|
color: var(--text-subtle);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fiches-panel__chips {
|
||||||
|
margin-top: var(--space-2xs);
|
||||||
|
}
|
||||||
|
|
||||||
.fiches-panel__body {
|
.fiches-panel__body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|||||||
+22
-18
@@ -310,10 +310,29 @@
|
|||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Fond neutre pour l'onglet « Fiches » (pas de carte dessous) -->
|
<!-- Zone « Fiches » mobile (B3-M3) — pleine hauteur sous la barre d'onglets,
|
||||||
<div v-show="mobileMapView === 'fiches'" class="absolute inset-0" style="background: var(--nav-bg-alt);" />
|
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'">
|
<ClientOnly v-if="mobileMapView !== 'graphe' && mobileMapView !== 'fiches'">
|
||||||
<MobileSheet :resultCount="filtered.length" :pending="pending">
|
<MobileSheet :resultCount="filtered.length" :pending="pending">
|
||||||
<!-- Bandeau intention mobile -->
|
<!-- Bandeau intention mobile -->
|
||||||
@@ -405,21 +424,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</MobileSheet>
|
</MobileSheet>
|
||||||
</ClientOnly>
|
</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>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
+24
-18
@@ -193,12 +193,31 @@
|
|||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Fond neutre pour l'onglet « Fiches » (pas de carte dessous) -->
|
<!-- Zone « Fiches » mobile (B3-M3) — pleine hauteur sous la barre d'onglets,
|
||||||
<div v-show="mobileMapView === 'fiches'" class="absolute inset-0" style="background: var(--nav-bg-alt);" />
|
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) -->
|
<!-- Bottom sheet swipable (Métropole et Outre-mer uniquement) -->
|
||||||
<ClientOnly>
|
<ClientOnly v-if="mobileMapView !== 'fiches'">
|
||||||
<MobileSheet v-if="mobileMapView !== 'fiches'" :resultCount="filtered.length" :pending="pending">
|
<MobileSheet :resultCount="filtered.length" :pending="pending">
|
||||||
<!-- Barre recherche -->
|
<!-- Barre recherche -->
|
||||||
<div class="px-3 pt-2 pb-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
|
<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">
|
<label class="mobile-search-label" aria-label="Rechercher une organisation">
|
||||||
@@ -314,19 +333,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</MobileSheet>
|
</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>
|
</ClientOnly>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user