Merge branch 'dev' into 'master'

V2.3.0 (retour recette)

See merge request !528

src/app/annuaire/annuaire.component.scss

@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: calc(100vh - $header-height - $footer-height);
   &.logged {
     justify-content: flex-start;
   }

src/app/app-routing.module.ts

@@ -268,6 +268,7 @@ const routes: Routes = [
         canActivate: [AdminGuard],
         loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule),
       },
+      footerOutletRoute,
     ],
   },
   {

src/app/app.component.scss

@@ -2,6 +2,11 @@
 @import 'color';
 @import 'layout';
 
+.app-container {
+  display: block;
+  flex-direction: column;
+}
+
 @media print {
   .app-body {
     height: 100% !important;
@@ -13,6 +18,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
+  height: calc(100svh - #{$header-height});
 }
 
 .loader {

src/app/header/header.component.scss

@@ -15,9 +15,6 @@
   border-bottom: solid 1px $grey-4;
   background-color: $white;
   padding: 0 20px;
-  position: sticky;
-  top: 0;
-  z-index: 50;
   .right-header {
     @media #{$tablet} {
       display: none !important;

src/app/login/login.component.scss

@@ -4,32 +4,23 @@
 @import 'typography';
 
 .loginPage {
-  height: calc(100vh - $header-height - $footer-height);
   display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media #{$phone} {
+  width: 100%;
+  max-width: 980px;
+  box-sizing: border-box;
+  margin: auto;
+  margin-top: 2rem;
+  min-height: 450px;
+  max-height: 80vh;
+  overflow-y: auto;
+  color: $grey-1;
+  background: $white;
+  border-radius: 8px;
+  border: 1px solid $grey-6;
+  padding: 70px 40px;
+  @media #{$desktop} {
     padding: 1rem;
-    align-items: flex-start;
-  }
-
-  .form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-    width: 100%;
-    max-width: 980px;
-    box-sizing: border-box;
-    color: $grey-1;
-    background: $white;
-    border-radius: 8px;
-    border: 1px solid $grey-6;
-    padding: 70px 40px;
-    * {
-      max-width: 340px;
-    }
+    margin-top: 1rem;
   }
 
   .title {
@@ -51,6 +42,11 @@
     color: $orange-warning;
   }
 
+  .form {
+    max-width: 340px;
+    margin: auto;
+  }
+
   .form-group {
     margin: 1.5rem 0;
     .notValidate {
@@ -114,3 +110,9 @@
     }
   }
 }
+
+@media #{$tablet} {
+  .loginPage {
+    height: 100%;
+  }
+}

src/styles.scss

@@ -28,6 +28,9 @@ body {
   padding: 0;
   color: $black;
   background-color: $grey-8;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+  overflow: hidden;
   ::-webkit-scrollbar {
     width: 8px;
   }