set min height for each step

src/app/core/services/poll.service.ts

@@ -165,7 +165,6 @@ export class PollService implements Resolve<Poll> {
 	}
 
 	public async loadPollBySlug(slug: string): Promise<void> {
-		console.log('slug', slug);
 		if (slug) {
 			const poll: Poll | undefined = await this.apiService.getPollBySlug(slug);
 			console.log({ loadPollBySlugResponse: poll });
@@ -213,14 +212,11 @@ export class PollService implements Resolve<Poll> {
 	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
 		$event.preventDefault();
 
-		console.log('this.choices.length', this.choices.length);
-		console.log('choice_number', choice_number);
 		const lastChoice = this.choices.length - 1 === choice_number;
 		// reset field with Ctrl + D
 		// add a field with Ctrl + N
 		// go to previous choice with arrow up
 		// go to next choice with arrow down
-		console.log('$event', $event);
 
 		if ($event.key == 'ArrowUp' && choice_number > 0) {
 			this.focusOnChoice(choice_number - 1);

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

@@ -5,22 +5,9 @@
 		</h2>
 		<app-stepper [step_current]="pollService.step_current" [step_max]="pollService.step_max"></app-stepper>
 	</header>
-	<section class="step-container">
+	<section class="step-container min-height">
 		<router-outlet>
 			<app-step-one [form]="form"></app-step-one>
 		</router-outlet>
 	</section>
-	<footer>
-		<div class="columns">
-			<div class="column"></div>
-			<div class="column">
-				<!--				[disabled]="form.invalid"-->
-				<button class="button is-primary is-fullwidth" [routerLink]="['administration/step/2']">
-					suivant
-				</button>
-			</div>
-		</div>
-	</footer>
-
-	<hr />
 </div>

src/app/features/administration/form/step-five/step-five.component.html

@@ -1,4 +1,4 @@
-<app-stepper [step_current]="5" [step_max]="step_max"></app-stepper>
+<app-stepper [step_current]="5" [step_max]="5"></app-stepper>
 <div class="columns">
 	<div class="column"></div>
 	<div class="column">

src/app/features/administration/form/step-four/step-four.component.html

@@ -1,4 +1,4 @@
-<app-stepper [step_current]="4" [step_max]="step_max"></app-stepper>
+<app-stepper [step_current]="4" [step_max]="5"></app-stepper>
 
 <div class="creator-infos">
 	<label class="" for="creatorEmail">

src/app/features/administration/form/step-one/step-one.component.html

@@ -1,5 +1,6 @@
 <div class="step">
-	<form [formGroup]="pollService.form">
+	<form class="min-height" [formGroup]="pollService.form">
+		<app-stepper [step_current]="1" [step_max]="5"></app-stepper>
 		<section class="poll-title">
 			<h2 class="title is-2">
 				{{ 'creation.choose_title' | translate }}
@@ -62,7 +63,7 @@
 						300 caractères maximum
 					</div>
 				</div>
-				<div class="column">
+				<div class="column is-narrow">
 					<button
 						mat-button
 						*ngIf="description.value"
@@ -79,14 +80,10 @@
 		slug: {{ pollService.form.value.custom_url }}
 	</form>
 	<div class="columns">
-		<div class="column">
+		<div class="column"></div>
-			<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']">
+			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
 				suivant
 			</button>
 		</div>

src/app/features/administration/form/step-three/step-three.component.html

@@ -1,3 +1,4 @@
+<div class="min-height">
 	<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
 
 	<!--			choix spécialement pour les dates-->
@@ -47,7 +48,12 @@
 					<label for="timeChoices_{{ id }}">
 						<i class="fa fa-clock-o" aria-hidden="true"></i>
 					</label>
-				<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" />
+					<input
+						[(ngModel)]="time.literal"
+						name="timeChoices_{{ id }}"
+						type="text"
+						id="timeChoices_{{ id }}"
+					/>
 					<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
 						<i class="fa fa-times" aria-hidden="true"></i>
 					</button>
@@ -139,7 +145,7 @@
 			{{ 'dates.interval_button_dates' | translate }}
 		</button>
 	</section>
-
+</div>
 <div class="columns">
 	<div class="column">
 		<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']">

src/app/features/administration/form/step-three/step-three.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { PollService } from '../../../../core/services/poll.service';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
 	selector: 'app-step-three',
@@ -15,4 +16,8 @@ export class StepThreeComponent implements OnInit {
 	constructor(public pollService: PollService) {}
 
 	ngOnInit(): void {}
+
+	drop(event: CdkDragDrop<string[]>) {
+		// moveItemInArray(this.pollService.choices, event.previousIndex, event.currentIndex);
+	}
 }

src/app/features/administration/form/step-two/step-two.component.html

@@ -1,5 +1,6 @@
-<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
 <div class="form-field poll-kind">
+	<div class="min-height">
+		<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
 		<h2 class="title is-2">
 			{{ 'creation.want' | translate }}
 		</h2>
@@ -25,6 +26,7 @@
 				</button>
 			</div>
 		</div>
+	</div>
 	<div class="columns">
 		<div class="column">
 			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">

src/app/features/administration/form/step-two/step-two.component.ts

@@ -53,10 +53,6 @@ export class StepTwoComponent implements OnInit {
 
 	resetTimes() {}
 
-	drop(event: CdkDragDrop<string[]>) {
-		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
-	}
-
 	addChoice() {}
 
 	addTimeToDate(choice: any, id: number) {}

src/styles/partials/global.scss

@@ -4,3 +4,7 @@ html {
 	font-size: 1rem; /* 16px */
 	color: $font_color;
 }
+
+.min-height {
+	min-height: 50vh;
+}