From 7de3aee2392ff045b8d77006b5e0fdc86488e016 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Thu, 25 May 2023 12:28:40 +0000
Subject: [PATCH 1/2] fix(layout): revert MR 512 and 522 fix for mobile
---
src/app/annuaire/annuaire.component.scss | 1 -
src/app/app-routing.module.ts | 1 +
src/app/app.component.scss | 6 +++
src/app/header/header.component.scss | 3 --
src/app/login/login.component.scss | 50 ++++++++++++------------
src/styles.scss | 3 ++
6 files changed, 36 insertions(+), 28 deletions(-)
diff --git a/src/app/annuaire/annuaire.component.scss b/src/app/annuaire/annuaire.component.scss
index 25f45664e..e66c8fb0b 100644
--- a/src/app/annuaire/annuaire.component.scss
+++ b/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;
}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1e510d4de..a5f733049 100644
--- a/src/app/app-routing.module.ts
+++ b/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,
],
},
{
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 47450c164..071f1c7c4 100644
--- a/src/app/app.component.scss
+++ b/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(100vh - #{$header-height});
}
.loader {
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 485808c27..e3224939d 100644
--- a/src/app/header/header.component.scss
+++ b/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;
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index ffd74fcd4..ca9a419d6 100644
--- a/src/app/login/login.component.scss
+++ b/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%;
+ }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 2ce37610a..68647ddc2 100644
--- a/src/styles.scss
+++ b/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;
}
--
GitLab
From 2145c0b7ba514dba4f381d78543f6ef6d53f21b0 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Thu, 25 May 2023 13:41:35 +0000
Subject: [PATCH 2/2] fix(mobile): unattainable bottom buttons
---
src/app/app.component.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 071f1c7c4..50bf8e16b 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -18,7 +18,7 @@
overflow-y: auto;
overflow-x: hidden;
position: relative;
- height: calc(100vh - #{$header-height});
+ height: calc(100svh - #{$header-height});
}
.loader {
--
GitLab