From 934e004a339bae43be02c74709fb30cebc5f80ff Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 15 Mar 2022 11:18:38 +0100
Subject: [PATCH] mobile button to exit menu, padding on main col on small
 screens

---
 src/app/core/services/poll.service.ts         |  2 +-
 .../stepper/stepper.component.html            | 94 ++++++++++---------
 src/styles/dev-utilities/_helpers.scss        | 16 ++++
 src/styles/partials/_responsive.scss          |  3 +-
 4 files changed, 68 insertions(+), 47 deletions(-)

diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts
index 128a03ec..02810cf6 100644
--- a/src/app/core/services/poll.service.ts
+++ b/src/app/core/services/poll.service.ts
@@ -485,7 +485,7 @@ export class PollService implements Resolve<Poll> {
 
 	askInitFormDefault(): void {
 		this.initFormDefault(environment.autofill_creation);
-		this.toastService.display('formulaire réinitialisé');
+		// this.toastService.display('formulaire réinitialisé');
 	}
 
 	countDays(): void {
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index bebb2f53..59672bc8 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -79,9 +79,11 @@
 				{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
 			</span>
 		</p>
-		<button class="is-visible-smallest-screen pull-right menu-button" (click)="toggle_mobile_menu()">
-			{{ 'nav.menu' | translate }}
-			<img class="icon" aria-hidden="true" src="assets/icons/book.svg" />
+		<button
+			class="is-visible-smallest-screen pull-right menu-button is-filtered-icon-primary has-background-menu"
+			(click)="toggle_mobile_menu()"
+		>
+			<!--			{{ 'nav.menu' | translate }}-->
 		</button>
 		<div class="is-hidden-smallest-screen has-right-elements pull-right">
 			<app-language-selector class="nav-button"></app-language-selector>
@@ -99,57 +101,59 @@
 	<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
 
 	<!--	modale pour quitter la création-->
-	<p-dialog
-		id="close_stepper"
-		[modal]="true"
-		[(visible)]="display_cancel_dialog"
-		[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
-		[style]="{ width: '486px', 'border-radius': '1rem' }"
-		[styleClass]="'roundToPercentWidth-borders'"
-		[draggable]="false"
-		[showHeader]="false"
-		[resizable]="false"
-	>
-		<ng-template pTemplate="titlebar">
-			<button
-				id="close_dialog"
-				class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
-				(click)="focusOnCancelButton()"
-			>
-				{{ 'SENTENCES.Close' | translate }}
-				<img class="icon" src="assets/icons/x_blue.svg" />
-			</button>
-			<h1 class="title is-1">
-				{{ 'popup.cancel.title' | translate }}
-			</h1>
-			<p class="description">
-				{{ 'popup.cancel.main' | translate }}
-			</p>
-		</ng-template>
-		<ng-template pTemplate="footer">
-			<div class="">
-				<div class="has-no-padding">
-					<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
-						{{ 'popup.cancel.reject' | translate }}
-					</button>
-					<button class="button cancel-button-confirm is-primary" (click)="goToHome()">
-						{{ 'popup.cancel.validate' | translate }}
-					</button>
+	<dialog>
+		<p-dialog
+			id="close_stepper"
+			[modal]="true"
+			[(visible)]="display_cancel_dialog"
+			[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
+			[style]="{ width: '486px', 'border-radius': '1rem' }"
+			[styleClass]="'roundToPercentWidth-borders'"
+			[draggable]="false"
+			[showHeader]="false"
+			[resizable]="false"
+		>
+			<ng-template pTemplate="titlebar">
+				<button
+					id="close_dialog"
+					class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
+					(click)="focusOnCancelButton()"
+				>
+					{{ 'SENTENCES.Close' | translate }}
+					<img class="icon" src="assets/icons/x_blue.svg" />
+				</button>
+				<h1 class="title is-1">
+					{{ 'popup.cancel.title' | translate }}
+				</h1>
+				<p class="description">
+					{{ 'popup.cancel.main' | translate }}
+				</p>
+			</ng-template>
+			<ng-template pTemplate="footer">
+				<div class="">
+					<div class="has-no-padding">
+						<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
+							{{ 'popup.cancel.reject' | translate }}
+						</button>
+						<button class="button cancel-button-confirm is-primary" (click)="goToHome()">
+							{{ 'popup.cancel.validate' | translate }}
+						</button>
+					</div>
 				</div>
-			</div>
-		</ng-template>
-	</p-dialog>
+			</ng-template>
+		</p-dialog>
+	</dialog>
 	<div id="mobile_menu" *ngIf="display_mobile_menu">
 		<div class="menu-content">
 			<div class="padded">
 				<button
 					id="close_menu"
-					class="button cancel-button-reject pull-right img-marged-left"
+					class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
 					(click)="display_mobile_menu = false"
 				>
-					{{ 'SENTENCES.Close' | translate }}
-					<img class="icon" src="assets/icons/x_blue.svg" />
+					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
 				</button>
+
 				<h2 class="title is-2 has-text-primary">Menu</h2>
 				<div class="langs">
 					<app-language-selector class="nav-button" [idSuffix]="'_mobile'"></app-language-selector>
diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss
index af980b3c..c9b6177e 100644
--- a/src/styles/dev-utilities/_helpers.scss
+++ b/src/styles/dev-utilities/_helpers.scss
@@ -114,6 +114,13 @@
 		color: $secondary_color;
 	}
 }
+.has-background-icon-right {
+	padding-right: 44px;
+	background-position: right;
+	&:hover {
+		color: $secondary_color;
+	}
+}
 // icone bg
 .has-background-transparent {
 	background-color: transparent;
@@ -141,6 +148,15 @@
 .has-background-trash {
 	background: url('/assets/icons/trash-2.svg') no-repeat 16px center;
 }
+.has-background-menu {
+	background: url('/assets/icons/menu.svg') no-repeat 16px center;
+}
+.has-background-close {
+	background: url('/assets/icons/x.svg') no-repeat 16px center;
+}
+.has-background-arrow-down-circle {
+	background: url('/assets/icons/arrow-down-circle.svg') no-repeat 16px center;
+}
 .is-block {
 	display: block;
 }
diff --git a/src/styles/partials/_responsive.scss b/src/styles/partials/_responsive.scss
index d78b3d05..6786e54b 100644
--- a/src/styles/partials/_responsive.scss
+++ b/src/styles/partials/_responsive.scss
@@ -76,7 +76,7 @@
 	}
 
 	.step {
-		padding: 120px 0;
+		padding: 120px 10px;
 	}
 	#creation_stepper {
 		.logo-home-link {
@@ -97,6 +97,7 @@
 			margin-top: 0;
 		}
 	}
+
 	.step-title-poll {
 		max-width: 18ch;
 	}