From 339b5da3e8bb63d39d7c9a2935d53213a7698b80 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 18 Nov 2021 11:41:23 +0100
Subject: [PATCH] resume page style

---
 .../step-seven/step-seven.component.html      | 87 +++++++++++++------
 .../step-three/step-three.component.html      |  2 +-
 src/styles/partials/_datepicker.scss          |  6 ++
 src/styles/partials/_forms.scss               | 27 ++++++
 4 files changed, 94 insertions(+), 28 deletions(-)

diff --git a/src/app/features/administration/form/steps/step-seven/step-seven.component.html b/src/app/features/administration/form/steps/step-seven/step-seven.component.html
index 55fce17c..4b728236 100644
--- a/src/app/features/administration/form/steps/step-seven/step-seven.component.html
+++ b/src/app/features/administration/form/steps/step-seven/step-seven.component.html
@@ -1,31 +1,64 @@
-<div class="columns">
-	<div class="column">
-		<h2 class="title is-2">
-			Voici le résumé de votre sondage
-		</h2>
-		<p class="helper">
-			En cliquant sur le bouton « Modifier » d’une section vous serez renvoyé à l’étape correspondante de la
-			création du sondage. Vous devrez repasser par toutes les étapes suivante.
-			<br />
-			Mais rassurez-vous, vous n’aurez pas à tout remplir à nouveau.
-		</p>
-		<div class="resume">
-			<h3 class="title is-3">Mes informations générales</h3>
-			<h3 class="title is-3">Mon type de sondage</h3>
-			<h3 class="title is-3">Mes dates et horaires</h3>
-			<h3 class="title is-3">Mes paramètres et options de notifications</h3>
-			<h3 class="title is-3">Mon nom et mon adresse e-mail</h3>
-		</div>
+<div class="step-container min-height">
+	<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
+	<div class="columns">
 		<div class="column">
-			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/3']">
-				précédent
-			</button>
-		</div>
-		<div class="column">
-			<button class="btn is-primary is-fullwidth" (click)="createPoll()" [disabled]="!pollService.form.valid">
-				<i class="fa fa-save"></i>
-				Enregistrer le sondage
-			</button>
+			<h2 class="title is-2">
+				Voici le résumé de votre sondage
+			</h2>
+			<p class="helper">
+				En cliquant sur le bouton « Modifier » d’une section vous serez renvoyé à l’étape correspondante de la
+				création du sondage. Vous devrez repasser par toutes les étapes suivantes.
+				<br />
+				Mais rassurez-vous, vous n’aurez pas à tout remplir à nouveau.
+			</p>
+			<div class="resume">
+				<h3 class="title is-3">Mes informations générales</h3>
+				<div class="block-resume">
+					<hr />
+					<div class="go-to-step" [routerLink]="['administration/step/1']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+				<h3 class="title is-3">Mon type de sondage</h3>
+				<div class="block-resume">
+					<hr />
+					<div class="go-to-step" [routerLink]="['administration/step/2']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+				<h3 class="title is-3">Mes dates et horaires</h3>
+				<div class="block-resume">
+					<hr />
+					<div class="go-to-step" [routerLink]="['administration/step/3']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+				<h3 class="title is-3">Mes paramètres et options de notifications</h3>
+				<div class="block-resume">
+					<hr />
+					<div class="go-to-step clickable" [routerLink]="['administration/step/4']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+				<h3 class="title is-3">Mon nom et mon adresse e-mail</h3>
+				<div class="block-resume">
+					<hr />
+					<div class="go-to-step" [routerLink]="['administration/step/5']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+			</div>
+			<div class="column">
+				<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/6']">
+					précédent
+				</button>
+			</div>
+			<div class="column">
+				<button class="btn is-primary is-fullwidth" (click)="createPoll()" [disabled]="!pollService.form.valid">
+					<i class="fa fa-save"></i>
+					Enregistrer le sondage
+				</button>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/src/app/features/administration/form/steps/step-three/step-three.component.html b/src/app/features/administration/form/steps/step-three/step-three.component.html
index 769e06d4..4ccb5947 100644
--- a/src/app/features/administration/form/steps/step-three/step-three.component.html
+++ b/src/app/features/administration/form/steps/step-three/step-three.component.html
@@ -1,5 +1,5 @@
 <div class="step min-height">
-	<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
+	<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
 	<app-errors-list [form]="pollService.form"></app-errors-list>
 	<!--			choix spécialement pour les dates-->
 	<div class="calendar" *ngIf="mode_calendar">
diff --git a/src/styles/partials/_datepicker.scss b/src/styles/partials/_datepicker.scss
index ece53312..7f32c57f 100644
--- a/src/styles/partials/_datepicker.scss
+++ b/src/styles/partials/_datepicker.scss
@@ -1,4 +1,7 @@
 // calendar primeng
+.calendar {
+	text-align: center;
+}
 .p-datepicker {
 	border: solid 1px $logo_color;
 	padding: 0.5em;
@@ -20,6 +23,9 @@
 
 	.p-datepicker-buttonbar {
 		margin-top: 0.5em;
+		button {
+			min-width: 15em;
+		}
 	}
 
 	.p-datepicker-month {
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index f315f756..a4383406 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -14,6 +14,7 @@ select.is-hovered,
 .select select.is-hovered {
 	border-color: $border-color !important;
 }
+
 app-step-one,
 app-step-two,
 app-step-three,
@@ -21,11 +22,13 @@ app-step-four {
 	padding: 2em 2.5em;
 	display: block;
 }
+
 app-step-five {
 	app-stepper {
 		padding: 2em 2.5em;
 		display: block;
 	}
+
 	.container {
 		padding: 2em;
 	}
@@ -273,6 +276,7 @@ mat-checkbox {
 		background: $light;
 		border: 3px solid $primary-color;
 	}
+
 	.work-in-progress {
 		padding: 1em 2em;
 		background: $border-color;
@@ -281,5 +285,28 @@ mat-checkbox {
 }
 
 .step-container {
+	padding: 1em 2em;
 	@extend .container, .is-widescreen;
 }
+
+// resume de la création de sondage
+.block-resume {
+	border-radius: 0.25em;
+	background: $bg-grey;
+	padding: 1em;
+	margin-bottom: 0.5em;
+
+	hr {
+		margin: 0.5em -1em;
+		background: $rules;
+	}
+	.go-to-step {
+		@extend .clickable;
+
+		padding: 1em;
+		&:hover {
+			background: $secondary_color;
+			color: $white;
+		}
+	}
+}