resume page style

src/app/features/administration/form/steps/step-seven/step-seven.component.html

@@ -1,3 +1,5 @@
+<div class="step-container min-height">
+	<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
 	<div class="columns">
 		<div class="column">
 			<h2 class="title is-2">
@@ -5,19 +7,49 @@
 			</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.
+				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/3']">
+				<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/6']">
 					précédent
 				</button>
 			</div>
@@ -29,3 +61,4 @@
 			</div>
 		</div>
 	</div>
+</div>

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">

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 {

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;
+		}
+	}
+}