feat: add toggle map for small devices (#328)

src/features/cartographie/components/departements-list/departements-list.component.html

@@ -20,4 +20,10 @@ <h2 class="h5 mb-0">
       </a>
     </article>
   </div>
+  <div class="bg-primary py-3 px-4 text-end d-block d-lg-none">
+    <button class="btn btn-link link-light text-decoration-none" (click)="cartographieLayout.toggleMapForSmallDevices()">
+      Afficher la carte
+      <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
+    </button>
+  </div>
 </div>

src/features/cartographie/components/departements-list/departements-list.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { DepartementPresentation } from '../../../core/presenters';
+import { CartographieLayout } from '../../layouts';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -13,4 +14,6 @@ export class DepartementsListComponent {
   @Output() showLieux: EventEmitter<DepartementPresentation> = new EventEmitter<DepartementPresentation>();
   @Output() public enableHover: EventEmitter<string> = new EventEmitter<string>();
   @Output() public disableHover: EventEmitter<void> = new EventEmitter<void>();
+
+  public constructor(public cartographieLayout: CartographieLayout) {}
 }

src/features/cartographie/components/lieux-mediation-numerique-list/lieux-mediation-numerique-list/lieux-mediation-numerique-list.component.html

@@ -14,19 +14,25 @@ <h1 class="visually-hidden">Liste des lieux d'inclusion numérique</h1>
         (disableHover)="disableHover.emit()"></app-mediation-numerique-list-item>
     </article>
   </div>
-  <div class="bg-primary py-3 px-4 g-0 row">
+  <div class="bg-primary py-3 px-4 g-0 row align-items-center">
     <div class="col-auto">
       <button class="btn btn-outline-light" (click)="print.emit()">
         <i class="ri-printer-line me-2" aria-hidden="true"></i>
         <span>Imprimer la liste</span>
       </button>
     </div>
-    <div class="col-auto ms-auto my-auto">
-      <span class="d-flex align-items-center text-white me-auto" [ngPlural]="lieuxMediationNumerique.length">
+    <div class="col-auto">
+      <i class="d-flex small text-white ms-3" [ngPlural]="lieuxMediationNumerique.length">
         <ng-template ngPluralCase="=0">Aucun résultat</ng-template>
         <ng-template ngPluralCase="=1">1 résultat</ng-template>
         <ng-template ngPluralCase="other">{{ lieuxMediationNumerique.length }} résultats</ng-template>
-      </span>
+      </i>
+    </div>
+    <div class="col text-end d-block d-lg-none">
+      <button class="btn btn-link link-light text-decoration-none" (click)="cartographieLayout.toggleMapForSmallDevices()">
+        Afficher la carte
+        <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
+      </button>
     </div>
   </div>
 </div>

src/features/cartographie/components/lieux-mediation-numerique-list/lieux-mediation-numerique-list/lieux-mediation-numerique-list.component.ts

@@ -13,6 +13,7 @@ import { ActivatedRoute } from '@angular/router';
 import { LabelNational } from '@gouvfr-anct/lieux-de-mediation-numerique';
 import { FeatureConfiguration } from '../../../../../root';
 import { LieuMediationNumeriqueListItemPresentation } from '../../../presenters';
+import { CartographieLayout } from '../../../layouts';
 
 const itemById =
   (id: string) =>
@@ -42,7 +43,7 @@ export class LieuxMediationNumeriqueListComponent {
   @ViewChild('container') public container!: ElementRef;
   @ViewChildren('item') public items!: QueryList<ElementRef>;
 
-  public constructor(public readonly route: ActivatedRoute) {}
+  public constructor(public readonly route: ActivatedRoute, public readonly cartographieLayout: CartographieLayout) {}
 
   public scrollTo(focusId: string) {
     setTimeout(() => {

src/features/cartographie/components/regions-list/regions-list.component.html

@@ -25,4 +25,10 @@ <h2 class="h5 fw-bold mb-0">{{ region.nom }}</h2>
       </button>
     </article>
   </div>
+  <div class="bg-primary py-3 px-4 text-end d-block d-lg-none">
+    <button class="btn btn-link link-light text-decoration-none" (click)="cartographieLayout.toggleMapForSmallDevices()">
+      Afficher la carte
+      <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
+    </button>
+  </div>
 </div>

src/features/cartographie/components/regions-list/regions-list.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Output
 import { ActivatedRoute } from '@angular/router';
 import { ASSETS_TOKEN, AssetsConfiguration } from '../../../../root';
 import { RegionPresentation } from '../../../core/presenters';
+import { CartographieLayout } from '../../layouts';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -19,6 +20,7 @@ export class RegionsListComponent {
 
   public constructor(
     @Inject(ASSETS_TOKEN) public assetsConfiguration: AssetsConfiguration,
+    public cartographieLayout: CartographieLayout,
     public readonly route: ActivatedRoute
   ) {}
 }

src/features/cartographie/layouts/cartographie/cartographie.layout.html

@@ -55,11 +55,17 @@ <h3 class="card-title text-primary">
       </div>
     </div>
   </nav>
-  <div class="d-flex flex-grow-1 overflow-auto">
-    <main class="border-end col-12" [ngClass]="router.url.includes('/details') ? 'map-details' : 'map-list'">
+  <div class="d-flex flex-grow-1 overflow-hidden">
+    <main
+      class="border-end col-12 show-map"
+      [class.show-map-for-small-devices]="showMapForSmallDevices$ | async"
+      [ngClass]="router.url.includes('/details') ? 'map-details' : 'map-list'">
       <router-outlet></router-outlet>
     </main>
-    <aside aria-label="carte interactive des lieux d'inclusion numérique" class="col position-relative d-flex">
+    <aside
+      aria-label="carte interactive des lieux d'inclusion numérique"
+      class="col-lg col-12 position-relative d-flex flex-column show-map"
+      [class.show-map-for-small-devices]="showMapForSmallDevices$ | async">
       <mgl-map
         aria-hidden="true"
         [movingMethod]="'flyTo'"
@@ -102,6 +108,17 @@ <h3 class="card-title text-primary">
           (highlight)="onHighlight($event?.id)"
           (showDetails)="onShowDetails($event)"></app-lieu-mediation-numerique-markers>
       </mgl-map>
+      <div class="p-3 d-flex d-lg-none bg-primary align-items-center">
+        <button class="btn btn-link link-light text-decoration-none" (click)="toggleMapForSmallDevices()">
+          <i class="ri-arrow-left-s-line" aria-hidden="true"></i>
+          Afficher la liste
+        </button>
+        <i class="ms-auto small text-white" *ngIf="(resultsCount$ | async) as resultCount" [ngPlural]="resultCount">
+          <ng-template ngPluralCase="=0">Aucun résultat</ng-template>
+          <ng-template ngPluralCase="=1">1 résultat</ng-template>
+          <ng-template ngPluralCase="other">{{ resultCount }} résultats</ng-template>
+        </i>
+      </div>
       <app-offcanvas
         #affinerRechercheOffcanvas
         class="z-index-over-all"

src/features/cartographie/layouts/cartographie/cartographie.layout.ts

@@ -1,17 +1,10 @@
 import { ChangeDetectionStrategy, Component, Inject, ViewChild } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router, RouterOutlet } from '@angular/router';
-import { BehaviorSubject, delay, Observable, of, tap, withLatestFrom } from 'rxjs';
+import { BehaviorSubject, delay, Observable, of, Subject, tap, withLatestFrom } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { LngLatBounds, MapLibreEvent } from 'maplibre-gl';
 import { Localisation } from '@gouvfr-anct/lieux-de-mediation-numerique';
-import {
-  ASSETS_TOKEN,
-  AssetsConfiguration,
-  INITIAL_POSITION_TOKEN,
-  InitialPositionConfiguration,
-  ZOOM_LEVEL_TOKEN,
-  ZoomLevelConfiguration
-} from '../../../../root';
+import { ASSETS_TOKEN, AssetsConfiguration, ZOOM_LEVEL_TOKEN, ZoomLevelConfiguration } from '../../../../root';
 import { NO_LOCALISATION } from '../../../core/models';
 import {
   departementFromNom,
@@ -76,12 +69,18 @@ const toLieuxByLongitude = (LieuxMediationNumerique: LieuMediationNumeriquePrese
   providers: cartographieLayoutProviders
 })
 export class CartographieLayout {
+  private _showMapForSmallDevices$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  public showMapForSmallDevices$: Observable<boolean> = this._showMapForSmallDevices$.asObservable();
+
   private _currentZoom$: BehaviorSubject<number> = new BehaviorSubject(this._zoomLevel.regular);
   public currentZoom$: Observable<number> = this._currentZoom$.asObservable();
 
   private _loadingState$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
   public loadingState$: Observable<boolean> = this._loadingState$.asObservable();
 
+  private _resultsCount$: Subject<number> = new Subject<number>();
+  public resultsCount$: Observable<number> = this._resultsCount$.asObservable();
+
   private _lieuxMediationNumeriqueListPresenterArgs: [Observable<Localisation>, Observable<FilterPresentation>, Date] = [
     of(toLocalisationFromFilterFormPresentation(toFilterFormPresentationFromQuery(this.route.snapshot.queryParams))),
     this.route.queryParams.pipe(map(toFilterFormPresentationFromQuery)),
@@ -99,14 +98,20 @@ export class CartographieLayout {
     .lieuxMediationNumeriqueByRegion$(...this._lieuxMediationNumeriqueListPresenterArgs)
     .pipe(
       delay(0),
-      tap(() => this._loadingState$.next(false))
+      tap(() => {
+        this._loadingState$.next(false);
+        this._resultsCount$.next(0);
+      })
     );
 
   public departements$: Observable<DepartementPresentation[]> = this._lieuxMediationNumeriqueListPresenter
     .lieuxMediationNumeriqueByDepartement$(...this._lieuxMediationNumeriqueListPresenterArgs)
     .pipe(
       delay(0),
-      tap(() => this._loadingState$.next(false))
+      tap(() => {
+        this._loadingState$.next(false);
+        this._resultsCount$.next(0);
+      })
     );
 
   public lieuxMediationNumerique$: Observable<LieuMediationNumeriqueOnMapPresentation[]> =
@@ -124,7 +129,10 @@ export class CartographieLayout {
         map(toLieuxWithOpeningState(new Date())),
         map(toLieuxByLongitude),
         delay(0),
-        tap(() => this._loadingState$.next(false))
+        tap((lieux: LieuMediationNumeriquePresentation[]): void => {
+          this._resultsCount$.next(lieux.length);
+          this._loadingState$.next(false);
+        })
       );
 
   public allLieuxMediationNumerique$: Observable<LieuMediationNumeriquePresentation[]> =
@@ -147,9 +155,7 @@ export class CartographieLayout {
     public readonly markersPresenter: MarkersPresenter,
     @Inject(ASSETS_TOKEN) public readonly assetsConfiguration: AssetsConfiguration,
     @Inject(ZOOM_LEVEL_TOKEN)
-    private readonly _zoomLevel: ZoomLevelConfiguration,
-    @Inject(INITIAL_POSITION_TOKEN)
-    private readonly _initialPosition: InitialPositionConfiguration
+    private readonly _zoomLevel: ZoomLevelConfiguration
   ) {}
 
   public onShowLieuxInDepartement(departement: TerritoirePresentation): void {
@@ -173,9 +179,10 @@ export class CartographieLayout {
     this.router.navigate([lieu.id, 'details'], { relativeTo: this.route.parent, queryParamsHandling: 'preserve' });
     this.markersPresenter.center(Localisation({ latitude: lieu.latitude, longitude: lieu.longitude }));
     this.markersPresenter.select(lieu.id);
+    this.toggleMapForSmallDevices();
   }
 
-  public onHighlight(highlightedId?: string) {
+  public onHighlight(highlightedId?: string): void {
     this.markersPresenter.highlight(highlightedId ?? '');
   }
 
@@ -231,4 +238,8 @@ export class CartographieLayout {
       });
     return (this.userLocalisation = localisation);
   }
+
+  public toggleMapForSmallDevices(): void {
+    this._showMapForSmallDevices$.next(!this._showMapForSmallDevices$.value);
+  }
 }

src/scss/components/_cartography.scss

@@ -12,3 +12,14 @@
     width: 760px;
   }
 }
+
+.show-map {
+  transition: all 0.3s ease-in-out;
+
+  @include media-breakpoint-down(lg) {
+    &.show-map-for-small-devices {
+      transition: all 0.5s ease-in-out;
+      transform: translateX(-100%);
+    }
+  }
+}