fix: cartographie responsive (#348)

* fix: search address on click

* fix: affiner recherche for mobile devices

* fix: display distance when an address has been found

* fix: update list lieux page

* fix: lieu details page

* fix: rdv displonible not displayed if no phone and mail

* fix: closed indicator not colored in details page

* fix: offcanvas body

src/features/adresse/components/dropdown-pane/dropdown-pane.component.ts

@@ -45,8 +45,10 @@ export class DropdownPaneComponent {
   }
 
   public reduce(): void {
-    this._expanded$.next(false);
-    this._expanded = false;
+    setTimeout(() => {
+      this._expanded$.next(false);
+      this._expanded = false;
+    }, 100);
   }
 
   public setIndex(index: number): void {

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

@@ -1,31 +1,19 @@
 <div class="bg-light p-3 d-print-none d-flex">
   <div class="d-flex flex-grow-1 align-items-center">
-    <div class="d-flex" *ngIf="accessibilite; else noAccessibilite">
-      <a href="{{ accessibilite }}" class="btn btn-sm btn-secondary d-block" target="_blank" rel="noopener noreferrer">
-        <i class="ri-wheelchair-line me-1 text-right" aria-hidden="true"></i>
-        <span>Consulter l'accessibilité</span>
+    <div class="d-flex">
+      <a
+        href="https://acceslibre.beta.gouv.fr/contrib/start/"
+        class="btn btn-sm btn-secondary d-block"
+        target="_blank"
+        rel="noopener noreferrer">
+        <i class="ri-edit-line me-1 text-right" aria-hidden="true"></i>
+        <span>Renseigner l'accessibilité</span>
       </a>
-      <div class="ps-3 d-flex mt-1 text-primary">
-        <i class="ri-check-line me-1" aria-hidden="true"></i>
-        <em>Informations renseignées</em>
+      <div class="ps-3 d-flex text-muted-dark align-items-baseline">
+        <i class="ri-close-circle-fill me-1" aria-hidden="true"></i>
+        <em class="mt-1">Pas d'information</em>
       </div>
     </div>
-    <ng-template #noAccessibilite>
-      <div class="d-flex">
-        <a
-          href="https://acceslibre.beta.gouv.fr/contrib/start/"
-          class="btn btn-sm btn-secondary d-block"
-          target="_blank"
-          rel="noopener noreferrer">
-          <i class="ri-edit-line me-1 text-right" aria-hidden="true"></i>
-          <span>Renseigner l'accessibilité</span>
-        </a>
-        <div class="ps-3 d-flex text-muted-dark align-items-baseline">
-          <i class="ri-close-circle-fill me-1" aria-hidden="true"></i>
-          <em class="mt-1">Pas d'information</em>
-        </div>
-      </div>
-    </ng-template>
   </div>
   <div class="d-flex align-items-center">
     <button

src/features/cartographie/components/lieux-mediation-numerique-details/boutons-action/boutons-action.component.html

@@ -39,7 +39,7 @@
       class="btn btn-tile px-md-0 py-md-4 p-2 d-flex flex-md-column flex-row"
       (click)="sendByEmail.emit($event)">
       <span class="ri-circled bg-primary text-light fw-normal">
-        <i class="ri-mail-line" aria-hidden="true"></i>
+        <i class="ri-mail-send-line" aria-hidden="true"></i>
       </span>
       <b class="mt-md-2 mb-md-0 ms-md-0 ms-2">Envoyer par mail</b>
     </button>

src/features/cartographie/components/lieux-mediation-numerique-details/informations-pratiques/informations-pratiques.component.html

@@ -2,27 +2,25 @@
   <div class="col-md col-12">
     <address class="mb-2">
       {{ adresse }}
-      <ng-container *ngIf="distance">- {{ distance | distance }}</ng-container>
     </address>
-    <div class="mb-2">
-      <a class="text-decoration-none" *ngIf="accessibilite" href="{{ accessibilite }}" target="_blank">
-        <i class="ri-wheelchair-line ri-xl text-primary" aria-hidden="true"></i>
-        <b>Consulter les informations d'accessibilité</b>
-      </a>
-    </div>
-    <div *ngIf="conditionsAcces" class="text-primary mb-2">{{ conditionsAcces }}</div>
-  </div>
-  <div class="col-md-auto col-12 text-md-end d-print-none" *ngIf="courriel || telephone">
-    <div class="mb-3" *ngIf="status">
+    <div *ngIf="distance">{{ distance | distance }}</div>
+    <div class="mb-3 d-flex align-items-center" *ngIf="status">
+      <i
+        [class.text-primary]="status.label === 'Ouvert'"
+        [class.text-danger]="status.label === 'Fermé'"
+        class="ri-checkbox-blank-circle-fill ri-xxs me-1"
+        aria-hidden="true"></i>
       <span [class.text-primary]="status.label === 'Ouvert'" [class.text-danger]="status.label === 'Fermé'">
-        <i class="ri-checkbox-blank-circle-fill ri-xxs" aria-hidden="true"></i>
         {{ status.label }}
       </span>
-      <small class="text-muted">· {{ status.limite }}</small>
+      <span class="mx-1">·</span>
+      <i class="small text-muted align-self-end">{{ status.limite }}</i>
     </div>
-    <a *ngIf="courriel" href="mailto:{{ courriel }}" class="btn btn-sm btn-secondary mb-2" (click)="$event.stopPropagation()">
+  </div>
+  <div class="col-md-auto col-12 text-md-end d-print-none" *ngIf="courriel || telephone">
+    <a *ngIf="courriel" href="mailto:{{ courriel }}" class="btn btn-sm btn-secondary mb-1" (click)="$event.stopPropagation()">
       <i class="ri-mail-line me-2 text-right" aria-hidden="true"></i>
-      <span>Contacter par mail</span>
+      Contacter par mail
     </a>
     <a
       *ngIf="telephone"
@@ -34,4 +32,11 @@
       <span class="visually-hidden">Contacter par téléphone</span>
     </a>
   </div>
+  <div class="mt-2">
+    <a class="text-decoration-none" *ngIf="accessibilite" href="{{ accessibilite }}" target="_blank">
+      <i class="ri-wheelchair-line ri-xl text-primary" aria-hidden="true"></i>
+      <b>Consulter les informations d'accessibilité</b>
+    </a>
+  </div>
+  <div *ngIf="conditionsAcces" class="text-primary mt-2">{{ conditionsAcces }}</div>
 </div>

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

@@ -57,7 +57,7 @@
         [detail]="lieuMediationNumerique.presentation?.detail"
         [resume]="lieuMediationNumerique.presentation?.resume"></app-description>
     </li>
-    <li class="list-group-item border-0">
+    <li class="list-group-item border-0" *ngIf="lieuMediationNumerique.accessibilite === undefined">
       <app-accessibilite [accessibilite]="lieuMediationNumerique.accessibilite"></app-accessibilite>
     </li>
     <li class="list-group-item">

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

@@ -6,53 +6,52 @@
     queryParamsHandling="preserve"
     (mouseover)="enableHover.emit(lieuMediationNumerique.id)"
     (mouseout)="disableHover.emit()">
-    <div class="row g-0 d-print-none">
-      <div class="col">
+    <div class="row d-print-none">
+      <div class="col me-3">
         <h2 class="h5 mb-0 text-first-letter-uppercase fw-bold">
           {{ lieuMediationNumerique.nom }}
         </h2>
         <div class="text-muted">{{ lieuMediationNumerique.adresse }}</div>
         <div class="mt-1" *ngIf="lieuMediationNumerique.distance">{{ lieuMediationNumerique.distance | distance }}</div>
-        <div *ngIf="lieuMediationNumerique.status" class="text-muted">
+        <div *ngIf="lieuMediationNumerique.status" class="text-muted d-inline-flex flex-wrap align-items-center">
+          <i
+            class="ri-checkbox-blank-circle-fill ri-xxs me-1"
+            [class.text-primary]="lieuMediationNumerique.status.label === 'Ouvert'"
+            aria-hidden="true"></i>
           <span [class.text-primary]="lieuMediationNumerique.status.label === 'Ouvert'">
-            <i class="ri-checkbox-blank-circle-fill ri-xxs" aria-hidden="true"></i>
             {{ lieuMediationNumerique.status.label }}
           </span>
-          ·
-          <small>{{ lieuMediationNumerique.status.limite }}</small>
-        </div>
-        <div class="text-muted" *ngIf="lieuMediationNumerique.prise_rdv">
-          <i class="ri-calendar-check-line me-1" aria-hidden="true"></i>
-          Prise de Rendez-vous disponible
+          <span class="mx-1">·</span>
+          <i class="small align-self-end">{{ lieuMediationNumerique.status.limite }}</i>
         </div>
       </div>
-      <div style="width: 180px" *ngIf="lieuMediationNumerique.courriel || lieuMediationNumerique.telephone"></div>
-    </div>
-    <div class="d-flex flex-row d-print-none">
       <div
-        class="mt-3 d-flex flex-column text-end ms-auto"
         style="width: 180px"
-        *ngIf="lieuMediationNumerique.conditions_acces || lieuMediationNumerique.date_maj">
-        <div
-          [ngClass]="lieuMediationNumerique.conditions_acces.isFree ? 'text-primary' : 'text-muted'"
-          *ngIf="lieuMediationNumerique.conditions_acces; else emptyConditionAcces">
-          {{ lieuMediationNumerique.conditions_acces.label }}
-        </div>
-        <ng-template #emptyConditionAcces>
-          <div *ngIf="(lieuMediationNumerique.labels_nationaux ?? []).length > 0" aria-hidden="true">&nbsp;</div>
-        </ng-template>
-        <small
-          *ngIf="lieuMediationNumerique.date_maj && dateIsValide(lieuMediationNumerique.date_maj)"
-          class="text-muted fst-italic">
-          Mise à jour le {{ lieuMediationNumerique.date_maj | date : 'dd/MM/y' }}
-        </small>
+        *ngIf="lieuMediationNumerique.courriel || lieuMediationNumerique.telephone || lieuMediationNumerique.prise_rdv"></div>
+    </div>
+    <div
+      class="mt-4 d-flex flex-column text-end ms-auto"
+      style="width: 180px"
+      *ngIf="lieuMediationNumerique.conditions_acces || lieuMediationNumerique.date_maj">
+      <div
+        [ngClass]="lieuMediationNumerique.conditions_acces.isFree ? 'text-primary' : 'text-muted'"
+        *ngIf="lieuMediationNumerique.conditions_acces; else emptyConditionAcces">
+        {{ lieuMediationNumerique.conditions_acces.label }}
       </div>
+      <ng-template #emptyConditionAcces>
+        <div *ngIf="(lieuMediationNumerique.labels_nationaux ?? []).length > 0" aria-hidden="true">&nbsp;</div>
+      </ng-template>
+      <small
+        *ngIf="lieuMediationNumerique.date_maj && dateIsValide(lieuMediationNumerique.date_maj)"
+        class="text-muted fst-italic">
+        Mise à jour le {{ lieuMediationNumerique.date_maj | date : 'dd/MM/y' }}
+      </small>
     </div>
   </a>
   <div
     class="text-end position-absolute top-0 end-0"
     style="width: 180px"
-    *ngIf="lieuMediationNumerique.courriel || lieuMediationNumerique.telephone">
+    *ngIf="lieuMediationNumerique.courriel || lieuMediationNumerique.telephone || lieuMediationNumerique.prise_rdv">
     <a
       *ngIf="lieuMediationNumerique.courriel as courriel"
       href="mailto:{{ courriel }}"
@@ -64,12 +63,16 @@ <h2 class="h5 mb-0 text-first-letter-uppercase fw-bold">
     <a
       *ngIf="lieuMediationNumerique.telephone as telephone"
       href="tel://{{ telephone }}"
-      class="text-decoration-none link-dark d-block mb-2"
+      class="text-decoration-none text-muted"
       (click)="$event.stopPropagation()">
       <span aria-hidden="true">{{ telephone | phone }}</span>
       <span class="visually-hidden">Contacter par téléphone</span>
       <i class="ms-2 ri-phone-line" aria-hidden="true"></i>
     </a>
+    <div class="text-muted" *ngIf="lieuMediationNumerique.prise_rdv">
+      RDV disponible
+      <i class="ri-calendar-check-line ms-1" aria-hidden="true"></i>
+    </div>
   </div>
   <div class="position-absolute row g-2 start-0 bottom-0">
     <ng-container *ngIf="lieuMediationNumerique.labels_nationaux as labelsNationaux">

src/features/cartographie/components/location-breadcrumb/location-breadcrumb.component.html

@@ -1,30 +1,47 @@
-<small
-  class="d-flex align-items-center"
-  *ngIf="getBreadcrumbItems(url, zoom) as breadcrumbItems"
-  aria-label="Navigation par territoire">
-  <ng-container *ngFor="let breadcrumbItem of breadcrumbItems; let isLast = last">
-    <span *ngIf="breadcrumbItem.link; else currentPage" class="breadcrumb-item">
-      <a
-        *ngIf="breadcrumbItem.link[0].startsWith('http'); else routerLink"
-        [href]="breadcrumbItem.link[0]"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-body opacity-75">
-        {{ breadcrumbItem.label }}
-      </a>
-      <ng-template #routerLink>
+<ng-container *ngIf="breadcrumbItems$ | async as breadcrumbItems">
+  <small class="d-lg-flex d-none align-items-center" aria-label="Navigation par territoire">
+    <ng-container *ngFor="let breadcrumbItem of breadcrumbItems; let isLast = last">
+      <span *ngIf="breadcrumbItem.link; else currentPage" class="breadcrumb-item">
         <a
-          [routerLink]="breadcrumbItem.link"
-          queryParamsHandling="preserve"
-          (click)="onClick(breadcrumbItem.label)"
+          *ngIf="breadcrumbItem.link[0].startsWith('http'); else routerLink"
+          [href]="breadcrumbItem.link[0]"
+          target="_blank"
+          rel="noopener noreferrer"
           class="text-body opacity-75">
           {{ breadcrumbItem.label }}
         </a>
+        <ng-template #routerLink>
+          <a
+            [routerLink]="breadcrumbItem.link"
+            queryParamsHandling="preserve"
+            (click)="onClick(breadcrumbItem.label)"
+            class="text-body opacity-75">
+            {{ breadcrumbItem.label }}
+          </a>
+        </ng-template>
+      </span>
+      <ng-template #currentPage>
+        <span class="breadcrumb-item active text-body opacity-75" aria-current="page">{{ breadcrumbItem.label }}</span>
       </ng-template>
-    </span>
-    <ng-template #currentPage>
-      <span class="breadcrumb-item active text-body opacity-75" aria-current="page">{{ breadcrumbItem.label }}</span>
-    </ng-template>
-    <i *ngIf="!isLast" class="ri-arrow-drop-right-fill" aria-hidden="true"></i>
-  </ng-container>
-</small>
+      <i *ngIf="!isLast" class="ri-arrow-drop-right-fill" aria-hidden="true"></i>
+    </ng-container>
+  </small>
+  <div class="d-lg-none d-block list-group list-group-flush fw-bold">
+    <a
+      *ngIf="breadcrumbItems?.[1]?.link"
+      [routerLink]="breadcrumbItems[1].link"
+      queryParamsHandling="preserve"
+      (click)="onClick(breadcrumbItems[1].label)"
+      class="list-group-item py-3 list-group-item-action">
+      Changer de département
+    </a>
+    <a
+      *ngIf="breadcrumbItems?.[0]?.link"
+      [routerLink]="breadcrumbItems[0].link"
+      queryParamsHandling="preserve"
+      (click)="onClick(breadcrumbItems[0].label)"
+      class="list-group-item py-3 list-group-item-action">
+      Changer de région
+    </a>
+  </div>
+</ng-container>

src/features/cartographie/components/location-breadcrumb/location-breadcrumb.component.ts

@@ -1,22 +1,35 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { UrlSegment } from '@angular/router';
 import { regionFromNom, RegionPresentation } from '../../../core/presenters';
 import { BreadcrumbItem, getBreadcrumbItems } from '../../presenters';
+import { Observable, Subject } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-location-breadcrumb',
   templateUrl: './location-breadcrumb.component.html'
 })
-export class LocationBreadcrumbComponent {
+export class LocationBreadcrumbComponent implements OnChanges {
   @Input() public url: UrlSegment[] = [];
 
   @Input() public zoom: number = 0;
 
   @Output() public showLieux: EventEmitter<RegionPresentation | undefined> = new EventEmitter<RegionPresentation | undefined>();
 
-  public getBreadcrumbItems = (urlSegments: UrlSegment[], zoomLevel: number): BreadcrumbItem[] =>
-    getBreadcrumbItems(urlSegments, zoomLevel);
+  @Output() public region: EventEmitter<string | undefined> = new EventEmitter<string | undefined>();
+
+  @Output() public departement: EventEmitter<string | undefined> = new EventEmitter<string | undefined>();
+
+  private readonly _breadcrumbItems$: Subject<BreadcrumbItem[]> = new Subject<BreadcrumbItem[]>();
+
+  public readonly breadcrumbItems$: Observable<BreadcrumbItem[]> = this._breadcrumbItems$.asObservable();
+
+  public ngOnChanges(): void {
+    const breadcrumbItems: BreadcrumbItem[] = getBreadcrumbItems(this.url, this.zoom);
+    this._breadcrumbItems$.next(breadcrumbItems);
+    breadcrumbItems.length > 1 ? this.region.emit(breadcrumbItems[1].label) : this.region.emit();
+    breadcrumbItems.length > 2 ? this.departement.emit(breadcrumbItems[2].label) : this.departement.emit();
+  }
 
   public onClick(nom: string): void {
     this.showLieux.emit(regionFromNom(nom));