From cdfff229672a157d096149dfe0e1f44bfd8229f2 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 9 Dec 2021 11:21:41 +0100
Subject: [PATCH] style for mobile

---
 .../steps/step-two/step-two.component.html    |  1 +
 .../nav-steps/nav-steps.component.html        |  6 ++--
 .../nav-steps/nav-steps.component.scss        |  4 ++-
 .../stepper/stepper.component.html            |  5 ++--
 .../stepper/stepper.component.scss            | 25 +++++++++-------
 src/index.html                                |  3 +-
 src/styles/libraries/_overrides.scss          |  5 ++++
 src/styles/partials/_forms.scss               | 30 +++++++++++--------
 src/styles/partials/global.scss               | 18 ++++++++++-
 src/styles/variables.scss                     |  4 +++
 10 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.html b/src/app/features/administration/form/steps/step-two/step-two.component.html
index f10ecfb8..8607c88a 100644
--- a/src/app/features/administration/form/steps/step-two/step-two.component.html
+++ b/src/app/features/administration/form/steps/step-two/step-two.component.html
@@ -42,6 +42,7 @@
 			</div>
 		</div>
 		<app-nav-steps
+			class="is-fixed-top"
 			[next_step_number]="pollService.step_current + 1"
 			[previous_step_number]="pollService.step_current - 1"
 		></app-nav-steps>
diff --git a/src/app/features/administration/nav-steps/nav-steps.component.html b/src/app/features/administration/nav-steps/nav-steps.component.html
index 45017c9b..8ad7fd3a 100644
--- a/src/app/features/administration/nav-steps/nav-steps.component.html
+++ b/src/app/features/administration/nav-steps/nav-steps.component.html
@@ -1,7 +1,7 @@
-<div class="bottom-step-buttons">
+<div class="bottom-step-buttons" class="is-fixed-bottom">
 	<div class="container">
 		<div class="columns half-columns">
-			<div class="column is-narrow-mobile">
+			<div class="column">
 				<button
 					*ngIf="display_previous_button"
 					class="button button-previous is-secondary is-fullwidth"
@@ -10,7 +10,7 @@
 					Précédent
 				</button>
 			</div>
-			<div class="column is-narrow-mobile">
+			<div class="column">
 				<button
 					*ngIf="display_next_button"
 					class="button button-next is-fullwidth"
diff --git a/src/app/features/administration/nav-steps/nav-steps.component.scss b/src/app/features/administration/nav-steps/nav-steps.component.scss
index 7c6a3593..e879abb0 100644
--- a/src/app/features/administration/nav-steps/nav-steps.component.scss
+++ b/src/app/features/administration/nav-steps/nav-steps.component.scss
@@ -1,5 +1,7 @@
 @import '../../../../styles/variables';
-
+.bottom-step-buttons {
+	padding: 8px 16px;
+}
 .button {
 	&.is-secondary {
 		color: $secondary_color !important;
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 3d1d7aba..86ff54d9 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -78,9 +78,8 @@
 			</div>
 		</div>
 	</div>
-	<div class="step-bar-container" style="width: 100%;">
-		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
-	</div>
+	<div class="step-bar-container"></div>
+	<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
 
 	<!--	modale pour quitter la création-->
 	<p-dialog
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss
index 53cd193d..b482ac3c 100644
--- a/src/app/features/administration/stepper/stepper.component.scss
+++ b/src/app/features/administration/stepper/stepper.component.scss
@@ -4,7 +4,7 @@
 #creation_stepper {
 	@extend .fixed-box;
 	background: $white;
-	height: 6em;
+	height: 56px;
 
 	a {
 		@extend .clickable;
@@ -21,19 +21,21 @@
 
 	.step-bar-container {
 		margin: 0;
-		height: 0.6em;
-		display: inline-block;
-		min-width: 1px;
-		background: $d-grey !important;
 		width: 100%;
+		position: relative;
+		top: 4px;
+		display: block;
+		min-width: 1px;
+		height: 4px;
+		background: $d-grey !important;
 	}
 
 	.step-bar-progress {
 		position: relative;
-		top: -0.5em;
+		top: 0;
 		left: 0;
-		height: 0.5em;
-		display: inline-block;
+		height: 4px;
+		display: block;
 		min-width: 1px;
 		background: $d-blue-700;
 	}
@@ -51,8 +53,9 @@
 	}
 
 	.cancel-button {
-		margin-top: -0.5em;
-		line-height: 2rem;
+		margin-top: 0;
+		line-height: 60px;
+		height: 60px;
 		display: inline-block;
 
 		&:hover {
@@ -63,7 +66,7 @@
 	.step-info {
 		padding: 9px 10px;
 		background: $white;
-
+		height: 60px;
 		i {
 			margin-left: 1ch;
 		}
diff --git a/src/index.html b/src/index.html
index d0e691bf..ccb70099 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,9 +1,8 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="has-navbar-fixed-top">
 	<head>
 		<meta charset="utf-8" />
 		<base href="/" />
-
 		<meta content="width=device-width, initial-scale=1" name="viewport" />
 		<link href="favicon.ico" rel="icon" type="image/x-icon" />
 		<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
diff --git a/src/styles/libraries/_overrides.scss b/src/styles/libraries/_overrides.scss
index 1f847af9..a55dcb72 100644
--- a/src/styles/libraries/_overrides.scss
+++ b/src/styles/libraries/_overrides.scss
@@ -19,3 +19,8 @@ $input-shadow: none;
 	display: block !important;
 	width: 80%;
 }
+
+html.has-navbar-fixed-top,
+body.has-navbar-fixed-top {
+	padding-top: 68px;
+}
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index 3ef8cccc..1a45c662 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -21,7 +21,6 @@ app-step-three,
 app-step-four,
 app-step-six,
 app-step-seven {
-	padding: 2em 2.5em;
 	display: block;
 }
 
@@ -83,13 +82,17 @@ textarea {
 }
 
 // radio input structure
-
+.mat-checkbox-label,
+.mat-checkbox-layout .mat-checkbox-label {
+	max-width: 90vw;
+}
 .button {
 	label {
 		margin-bottom: 0;
 		width: 100%;
 		display: inline-block;
 		text-align: left;
+		max-width: 90vw;
 	}
 }
 input[type='radio'] {
@@ -103,11 +106,6 @@ li {
 	list-style-type: none;
 }
 
-.next {
-	max-width: 200px;
-	margin-bottom: 50px;
-}
-
 .btn-block {
 	display: block;
 	width: 100%;
@@ -138,12 +136,14 @@ option {
 	background-position: right 1rem center;
 	background-clip: border-box;
 	min-width: 10rem;
+	max-width: 90vw;
 	margin-bottom: 0.25rem;
 	border-bottom: 2px solid $primary_color !important;
 }
 
 select {
 	@extend .select, .input;
+	max-width: 90vw;
 }
 
 #multi_hours select {
@@ -153,11 +153,13 @@ select {
 input {
 	border-color: #4e4c59 !important;
 	@extend .text-ellipsis;
+	max-width: 90vw;
+	display: block;
 }
 
 textarea {
 	width: 100%;
-	max-width: 100%;
+	max-width: 90vw;
 	min-height: 213px;
 	padding: 0.5em 1em;
 	margin-bottom: 1em;
@@ -198,7 +200,7 @@ mat-checkbox {
 
 .admin-form {
 	.step {
-		max-width: 800px;
+		max-width: $main-column-width;
 		margin: 0 auto;
 	}
 }
@@ -305,14 +307,16 @@ mat-checkbox {
 }
 
 .step {
-	padding-top: 8em;
-
+	padding: 1rem 1rem;
 	.title {
-		color: $primary_color;
+		color: $d-primary-intense;
+		margin-bottom: 36px;
+		font-size: 28px;
+		line-height: 32px;
 	}
 
 	.step-counter-text {
-		color: $primary_color;
+		color: $d-primary-intense;
 		font-size: 1rem;
 		line-height: 1.25rem;
 	}
diff --git a/src/styles/partials/global.scss b/src/styles/partials/global.scss
index 9c54938c..66d9d0a3 100644
--- a/src/styles/partials/global.scss
+++ b/src/styles/partials/global.scss
@@ -5,6 +5,9 @@ html {
 	color: $font_color;
 }
 
+form {
+	margin: 0 !important;
+}
 main {
 	min-height: 90vh;
 }
@@ -37,12 +40,25 @@ main {
 
 .columns {
 	&.half-columns {
-		max-width: 900px;
+		max-width: $main-column-width;
 		margin: 0 auto;
+		padding: 0;
 		.column {
 			padding: 0;
 			width: 50% !important;
 			float: left;
+			&:nth-of-type(1) {
+				padding-right: 1.5rem;
+				.step-info & {
+					padding: 0;
+				}
+			}
+			&:nth-of-type(2) {
+				padding-left: 1.5rem;
+			}
+		}
+		.button {
+			width: 100%;
 		}
 	}
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 95b3fc7b..1a7ded20 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -66,3 +66,7 @@ $success: $d-success;
 
 $default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
 $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
+
+// sizes and breakpoints
+$main-column-width: 900px;
+$mobile-size: 380px;