action before next in nav

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

@@ -30,6 +30,7 @@
 	</div>
 </div>
 <app-nav-steps
+	[actionBeforeNextStep]="changeDateInputMode"
 	[next_step_number]="pollService.step_current + 1"
 	[previous_step_number]="pollService.step_current - 1"
 ></app-nav-steps>

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

@@ -12,7 +12,7 @@
 						<div
 							class="button input-radio is-fullwidth"
 							[ngClass]="{
-								'is-selected': pollService.form.controls.isAboutDate.value
+								'is-selected': pollService.form.controls.isAboutDate.value !== false
 							}"
 							(click)="pollService.form.controls.isAboutDate.setValue(true)"
 						>
@@ -27,7 +27,7 @@
 						<div
 							class="button input-radio is-fullwidth"
 							[ngClass]="{
-								'is-selected': !pollService.form.controls.isAboutDate.value
+								'is-selected': !pollService.form.controls.isAboutDate.value !== false
 							}"
 							(click)="pollService.form.controls.isAboutDate.setValue(false)"
 						>

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

@@ -13,7 +13,7 @@
 			class="button button-next pull-right"
 			[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
 			[routerLink]="['/administration/step/' + next_step_number]"
-			(click)="runEndAction()"
+			(click)="runNextAction()"
 		>
 			<span *ngIf="is_finish_step">
 				Enregistrer

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

@@ -18,12 +18,23 @@ export class NavStepsComponent implements OnInit {
 	display_previous_button = true;
 	@Input()
 	is_finish_step = false;
+	/**
+	 * some action to perform before changing route
+	 */
+	@Input()
+	actionBeforeNextStep: Function;
 
 	constructor(private router: Router, public pollService: PollService) {}
 
 	ngOnInit(): void {}
 
-	runEndAction() {
+	/**
+	 * launch custom function before next step
+	 */
+	runNextAction() {
+		if (this.actionBeforeNextStep) {
+			this.actionBeforeNextStep();
+		}
 		if (this.is_finish_step) {
 			this.createPoll();
 		}

src/styles/partials/_datepicker.scss

@@ -65,12 +65,10 @@ p-calendar,
 		background: $white;
 	}
 
-	$cell-size: 30px;
-
 	.p-datepicker-calendar {
 		td {
 			width: $cell-size;
-			padding: 0.25rem;
+			padding: 0.15rem;
 		}
 
 		td span,

src/styles/partials/_forms.scss

@@ -274,7 +274,7 @@ mat-checkbox {
 .step {
 	max-width: $main-column-width;
 	margin: 0 auto;
-	padding: 2rem 1rem;
+	padding: 5rem 1rem;
 	box-sizing: border-box;
 	overflow: auto;
 	@extend .top-padding-nav;

src/styles/variables.scss

@@ -68,12 +68,16 @@ $default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
 $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
 
 // sizes and breakpoints
-$main-column-width: 400px;
-$main-column-width-inner: 380px;
-$mobile-size: 400px;
-$header-nav-height: 68px;
-$header-nav-inner-height: 60px;
+$main-column-width: 25rem;
+$main-column-width-inner: 23.75rem;
+$mobile-size: 25rem;
+$header-nav-height: 4.25rem;
+$header-nav-inner-height: 4rem;
 
+// datepicker
+$cell-size: 30px;
+
+// css vars
 :root {
 	--main-col-width: $main-column-width-inner;
 }