fix: scroll in details

anct-cartographie-nationale · Sep 19, 2023 · 154c1ab · 154c1ab
1 parent 9430765
commit 154c1ab
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 40 deletions.
diff --git a/...e/components/lieux-mediation-numerique-details/accessibilite/accessibilite.component.html b/...e/components/lieux-mediation-numerique-details/accessibilite/accessibilite.component.html
@@ -1,43 +1,43 @@
-<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">
-      <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>
+<div class="row g-0 bg-light p-3 d-print-none">
+  <div class="col-sm-auto col-12">
+    <a
+      href="https://acceslibre.beta.gouv.fr/contrib/start/"
+      class="btn btn-sm btn-secondary m-auto 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>
-  <div class="d-flex align-items-center">
-    <button
-      #collapseAccesLibreControl
-      class="btn btn-link p-3 text-decoration-none"
-      aria-controls="collapseAccesLibre"
-      [class.collapsed]="collapseAccesLibre.isCollapsed$ | async"
-      [attr.aria-expanded]="collapseAccesLibre.isExpanded$ | async"
-      (click)="collapseAccesLibre.toggle()">
-      <img
-        class="img-fluid me-2"
-        [src]="assetsConfiguration.path + '/img/logo/acces-libre/acces-libre.svg'"
-        alt="À propos du site accès libre" />
-      <span class="ms-auto">
-        <i
-          *ngIf="collapseAccesLibre.isCollapsed$ | async"
-          class="ri-information-line ri-xl text-muted-dark"
-          aria-hidden="true"></i>
-        <i
-          *ngIf="collapseAccesLibre.isExpanded$ | async"
-          class="ri-close-circle-fill ri-xl text-primary"
-          aria-hidden="true"></i>
-      </span>
-    </button>
+  <div class="col-sm col-12 row g-0 mt-1">
+    <div class="col-6">
+      <i class="ri-close-circle-fill me-1 ms-sm-2 ms-0" aria-hidden="true"></i>
+      <em class="mt-1">Pas d'information</em>
+    </div>
+    <div class="col-6 text-end">
+      <button
+        #collapseAccesLibreControl
+        class="btn btn-link text-decoration-none p-0"
+        aria-controls="collapseAccesLibre"
+        [class.collapsed]="collapseAccesLibre.isCollapsed$ | async"
+        [attr.aria-expanded]="collapseAccesLibre.isExpanded$ | async"
+        (click)="collapseAccesLibre.toggle()">
+        <img
+          class="img-fluid ms-auto me-2"
+          [src]="assetsConfiguration.path + '/img/logo/acces-libre/acces-libre.svg'"
+          alt="À propos du site accès libre" />
+        <span class="ms-auto">
+          <i
+            *ngIf="collapseAccesLibre.isCollapsed$ | async"
+            class="ri-information-line ri-xl text-muted-dark"
+            aria-hidden="true"></i>
+          <i
+            *ngIf="collapseAccesLibre.isExpanded$ | async"
+            class="ri-close-circle-fill ri-xl text-primary"
+            aria-hidden="true"></i>
+        </span>
+      </button>
+    </div>
   </div>
 </div>
 <app-collapse #collapseAccesLibre [control]="collapseAccesLibreControl" aria-labelledby="headingAccesLibre">

diff --git a/...ux-mediation-numerique-details/public-pris-en-charge/public-pris-en-charge.component.html b/...ux-mediation-numerique-details/public-pris-en-charge/public-pris-en-charge.component.html
@@ -5,7 +5,7 @@ <h2 class="h5 text-muted text-uppercase mb-3">Propriété public</h2>
       class="badge rounded-pill text-bg-light p-2 me-2 mb-2 fs-6 overflow-hidden"
       style="max-width: 400px; text-overflow: ellipsis"
       *ngFor="let publicAccueilli of publicsAccueillis">
-      <span class="opacity-75">{{ publicAccueilli }}</span>
+      <span class="opacity-75">{{ publicsAccueilliMap.get(publicAccueilli) ?? publicAccueilli }}</span>
     </span>
   </div>
   <div class="d-none d-print-block">

diff --git a/...ieux-mediation-numerique-details/public-pris-en-charge/public-pris-en-charge.component.ts b/...ieux-mediation-numerique-details/public-pris-en-charge/public-pris-en-charge.component.ts
@@ -8,4 +8,9 @@ import { PublicAccueilli } from '@gouvfr-anct/lieux-de-mediation-numerique';
 })
 export class PublicPrisEnChargeComponent {
   @Input() public publicsAccueillis: PublicAccueilli[] | undefined;
+
+  public publicsAccueilliMap: Map<PublicAccueilli, string> = new Map([
+    [PublicAccueilli.HandicapsPsychiques, 'Handicaps psychiques'],
+    [PublicAccueilli.HandicapsMentaux, 'Handicaps mentaux']
+  ]);
 }