fix: responsive orientation pages (#339)

anct-cartographie-nationale · Aug 24, 2023 · 1759c36 · 1759c36
1 parent 9425e8c
commit 1759c36
Show file tree

Hide file tree

Showing 15 changed files with 153 additions and 108 deletions.
diff --git a/src/features/adresse/components/address-field/address-field.component.html b/src/features/adresse/components/address-field/address-field.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="formGroup">
+<form [formGroup]="formGroup" class="position-relative">
   <label for="address" class="visually-hidden">Quelle est votre adresse ?</label>
   <i class="text-muted ri-search-line ri-lg position-absolute mt-2 ms-2 ps-1 z-index-over-base" aria-hidden="true"></i>
   <div class="input-group">

diff --git a/src/features/orientation/components/besoin-link/besoin-link.component.html b/src/features/orientation/components/besoin-link/besoin-link.component.html
@@ -5,12 +5,12 @@
   class="btn orientation-btn bg-light mb-3 p-3 rounded-0 d-flex position-relative"
   (click)="selectServiceValue.emit(serviceItem.value)">
   <span
-    class="position-absolute top-0 start-0 z-index-over-base mt-4 ms-4 translate-middle square d-flex text-center small bg-secondary text-primary border border-primary rounded-circle"
+    class="position-absolute top-0 start-0 z-index-over-base mt-sm-4 ms-sm-4 mt-1 ms-1 translate-middle square d-flex text-center small bg-secondary text-primary border border-primary rounded-circle"
     *ngIf="serviceItem.value === selectedServiceItem">
     <span class="visually-hidden">Service sélectionné</span>
     <i class="ri-check-line m-auto" aria-hidden="true"></i>
   </span>
-  <span class="ri-circled bg-primary text-light fw-normal me-3">
+  <span class="ri-circled bg-primary text-light fw-normal me-3 d-sm-block d-none">
     <i [ngClass]="serviceItem.icon" aria-hidden="true"></i>
   </span>
   <span class="text-start">
@@ -25,6 +25,6 @@
       <span class="visually-hidden">Info</span>
       <i class="ri-information-line fw-normal text-muted-dark ri-2x" aria-hidden="true"></i>
     </button>
-    <i class="ri-arrow-right-s-line text-muted-dark ri-2x" aria-hidden="true"></i>
+    <i class="ri-arrow-right-s-line text-muted-dark ri-2x my-auto" aria-hidden="true"></i>
   </span>
 </a>
diff --git a/src/features/orientation/components/nav-link/nav-link.component.html b/src/features/orientation/components/nav-link/nav-link.component.html
@@ -1,5 +1,5 @@
 <a
-  class="mx-lg-2 mx-sm-3 mx-2 px-lg-3 px-0 py-lg-1 py-0 position-relative"
+  class="mx-sm-2 mx-2 px-sm-3 px-0 py-0 py-sm-1 position-relative"
   [ngClass]="size === 'sm' ? 'nav-link' : 'btn btn-secondary'"
   [routerLink]="link"
   queryParamsHandling="preserve"

diff --git a/src/features/orientation/components/opening-hours-form/opening-hours-form.component.html b/src/features/orientation/components/opening-hours-form/opening-hours-form.component.html
@@ -1,76 +1,82 @@
 <ng-container *ngFor="let openingHourGroup of openingHoursForm.controls ?? []; index as i; first as isFirst">
-  <app-text-separator *ngIf="!isFirst" class="my-4" background="light">OU</app-text-separator>
-  <fieldset class="d-flex">
+  <app-text-separator *ngIf="!isFirst" class="mt-4" background="light">OU</app-text-separator>
+  <fieldset>
     <legend class="visually-hidden">
       Filtre horaire numéro {{ i + 1 }}
       <span *ngIf="openingHourGroup.valid">(valide)</span>
     </legend>
-    <i class="text-primary py-1 me-2 ri-check-line" [class.invisible]="openingHourGroup.invalid" aria-hidden="true"></i>
-    <div class="col-md col-sm-12">
-      <label [for]="'jour-ouverture-' + i" class="visually-hidden">Choix du jour d'ouverture</label>
-      <select
-        [id]="'jour-ouverture-' + i"
-        class="form-select"
-        [formControl]="openingHourGroup.controls.day"
-        aria-label="Jour d'ouverture"
-        (change)="onDaySelect(openingHourGroup); onAddOpeningHourGroup(i)">
-        <option value="" disabled selected>Choisir un jour</option>
-        <option value="now">Ouvert Maintenant</option>
-        <option value="all">Tous les jours</option>
-        <option value="mo">Lundi</option>
-        <option value="tu">Mardi</option>
-        <option value="we">Mercredi</option>
-        <option value="th">Jeudi</option>
-        <option value="fr">Vendredi</option>
-        <option value="sa">Samedi</option>
-        <option value="su">Dimanche</option>
-      </select>
+    <div class="d-flex">
+      <i class="text-primary my-auto ri-check-line" [class.invisible]="openingHourGroup.invalid" aria-hidden="true"></i>
+      <div class="row g-2 px-2 flex-grow-1">
+        <div class="col-sm col-12">
+          <label [for]="'jour-ouverture-' + i" class="visually-hidden">Choix du jour d'ouverture</label>
+          <select
+            [id]="'jour-ouverture-' + i"
+            class="form-select"
+            [formControl]="openingHourGroup.controls.day"
+            aria-label="Jour d'ouverture"
+            (change)="onDaySelect(openingHourGroup); onAddOpeningHourGroup(i)"
+            (focusout)="updateFilterIfValid(i)">
+            <option value="" disabled selected>Choisir un jour</option>
+            <option value="now">Ouvert Maintenant</option>
+            <option value="all">Tous les jours</option>
+            <option value="mo">Lundi</option>
+            <option value="tu">Mardi</option>
+            <option value="we">Mercredi</option>
+            <option value="th">Jeudi</option>
+            <option value="fr">Vendredi</option>
+            <option value="sa">Samedi</option>
+            <option value="su">Dimanche</option>
+          </select>
+        </div>
+        <div class="col" *ngIf="openingHourGroup.controls.day.value && openingHourGroup.controls.day.value !== 'now'">
+          <ng-container *ngIf="openingHourGroup.controls.period.value !== 'hours'">
+            <label [for]="'plage-horaire-' + i" class="visually-hidden">Plage horaire</label>
+            <select
+              [id]="'plage-horaire-' + i"
+              class="form-select"
+              [formControl]="openingHourGroup.controls.period"
+              (change)="onAddOpeningHourGroup(i)"
+              (focusout)="updateFilterIfValid(i)"
+              aria-label="Heures d'ouvertures">
+              <option value="" disabled selected>Heure de début</option>
+              <option value="all">Toute la journée</option>
+              <option value="hours">Choisir une heure...</option>
+            </select>
+          </ng-container>
+          <ng-container *ngIf="openingHourGroup.controls.period.value === 'hours'">
+            <label [for]="'debut-' + i" class="visually-hidden">Heure de début</label>
+            <input
+              [id]="'debut-' + i"
+              [formControl]="openingHourGroup.controls.start"
+              (change)="onAddOpeningHourGroup(i)"
+              (focusout)="updateFilterIfValid(i)"
+              class="form-control"
+              type="time"
+              name="start" />
+          </ng-container>
+        </div>
+        <div class="col" *ngIf="openingHourGroup.controls.period.value === 'hours'">
+          <label [for]="'fin-' + i" class="visually-hidden">Heure de fin</label>
+          <input
+            [id]="'fin-' + i"
+            [formControl]="openingHourGroup.controls.end"
+            (change)="onAddOpeningHourGroup(i)"
+            (focusout)="updateFilterIfValid(i)"
+            class="form-control"
+            type="time"
+            name="end" />
+        </div>
+      </div>
+      <button
+        type="button"
+        class="btn btn-link link-dark opacity-75 text-decoration-none p-0"
+        [class.invisible]="openingHourGroup.controls.day.value === ''"
+        title="Supprimer cette ligne"
+        (click)="removeOpeningHours(i)">
+        <i class="ri-close-line" aria-hidden="true"></i>
+        <span class="visually-hidden">Supprimer le filtre horaire numéro {{ i }}</span>
+      </button>
     </div>
-    <div
-      class="col-md-4 col-sm-12 ms-1"
-      *ngIf="openingHourGroup.controls.day.value && openingHourGroup.controls.day.value !== 'now'">
-      <ng-container *ngIf="openingHourGroup.controls.period.value !== 'hours'">
-        <label [for]="'plage-horaire-' + i" class="visually-hidden">Plage horaire</label>
-        <select
-          [id]="'plage-horaire-' + i"
-          class="form-select"
-          [formControl]="openingHourGroup.controls.period"
-          (change)="onAddOpeningHourGroup(i)"
-          aria-label="Heures d'ouvertures">
-          <option value="" disabled selected>Heure de début</option>
-          <option value="all">Toute la journée</option>
-          <option value="hours">Choisir une heure...</option>
-        </select>
-      </ng-container>
-      <ng-container *ngIf="openingHourGroup.controls.period.value === 'hours'">
-        <label [for]="'debut-' + i" class="visually-hidden">Heure de début</label>
-        <input
-          [id]="'debut-' + i"
-          [formControl]="openingHourGroup.controls.start"
-          (change)="onAddOpeningHourGroup(i)"
-          class="form-control"
-          type="time"
-          name="start" />
-      </ng-container>
-    </div>
-    <div class="col-4 ms-2" *ngIf="openingHourGroup.controls.period.value === 'hours'">
-      <label [for]="'fin-' + i" class="visually-hidden">Heure de fin</label>
-      <input
-        [id]="'fin-' + i"
-        [formControl]="openingHourGroup.controls.end"
-        (change)="onAddOpeningHourGroup(i)"
-        class="form-control"
-        type="time"
-        name="end" />
-    </div>
-    <button
-      *ngIf="openingHoursForm.controls.length > 1"
-      type="button"
-      class="btn btn-link link-dark opacity-75 text-decoration-none"
-      title="Supprimer cette ligne"
-      (click)="removeOpeningHours(i)">
-      <i class="ri-close-line" aria-hidden="true"></i>
-      <span class="visually-hidden">Supprimer le filtre horaire numéro {{ i }}</span>
-    </button>
   </fieldset>
 </ng-container>
diff --git a/src/features/orientation/components/opening-hours-form/opening-hours-form.component.ts b/src/features/orientation/components/opening-hours-form/opening-hours-form.component.ts
@@ -79,6 +79,9 @@ export class OpeningHoursFormComponent {
 
   public onAddOpeningHourGroup(index: number): void {
     this.appendOpeningHoursFieldFor(index) && this.openingHoursForm.controls.push(openingHoursFormControl());
+  }
+
+  public updateFilterIfValid(index: number): void {
     this.isValidOpeningHoursGroupAt(index) && this.updateFilters();
   }
 

diff --git a/src/features/orientation/components/text-separator/text-separator.component.html b/src/features/orientation/components/text-separator/text-separator.component.html
@@ -1,5 +1,7 @@
-<div style="margin-top: -7px">
-  <span class="text-muted-dark position-relative bottom-0 start-50 px-2" [ngClass]="'bg-' + background">
+<div class="translate-middle-y" style="margin-top: -7px">
+  <span
+    class="text-muted-dark position-relative px-2 d-inline-block translate-middle-x start-50"
+    [ngClass]="'bg-' + background">
     <ng-content></ng-content>
   </span>
   <hr class="border border-1 border-muted opacity-100" style="margin-top: -12px" />

diff --git a/src/features/orientation/layouts/orientation/orientation.layout.html b/src/features/orientation/layouts/orientation/orientation.layout.html
@@ -11,9 +11,9 @@
             aria-label="étapes de l'orientation"
             *ngIf="(filterPresentation$ | async) as filter"
             style="height: 0"
-            class="sticky-lg-top">
-            <app-nav class="d-lg-block d-none pt-3 bg-white" [filter]="filter"></app-nav>
-            <app-nav class="d-lg-none pt-3 d-block" [filter]="filter" size="sm"></app-nav>
+            class="sticky-lg-top nav-underline">
+            <app-nav class="d-sm-block d-none pt-3 bg-white" [filter]="filter"></app-nav>
+            <app-nav class="d-sm-none pt-3 d-block" [filter]="filter" size="sm"></app-nav>
           </nav>
         </ng-container>
         <div class="px-3 flex-grow-1" [@routeAnimations]="getRouteAnimationData()">
@@ -22,7 +22,7 @@
         <div
           class="d-flex justify-content-center shadow-white-top z-index-over-base bg-white sticky-bottom"
           [class.invisible]="hideArrow">
-          <i class="ri-arrow-right-s-line ri-xl pt-2 pb-3 text-primary" style="transform: rotate(90deg)" aria-hidden="true"></i>
+          <i class="ri-arrow-down-s-line ri-xl py-2 text-primary" aria-hidden="true"></i>
         </div>
       </main>
       <aside class="col-lg-4 col-12 bg-primary text-white text-center d-lg-block" aria-label="état de l'orientation">
@@ -38,7 +38,7 @@ <h2 class="h6 text-center text-secondary fw-bold mt-4 mb-3">Filtres activés</h2
             </div>
           </div>
           <div class="d-lg-block mt-auto">
-            <h2 class="h5 text-center text-secondary fw-bold mt-2">
+            <h2 class="h5 text-center text-secondary fw-bold my-3">
               Nombre de lieux
               <br />
               {{ router.url === '/orientation' ? 'référencés sur la carte' : 'correspondant à ma recherche'}}
@@ -51,7 +51,7 @@ <h2 class="h5 text-center text-secondary fw-bold mt-2">
               class="d-lg-block d-none" />
             <ng-container *ngIf="(lieuxMediationNumerique$ | async) as lieuxMediationNumerique">
               <ng-container *ngIf="(lieuxMediationNumeriqueTotal$ | async) as lieuxMediationNumeriqueTotal">
-                <div class="d-lg-none mt-4">
+                <div class="d-lg-none my-3">
                   <b>{{ lieuxMediationNumerique.length}} / {{ lieuxMediationNumeriqueTotal.length }}</b>
                   <div class="opacity-75">Lieux trouvées sur le territoire</div>
                 </div>

diff --git a/src/features/orientation/pages/accessibilite/accessibilite.page.html b/src/features/orientation/pages/accessibilite/accessibilite.page.html
@@ -1,11 +1,11 @@
 <div class="h-100 d-flex pt-5">
   <div class="w-100 my-auto">
-    <h1 class="h2 text-center fw-bold mt-5">
+    <h1 class="h2 text-center fw-bold mt-sm-5 mt-3">
       Quel
       <span class="text-primary">type d'accompagnement</span>
       recherchez-vous&nbsp;?
     </h1>
-    <p class="text-center fw-bold mb-5 text-muted">
+    <p class="text-center fw-bold mb-sm-5 mb-4 text-muted">
       Affinez votre recherche en sélectionnant des critères spécifiques d'accompagnement
     </p>
     <form [formGroup]="orientationLayout.filterForm">
@@ -69,7 +69,7 @@ <h1 class="h2 text-center fw-bold mt-5">
         </div>
       </fieldset>
     </form>
-    <div class="text-center mt-5">
+    <div class="text-center mt-4">
       <a class="btn btn-primary mx-3" [routerLink]="['..', 'disponibilite']" queryParamsHandling="preserve">
         Valider
         <i class="ri-arrow-right-s-line" aria-hidden="true"></i>

diff --git a/src/features/orientation/pages/besoin/besoin.page.html b/src/features/orientation/pages/besoin/besoin.page.html
@@ -1,10 +1,10 @@
 <div class="h-100 d-flex pt-5">
   <div class="w-100 my-auto">
-    <h1 class="h2 text-center fw-bold mt-5">
+    <h1 class="h2 text-center fw-bold mt-sm-5 mt-3">
       Quel est
       <span class="text-primary">votre besoin&nbsp;?</span>
     </h1>
-    <p class="text-center fw-bold mb-5 text-muted mb-5">Sélectionnez une thématique parmi la liste ci-dessous</p>
+    <p class="text-center fw-bold mb-sm-5 mb-4 text-muted">Sélectionnez une thématique parmi la liste ci-dessous</p>
     <ng-container *ngIf="serviceControl as serviceControl">
       <section aria-label="Apprentissage de base">
         <div class="d-flex flex-row mb-3 mt-4">
@@ -71,7 +71,7 @@ <h2 class="text-muted h6 fw-bold mb-0 text-uppercase">Manque de matériel</h2>
           (displayInformations)="selectOrientationInformation($event); informationOrientationModal.toggle()"></app-besoin-link>
       </section>
     </ng-container>
-    <div class="text-center mt-5">
+    <div class="text-center mt-4">
       <div class="text-muted mb-2">Vous ne trouvez pas votre besoin ?</div>
       <button class="btn btn-sm btn-secondary d-inline-block mb-2" (click)="onFilterNotFound()">
         <i class="ri-mail-line me-2 text-right" aria-hidden="true"></i>

diff --git a/src/features/orientation/pages/demarrer/demarrer.page.html b/src/features/orientation/pages/demarrer/demarrer.page.html
@@ -26,9 +26,9 @@ <h1 class="h2 fw-bold">
       </h1>
       <div class="my-5 mx-lg-5 mx-2 fs-5">
         <p>
-          Vous rencontrez un problème lié au numérique ?
+          Vous rencontrez un problème lié au numérique&nbsp;?
           <br />
-          Vous souhaitez accompagner une personne en difficulté avec le numérique ?
+          Vous souhaitez accompagner une personne en difficulté avec le numérique&nbsp;?
         </p>
         <p>
           Vous pourrez facilement filtrer les lieux en fonction de votre besoin ou de ceux du bénéficiaire

diff --git a/src/features/orientation/pages/disponibilite/disponibilite.page.html b/src/features/orientation/pages/disponibilite/disponibilite.page.html
@@ -1,11 +1,13 @@
 <div class="h-100 d-flex pt-5">
   <div class="w-100 my-auto">
-    <h1 class="h2 text-center fw-bold mt-5">
+    <h1 class="h2 text-center fw-bold mt-sm-5 mt-3">
       Quelles sont vos
       <span class="text-primary">disponibilités</span>
       &nbsp;?
     </h1>
-    <p class="text-center fw-bold mb-5 text-muted">Indiquez quel(s) jour(s) et à quelle(s) heure(s) vous serez disponible</p>
+    <p class="text-center fw-bold mb-sm-5 mb-4 text-muted">
+      Indiquez quel(s) jour(s) et à quelle(s) heure(s) vous serez disponible
+    </p>
     <form [formGroup]="orientationLayout.filterForm">
       <div class="accordion" id="accordionDisponibilite">
         <div class="accordion-item mb-3">
@@ -17,7 +19,7 @@ <h2 class="accordion-header" id="headingDatePrecise">
               [class.bg-white]="(collapseDatePrecise.isCollapsed$ | async) === false"
               [attr.aria-expanded]="collapseDatePrecise.isExpanded$ | async"
               (click)="collapseDatePrecise.toggle()">
-              <span class="ri-circled bg-primary text-light fw-normal me-3">
+              <span class="ri-circled bg-primary text-light fw-normal me-3 d-sm-block d-none">
                 <i class="ri-calendar-todo-line" aria-hidden="true"></i>
               </span>
               <span class="orientation-btn-label my-auto text-start">Je cherche des lieux ouverts à une date précise</span>
@@ -43,7 +45,7 @@ <h2 class="accordion-header" id="headingDatePrecise">
             id="collapseDatePrecise"
             [state]="hasOpeningsHours ? 'expanded' : 'collapsed'"
             aria-labelledby="headingDatePrecise">
-            <fieldset class="accordion-body bg-light py-4">
+            <fieldset class="accordion-body bg-light px-3 py-4">
               <legend class="visually-hidden">Filtres pour les horaires</legend>
               <app-opening-hours-form
                 #openingHoursForm
@@ -52,7 +54,7 @@ <h2 class="accordion-header" id="headingDatePrecise">
               <div class="text-center mt-4">
                 <button
                   type="button"
-                  class="btn btn-secondary m-3"
+                  class="btn my-3 me-3 btn-secondary"
                   (click)="openingHoursForm.onResetOpeningHoursForm(); collapseDatePrecise.toggle()">
                   Annuler
                   <i class="ri-close-line" aria-hidden="true"></i>
@@ -71,7 +73,7 @@ <h2 class="accordion-header" id="headingDatePrecise">
       </div>
     </form>
     <ng-container *ngIf="collapseDatePrecise.isCollapsed$ | async">
-      <app-text-separator class="px-3 my-5">OU</app-text-separator>
+      <app-text-separator>OU</app-text-separator>
       <div class="text-center">
         <ng-container *ngIf="features.get('cartographie') as cartographie">
           <a
@@ -80,7 +82,7 @@ <h2 class="accordion-header" id="headingDatePrecise">
             [class.disabled]="((orientationLayout.lieuxMediationNumeriqueCount$ | async) ?? 0) === 0"
             [routerLink]="['/','cartographie']"
             queryParamsHandling="preserve">
-            <span class="ri-circled bg-primary text-light fw-normal me-3">
+            <span class="ri-circled bg-primary text-light fw-normal me-3 d-sm-block d-none">
               <i class="ri-road-map-line" aria-hidden="true"></i>
             </span>
             <span class="orientation-btn-label my-auto text-start">J’affiche tous les lieux correspondant à ma recherche</span>
@@ -91,7 +93,7 @@ <h2 class="accordion-header" id="headingDatePrecise">
                 <span class="visually-hidden">Info</span>
                 <i class="ri-information-line fw-normal ri-2x text-muted" aria-hidden="true"></i>
               </button>
-              <i class="ri-arrow-right-s-line ri-2x text-muted" aria-hidden="true"></i>
+              <i class="ri-arrow-right-s-line ri-2x text-muted my-auto" aria-hidden="true"></i>
             </span>
           </a>
           <a