From a43de5f4104d731f249a702b1e526ecb37cb3e55 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 1 Dec 2021 18:22:21 +0100
Subject: [PATCH] fix header and steps buttons on bottom

---
 .../steps/step-one/step-one.component.html    | 14 ++++++-----
 .../steps/step-two/step-two.component.html    | 24 ++++++++++---------
 .../stepper/stepper.component.scss            | 15 +++++++++++-
 src/styles/dev-utilities/_helpers.scss        |  8 +++++++
 src/styles/partials/_forms.scss               |  2 ++
 src/styles/partials/_navigation.scss          | 15 ++++++++++++
 6 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/src/app/features/administration/form/steps/step-one/step-one.component.html b/src/app/features/administration/form/steps/step-one/step-one.component.html
index 658284f9..f27612f8 100644
--- a/src/app/features/administration/form/steps/step-one/step-one.component.html
+++ b/src/app/features/administration/form/steps/step-one/step-one.component.html
@@ -73,12 +73,14 @@
 			></button>
 		</ng-template>
 	</p-confirmDialog>
-	<div class="columns">
-		<div class="column"></div>
-		<div class="column">
-			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
-				Suivant
-			</button>
+	<div class="bottom-step-buttons">
+		<div class="columns">
+			<div class="column"></div>
+			<div class="column">
+				<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
+					Suivant
+				</button>
+			</div>
 		</div>
 	</div>
 </div>
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 f3a5522b..f1b7f16a 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
@@ -41,17 +41,19 @@
 				</div>
 			</div>
 		</div>
-		<div class="columns">
-			<div class="column">
-				<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
-					précédent
-				</button>
-			</div>
-			<div class="column">
-				<!--				[disabled]="form.invalid"-->
-				<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
-					suivant
-				</button>
+		<div class="bottom-step-buttons">
+			<div class="columns">
+				<div class="column">
+					<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
+						précédent
+					</button>
+				</div>
+				<div class="column">
+					<!--				[disabled]="form.invalid"-->
+					<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
+						suivant
+					</button>
+				</div>
 			</div>
 		</div>
 	</form>
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss
index 13de296e..5821f7ae 100644
--- a/src/app/features/administration/stepper/stepper.component.scss
+++ b/src/app/features/administration/stepper/stepper.component.scss
@@ -1,8 +1,18 @@
 @import '../../../../styles/variables';
+@import '../../../../styles/dev-utilities/helpers';
 
 #creation_stepper {
+	@extend .fixed-box;
+	background: $white;
+	height: 6em;
+
+	.columns,
+	.column {
+		padding-bottom: 0;
+	}
+
 	.step-bar-container {
-		margin: 1rem 0 2rem;
+		margin: 1rem 0 0;
 		height: 0.6em;
 		display: inline-block;
 		min-width: 1px;
@@ -41,6 +51,9 @@
 		}
 	}
 
+	.step-info {
+		padding: 0.85rem;
+	}
 	.step-title-poll {
 		font-size: 0.85rem !important;
 		color: $d-neutral !important;
diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss
index ed47093c..f91ba2c0 100644
--- a/src/styles/dev-utilities/_helpers.scss
+++ b/src/styles/dev-utilities/_helpers.scss
@@ -39,3 +39,11 @@
 .marged-auto {
 	margin: 0 auto;
 }
+
+.fixed-box {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 10;
+}
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index 4398bdc4..1820efbf 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -310,6 +310,8 @@ mat-checkbox {
 }
 
 .step {
+	padding-top: 8em;
+
 	.title {
 		color: $primary_color;
 	}
diff --git a/src/styles/partials/_navigation.scss b/src/styles/partials/_navigation.scss
index 860dec1c..87cca616 100644
--- a/src/styles/partials/_navigation.scss
+++ b/src/styles/partials/_navigation.scss
@@ -106,3 +106,18 @@ a {
 a span.ui-steps-number {
 	padding: 0;
 }
+
+.bottom-step-buttons {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	z-index: 10;
+	height: 6em;
+	background: $white;
+	padding: 0.85rem;
+	.button {
+		width: 100%;
+		display: block;
+	}
+}