feat: add aide menu (#329)

* feat: add aide menu * feat: add aide links * fix: wording
anct-cartographie-nationale · Aug 14, 2023 · 628b0b9 · 628b0b9
1 parent c653e94
commit 628b0b9
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 8 deletions.
diff --git a/src/assets/fonts/remixicon/collection.remixicon b/src/assets/fonts/remixicon/collection.remixicon
@@ -1 +1 @@
-wifi-line,computer-line,printer-line,phone-line,map-pin-2-line,add-line,check-line,checkbox-blank-circle-line,calendar-check-line,mail-line,arrow-right-s-line,arrow-left-s-line,notification-3-line,mouse-line,group-line,wheelchair-line,parent-line,mail-line,user-3-line,tools-line,error-warning-line,service-line,checkbox-blank-circle-fill,equalizer-fill,account-pin-circle-fill,arrow-right-circle-fill,arrow-left-circle-fill,external-link-line,arrow-go-back-line,file-text-line,link,list-check,mail-send-line,skip-forward-line,map-pin-5-line,settings-4-line,calendar-todo-line,road-map-line,subtract-line,smartphone-line,user-line,user-star-line,slideshow-line,stethoscope-line,shopping-cart-line,settings-5-line,contacts-line,medal-line,image-2-line,pen-nib-line,map-pin-4-line,map-2-line,focus-3-line,sound-module-line,arrow-left-right-line,arrow-down-s-line,account-circle-fill,close-line,close-circle-fill,edit-line,information-line,close-circle-line,alert-line,compass-3-line,arrow-drop-right-fill,search-line
+wifi-line,computer-line,printer-line,phone-line,map-pin-2-line,add-line,check-line,checkbox-blank-circle-line,calendar-check-line,mail-line,arrow-right-s-line,arrow-left-s-line,notification-3-line,mouse-line,group-line,wheelchair-line,parent-line,mail-line,user-3-line,tools-line,error-warning-line,service-line,checkbox-blank-circle-fill,equalizer-fill,account-pin-circle-fill,arrow-right-circle-fill,arrow-left-circle-fill,external-link-line,arrow-go-back-line,file-text-line,link,list-check,mail-send-line,skip-forward-line,map-pin-5-line,settings-4-line,calendar-todo-line,road-map-line,subtract-line,smartphone-line,user-line,user-star-line,slideshow-line,stethoscope-line,shopping-cart-line,settings-5-line,contacts-line,medal-line,image-2-line,pen-nib-line,map-pin-4-line,map-2-line,focus-3-line,sound-module-line,arrow-left-right-line,arrow-down-s-line,account-circle-fill,close-line,close-circle-fill,edit-line,information-line,close-circle-line,alert-line,compass-3-line,arrow-drop-right-fill,search-line,question-line
diff --git a/src/assets/fonts/remixicon/remixicon.eot b/src/assets/fonts/remixicon/remixicon.eot
diff --git a/src/assets/fonts/remixicon/remixicon.svg b/src/assets/fonts/remixicon/remixicon.svg
diff --git a/src/assets/fonts/remixicon/remixicon.symbol.svg b/src/assets/fonts/remixicon/remixicon.symbol.svg
diff --git a/src/assets/fonts/remixicon/remixicon.ttf b/src/assets/fonts/remixicon/remixicon.ttf
diff --git a/src/assets/fonts/remixicon/remixicon.woff b/src/assets/fonts/remixicon/remixicon.woff
diff --git a/src/assets/fonts/remixicon/remixicon.woff2 b/src/assets/fonts/remixicon/remixicon.woff2
diff --git a/src/assets/img/logo/cartographie-nationale-brand.png b/src/assets/img/logo/cartographie-nationale-brand.png
diff --git a/src/features/cartographie/layouts/cartographie/cartographie.layout.html b/src/features/cartographie/layouts/cartographie/cartographie.layout.html
@@ -46,13 +46,23 @@ <h3 class="card-title text-primary">
           class="navbar-btn ms-auto"
           [attr.aria-controls]="affinerRechercheOffcanvas.id"
           [class.active]="affinerRechercheOffcanvas.expanded$ | async"
-          (click)="affinerRechercheOffcanvas.toggle()">
+          (click)="affinerRechercheOffcanvas.toggle(); aideOffcanvas.close()">
           <i
             class="me-1"
             [ngClass]="(affinerRechercheOffcanvas.expanded$ | async) ? 'ri-close-line' : 'ri-sound-module-line'"
             aria-hidden="true"></i>
           Affiner ma recherche
         </button>
+        <button
+          class="navbar-btn pb-1 pt-0"
+          [attr.aria-controls]="aideOffcanvas.id"
+          [class.active]="aideOffcanvas.expanded$ | async"
+          (click)="aideOffcanvas.toggle(); affinerRechercheOffcanvas.close()">
+          <i
+            class="ri-2x"
+            [ngClass]="(aideOffcanvas.expanded$ | async) ? 'ri-close-circle-line text-primary' : 'ri-question-line'"></i>
+          <span class="visually-hidden">À propos</span>
+        </button>
       </div>
     </div>
   </nav>
@@ -127,7 +137,7 @@ <h3 class="card-title text-primary">
         [isAbsolute]="true"
         [useContainer]="false"
         [useHeader]="false">
-        <div class="d-flex flex-column h-100">
+        <div class="d-flex flex-column h-100 border-top">
           <div class="flex-grow-1">
             <app-affiner-recherche-form
               *ngIf="affinerRechercheOffcanvas.expanded$ | async"
@@ -139,6 +149,57 @@ <h3 class="card-title text-primary">
           </div>
         </div>
       </app-offcanvas>
+      <app-offcanvas
+        #aideOffcanvas
+        class="z-index-over-all"
+        heading="À propos"
+        [isAbsolute]="true"
+        [useContainer]="false"
+        [useHeader]="false">
+        <div class="d-flex flex-column h-100 bg-white border-top">
+          <div class="list-group list-group-flush">
+            <a
+              href="https://labase.anct.gouv.fr/ressource/995"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="list-group-item list-group-item-action fw-bold py-4">
+              FAQ
+            </a>
+            <a
+              href="https://labase.anct.gouv.fr/ressource/974"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="list-group-item list-group-item-action fw-bold py-4">
+              Comment orienter ?
+            </a>
+          </div>
+          <div class="mt-auto bg-light p-4">
+            <a
+              class="btn orientation-btn bg-white mb-3 p-3 rounded-0 d-flex d-flex align-items-center"
+              href="https://labase.anct.gouv.fr/base/356?tags=&page=0&tab=resources"
+              target="_blank"
+              rel="noopener noreferrer">
+              <span class="ri-circled bg-primary text-light fw-normal me-3" aria-hidden="true"><i class="ri-link"></i></span>
+              <span class="orientation-btn-label my-auto text-start lh-sm">
+                La Cartographie nationale sur la Base
+                <br />
+                <i class="small text-muted">
+                  Comment enregistrer vos données sur la cartographie ? Comment orienter un bénéficiaire ? Les réponses à vos
+                  questions sont ici.
+                </i>
+              </span>
+            </a>
+            <a
+              class="btn orientation-btn bg-white mb-3 p-3 rounded-0 d-flex align-items-center"
+              href="mailto:cartographie.sonum@anct.gouv.fr">
+              <img src="/assets/img/logo/cartographie-nationale-brand.png" height="45" class="me-3" alt="" />
+              <span class="orientation-btn-label my-auto text-start lh-sm">
+                Contactez l'équipe de la Cartographie nationale des lieux d'inclusion numérique
+              </span>
+            </a>
+          </div>
+        </div>
+      </app-offcanvas>
     </aside>
   </div>
 </div>
diff --git a/src/features/core/components/offcanvas/offcanvas.component.ts b/src/features/core/components/offcanvas/offcanvas.component.ts
@@ -47,4 +47,10 @@ export class OffcanvasComponent implements OnChanges {
       this._hiding$.next(false);
     }, ANIMATION_DURATION);
   }
+
+  public close(): void {
+    if (!this._isExpanded) return;
+    this._isExpanded = false;
+    this._expanded$.next(false);
+  }
 }
diff --git a/src/features/presentation/components/carousel/carousel.component.html b/src/features/presentation/components/carousel/carousel.component.html
@@ -50,7 +50,7 @@ <h5 class="text-secondary fw-bold">{{ slides.titre }}</h5>
                 class="text-decoration-none"
                 href="https://lamednum.coop/schema-de-donnees-des-lieux-de-mediation-numerique-2/"
                 target="_blank">
-                standard de données des lieux de médiation numérique
+                standard de données des lieux d'inclusion numérique
               </a>
               établi par la
               <a class="text-decoration-none" href="https://lamednum.coop/" target="_blank">Mednum</a>

diff --git a/src/root/layouts/application-root/application-root-layout.component.html b/src/root/layouts/application-root/application-root-layout.component.html
@@ -8,7 +8,7 @@
       </div>
       <div class="col-xl-6 col-lg mt-lg-0 mt-4 text-secondary">
         <p>
-          La Cartographie nationale des lieux de médiation numérique peut être
+          La Cartographie nationale des lieux d'inclusion numérique peut être
           <a href="https://labase.anct.gouv.fr/ressource/993" class="text-white" target="_blank" rel="noopener noreferrer">
             intégrée facilement sur votre site web
           </a>

diff --git a/src/scss/components/_icons.scss b/src/scss/components/_icons.scss
@@ -364,3 +364,7 @@ $font-family-icons-lower: string.to-lower-case($font-family-icons);
 .ri-search-line::before {
   content: '\f0d1';
 }
+
+.ri-question-line::before {
+  content: '\f045';
+}
diff --git a/src/scss/components/_navbar.scss b/src/scss/components/_navbar.scss
@@ -22,9 +22,12 @@
   margin-bottom: calc(var(--bs-nav-link-padding-y) * -1);
   border: none;
   border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
-  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
   color: $muted-dark;
 
+  &:last-child {
+    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+  }
+
   &:hover {
     color: $body-color;
   }

diff --git a/src/scss/variables/_variables.scss b/src/scss/variables/_variables.scss
@@ -53,6 +53,7 @@ $form-range-track-height: 0.2rem;
 $form-range-track-bg: #bbb;
 $form-range-track-border-radius: 0;
 $form-range-thumb-width: 1.5rem;
+$offcanvas-horizontal-width: 450px;
 
 @import './accordion';
 @import './buttons';