🎨 style on mobile for nav, finish button hover

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

@@ -84,7 +84,6 @@
 				[next_step_number]="pollService.step_current + 1"
 				[previous_step_number]="pollService.step_current - 1"
 				[is_finish_step]="true"
-				[endAction]="createPoll"
 			></app-nav-steps>
 		</div>
 	</div>

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

@@ -13,14 +13,4 @@ export class StepSevenComponent implements OnInit {
 	}
 
 	ngOnInit(): void {}
-	createPoll() {
-		this.pollService.createPoll().then(
-			(resp) => {
-				this.router.navigate(['administration/success']);
-			},
-			(err) => {
-				console.error('oops err', err);
-			}
-		);
-	}
 }

src/app/features/administration/nav-steps/nav-steps.component.html

@@ -15,7 +15,7 @@
 				class="button is-fullwidth"
 				[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
 				[routerLink]="['/administration/step/' + next_step_number]"
-				(click)="is_finish_step ? runEndAction() : null"
+				(click)="runEndAction()"
 			>
 				<span *ngIf="is_finish_step">
 					<i class="fa fa-save"></i>

src/app/features/administration/nav-steps/nav-steps.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { PollService } from '../../../core/services/poll.service';
 
 @Component({
 	selector: 'app-nav-steps',
@@ -11,19 +13,30 @@ export class NavStepsComponent implements OnInit {
 	@Input()
 	previous_step_number = 1;
 	@Input()
-	next_step_number = 1;
+	next_step_number = 2;
 	@Input()
 	display_previous_button = true;
 	@Input()
 	is_finish_step = false;
-	@Input()
-	endAction: Function;
 
-	constructor() {}
+	constructor(private router: Router, public pollService: PollService) {}
 
 	ngOnInit(): void {}
 
 	runEndAction() {
-		return this.endAction();
+		if (this.is_finish_step) {
+			this.createPoll();
+		}
+	}
+
+	createPoll() {
+		this.pollService.createPoll().then(
+			(resp) => {
+				this.router.navigate(['administration/success']);
+			},
+			(err) => {
+				console.error('oops err', err);
+			}
+		);
 	}
 }

src/app/features/administration/stepper/stepper.component.html

@@ -58,10 +58,10 @@
 			{{ pollService.form.value.title }}
 		</h2>
 		<div class="columns">
-			<div class="column">
+			<div class="column is-half">
 				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
 			</div>
-			<div class="column is-narrow has-text-right">
+			<div class="column is-half has-text-right">
 				<a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
 			</div>
 		</div>

src/app/features/administration/stepper/stepper.component.scss

@@ -6,13 +6,19 @@
 	background: $white;
 	height: 6em;
 
+	a {
+		@extend .clickable;
+		&:hover {
+			color: $secondary_color;
+		}
+	}
 	.columns,
 	.column {
 		padding-bottom: 0;
 	}
 
 	.step-bar-container {
-		margin: 1rem 0 0;
+		margin: 0;
 		height: 0.6em;
 		display: inline-block;
 		min-width: 1px;
@@ -52,11 +58,15 @@
 	}
 
 	.step-info {
-		padding: 0.85rem;
+		padding: 0.85rem 0.85rem 2rem;
+		background: $white;
+		i {
+			margin-left: 1ch;
+		}
 	}
 	.step-title-poll {
-		font-size: 0.85rem !important;
-		color: $d-neutral !important;
+		font-size: 0.85rem;
+		color: $d-neutral;
 		margin-bottom: 0rem;
 	}
 

src/styles/partials/_form-controls.scss

@@ -14,4 +14,8 @@
 .is-finish {
 	background: $success_color;
 	color: $white;
+	&:hover {
+		background: mix($success_color, $white);
+		color: $font_color;
+	}
 }