MD3 and responsive finetunings #11943

Author: sambaptista

client/app/front-office/components/agir-avec-nous/actions/actions.component.scss

@@ -1,11 +1,15 @@
 @use '../../../../../styles/mixins';
+@use '@ecodev/natural-layout' as nat;
+
 @include mixins.page-with-illustration();
 
-.page-illustration {
-    height: 500px;
-}
+@include nat.media(sm) {
+    .page-illustration {
+        height: 500px;
+    }
 
-#introduction {
-    position: relative;
-    top: -100px;
+    #introduction {
+        position: relative;
+        top: -100px;
+    }
 }

client/app/front-office/components/agir-avec-nous/alimentation/alimentation.component.html

@@ -6,7 +6,7 @@
 <div class="container mat-font-body-lg rich-text">
     <h1 class="mat-font-headline-lg">ALIMENTATION</h1>
 
-    <div class="nat-horizontal nat-gap-30">
+    <div class="nat-vertical nat-sm-horizontal nat-gap-30">
         <div class="app-md-expand-70 page-body mat-font-body-lg rich-text">
             <p>
                 De nombreuses personnes – producteurs, transformatrices, distributeurs, restauratrices et mangeurs –

client/app/front-office/components/association/qui-sommes-nous/qui-sommes-nous.component.html

@@ -6,7 +6,7 @@ <h1 class="mat-font-headline-lg">QUI SOMMES-NOUS ?</h1>
     <div class="nat-horizontal nat-gap-30">
         <div class="app-md-expand-70 app-gap-50 nat-vertical page-body mat-font-body-lg rich-text">
             <div>
-                <div class="nat-horizontal nat-gap-30">
+                <div class="nat-vertical nat-sm-horizontal nat-gap-30">
                     <div class="person nat-md-expand">
                         <img
                             src="assets/images/association/susana_jourdan-artisansdelatransition.jpg"

client/app/front-office/components/association/qui-sommes-nous/qui-sommes-nous.component.scss

@@ -1,14 +1,18 @@
 @use '../../../../../styles/mixins';
+@use '@ecodev/natural-layout' as nat;
+
 @include mixins.page-with-illustration();
 
 .page-illustration {
     height: 350px;
 }
 
-.page-illustration-content {
-    top: -300px;
-    & > img {
-        margin-bottom: -250px;
+@include nat.media(sm) {
+    .page-illustration-content {
+        top: -300px;
+        & > img {
+            margin-bottom: -250px;
+        }
     }
 }
 

client/app/front-office/components/faire-un-don/faire-un-don.component.scss

@@ -4,10 +4,3 @@
 .page-illustration {
     height: 350px;
 }
-
-.page-illustration-content {
-    top: -300px;
-    & > img {
-        margin-bottom: -250px;
-    }
-}

client/app/front-office/components/projet/projet.component.html

@@ -48,7 +48,7 @@ <h1 class="mat-font-headline-sm">Aux sources de LaRevueDurable</h1>
                         Quelques années plus tard, ils ont un peu plus de verbe qu’à leurs débuts (entretien RTS en juin
                         2008).
                     </p>
-                    <div class="nat-md-horizontal nat-gap nat-vertical">
+                    <div>
                         <img
                             class="vignette"
                             src="assets/images/illustration-pages/entretien-rts-2008-jacques-mirenowicz.jpg"

client/app/front-office/components/projet/projet.component.scss

@@ -1,4 +1,5 @@
 @use '../../../../styles/mixins';
+@use '@ecodev/natural-layout' as nat;
 @include mixins.page-with-illustration();
 
 .page-illustration-content {
@@ -9,10 +10,24 @@
 .vignette {
     display: block;
     margin: 0;
-    width: 300px;
 }
 
 audio {
     flex: none !important;
-    width: 400px;
+}
+
+audio,
+.vignette {
+    width: 100%;
+    max-width: 300px;
+}
+
+@include nat.media(null, sm) {
+    ul {
+        padding-left: 0;
+
+        li::before {
+            content: '';
+        }
+    }
 }

client/app/front-office/front-office.component.html

@@ -34,7 +34,11 @@
 </ng-template>
 
 <mat-sidenav-container>
-    <mat-sidenav #menu position="end" [opened]="menuOpened">
+    <mat-sidenav #menu id="mobile-menu-sidenav" position="end" [opened]="menuOpened">
+        <button id="mobile-hamburger-menu" matIconButton (click)="menu.toggle()">
+            <mat-icon naturalIcon="menu" />
+        </button>
+
         <!-- menu mobile -->
         <div id="mobile-menu">
             <ng-container *ngTemplateOutlet="mobileNavigationTemplate; context: {$implicit: mobileNavigation}" />
@@ -51,13 +55,15 @@
 
     <mat-sidenav-content>
         <mat-toolbar class="nat-horizontal nat-align nat-md-hide" id="header-mobile">
-            <div class="nat-expand"></div>
+            <div class="nat-expand nat-sm-show"></div>
 
-            <a routerLink="/"><img alt="logo" height="30" src="assets/logo-artisans-de-la-transition.svg" /></a>
+            <a id="mobile-menu-logo" routerLink="/"
+                ><img alt="logo" height="30" src="assets/logo-artisans-de-la-transition.svg"
+            /></a>
 
             <div class="nat-expand"></div>
 
-            <button matIconButton (click)="menu.toggle()">
+            <button id="hamburger-menu" matIconButton (click)="menu.toggle()">
                 <mat-icon naturalIcon="menu" />
             </button>
         </mat-toolbar>

client/app/front-office/front-office.component.scss

@@ -206,6 +206,15 @@ app-breadcrumbs {
     }
 }
 
+#mobile-menu-sidenav {
+    @include mat.sidenav-overrides(
+        (
+            container-width: 100%,
+            container-shape: 0,
+        )
+    );
+}
+
 #mobile-menu {
     margin-top: 20px;
     min-width: 300px;
@@ -216,7 +225,6 @@ app-breadcrumbs {
         align-items: center;
         cursor: pointer;
         padding: 0 24px;
-
         height: 48px;
         color: black;
         font-size: 16px;
@@ -242,6 +250,17 @@ app-breadcrumbs {
     }
 }
 
+#mobile-menu-logo {
+    img {
+        max-width: calc(100vw - 80px);
+    }
+}
+
+#mobile-hamburger-menu {
+    float: right;
+    margin-right: 20px;
+}
+
 #mobile-menu .mat-expansion-panel-body {
     padding-right: 0 !important;
 }

client/app/front-office/modules/cart/components/cart/cart.component.scss

@@ -15,7 +15,7 @@
 :host {
     @include responsive.responsive(responsive.$lt-md) {
         .cart-buttons > * {
-            min-width: 300px !important;
+            min-width: 100% !important;
         }
     }
 }