display mobile menu on stepper

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

@@ -54,7 +54,11 @@
 	<div class="step-info">
 		<div class="columns">
 			<div class="column">
-				<a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active">
+				<a
+					class="logo-home-link logo-home-link-img navbar-item pull-left"
+					routerLink="/"
+					routerLinkActive="active"
+				>
 					<img
 						class="stepper-app-logo"
 						*ngIf="environment.appLogo"
@@ -83,9 +87,10 @@
 				</h1>
 			</div>
 			<div class="column has-text-right is-narrow">
-				<span class="is-visible-smallest-screen" (click)="toggle_mobile_menu()">
-					menu burger
-				</span>
+				<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>
 				<span class="is-hidden-smallest-screen">
 					<app-language-selector class="nav-button"></app-language-selector>
 					<button
@@ -119,7 +124,7 @@
 			<div class="top">
 				<button
 					id="close_dialog"
-					class="button cancel-button-reject pull-right"
+					class="button cancel-button-reject pull-right img-marged-left"
 					(click)="focusOnCancelButton()"
 				>
 					{{ 'SENTENCES.Close' | translate }}
@@ -147,6 +152,19 @@
 		</ng-template>
 	</p-dialog>
 	<div id="mobile_menu" *ngIf="display_mobile_menu">
-		coucou le menu mobile
+		<h2 class="title is-2 has-text-primary">Menu</h2>
+		<div class="langs">
+			<app-language-selector class="nav-button" [idSuffix]="'_mobile'"></app-language-selector>
+		</div>
+		<div class="actions">
+			<button
+				class="button cancel-button-stepper is-fullwidth"
+				(click)="showCancelDialog()"
+				id="display_cancel_popup_button_mobile"
+				aria-haspopup="dialog"
+			>
+				{{ 'nav.leave' | translate }}
+			</button>
+		</div>
 	</div>
 </section>

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

@@ -14,14 +14,18 @@
 		}
 	}
 
+	.step-counter-text {
+		margin-top: -5px;
+	}
 	.title-section {
 		display: inline-block;
-		width: 40%;
+		width: 50%;
 		float: left;
 	}
 
 	.step-title-poll {
-		max-width: 40ch;
+		margin-top: 5px;
+		max-width: 45ch;
 		text-overflow: ellipsis;
 		display: inline-block !important;
 		overflow: hidden;
@@ -124,7 +128,7 @@
 	}
 
 	h2 {
-		margin-bottom: 0rem;
+		margin-bottom: 0;
 	}
 
 	.step-counter-text {
@@ -148,6 +152,11 @@
 		border-color: $primary_color;
 		color: $primary_color;
 	}
+	#mobile_menu {
+		.cancel-button-stepper {
+			padding: 1rem 2rem;
+		}
+	}
 
 	.cancel-button-confirm {
 		color: $white !important;
@@ -192,10 +201,15 @@
 .logo-home-link {
 	padding: 0;
 }
+.logo-home-link-img {
+	&:hover {
+		background: #ccc;
+	}
+}
 
 .stepper-app-logo {
-	max-width: $main-column-width-inner;
-	max-height: $main-column-width-inner;
+	max-width: $logo-side;
+	max-height: $logo-side;
 	margin: 10px 16px;
 	height: $logo-side;
 	width: $logo-side;
@@ -206,3 +220,18 @@
 	min-width: 7em; // to adapt other lang without making the nav move
 	z-index: 10;
 }
+
+.menu-button {
+	border: 0;
+	color: $primary_color;
+	img {
+		margin-left: 1ch;
+		float: right;
+	}
+}
+#mobile_menu {
+	width: 100%;
+	background: #fff;
+	padding: 0.75rem;
+	height: 100vh;
+}

src/app/shared/components/page-not-found/page-not-found.component.html

@@ -1,3 +1,4 @@
+<app-header></app-header>
 <section class="hero is-warning is-medium">
 	<div class="hero-body">
 		<div class="container">
@@ -5,3 +6,4 @@
 		</div>
 	</div>
 </section>
+<app-footer></app-footer>

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -1,5 +1,5 @@
 <div class="selector language-selector-container">
-	<button id="lang_button_popup" class="lang-button" (click)="openDialogLang()">
+	<button id="lang_button_popup{{ idSuffix }}" class="lang-button" (click)="openDialogLang()">
 		<i class="fa fa-language"></i>
 		{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
 		<!--		<i class="fa fa-language lang-selector-icon clickable" ></i>-->
@@ -17,8 +17,8 @@
 		<ng-template pTemplate="titlebar">
 			<div class="top">
 				<button
-					id="close_dialog"
-					class="button cancel-button-reject pull-right"
+					id="close_dialog{{ idSuffix }}"
+					class="button cancel-button-reject pull-right img-marged-left"
 					(click)="focusOnCancelButton()"
 				>
 					{{ 'SENTENCES.Close' | translate }}

src/app/shared/components/selectors/language-selector/language-selector.component.scss

@@ -3,11 +3,13 @@
 #lang_selector {
 	max-width: 15em;
 	width: 15em !important;
+
 	.top {
 		clear: both;
 		width: 100%;
 	}
 }
+
 #lang_button_popup {
 	background: transparent !important;
 }
@@ -15,21 +17,26 @@
 .language-selector-container {
 	cursor: pointer;
 	color: $primary-color;
+
 	&:hover {
 		color: $secondary_color;
 	}
+
 	i {
 		color: $primary-color;
 	}
 }
+
 .lang-element {
 	float: left;
 	margin: 0.5em;
 	min-width: 11em;
 }
+
 .is-current {
 	font-weight: bold;
 }
+
 .lang-button {
 	color: $secondary_color;
 	border: none;
@@ -38,3 +45,9 @@
 	line-height: 2rem;
 	height: $stepper-nav-height;
 }
+
+#lang_button_popup_mobile {
+	.lang-button {
+		width: 100% !important;
+	}
+}

src/app/shared/components/selectors/language-selector/language-selector.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 
 import { LanguageEnum } from '../../../../core/enums/language.enum';
 import { LanguageService } from '../../../../core/services/language.service';
@@ -11,6 +11,7 @@ import { DOCUMENT } from '@angular/common';
 	styleUrls: ['./language-selector.component.scss'],
 })
 export class LanguageSelectorComponent implements OnInit {
+	@Input() idSuffix: string = '';
 	public currentLang: string;
 	public availableLanguages: any = ['FR', 'EN', 'ES'];
 	language: string;

src/assets/i18n/en.json

@@ -12,6 +12,7 @@
         "search_button": "Search"
     },
     "nav": {
+				"menu": "Menu",
         "leave": "Leave",
         "previous": "Previous",
         "next": "Next",

src/assets/i18n/fr.json

@@ -12,6 +12,7 @@
         "search_button": "Rechercher"
     },
     "nav": {
+        "menu": "Menu",
         "leave": "Quitter",
         "previous": "Précédent",
 				"step": "Étape",

src/styles/libraries/_overrides.scss

@@ -41,3 +41,21 @@ $input-shadow: none;
 .round-borders {
 	border-radius: 1rem !important;
 }
+
+.img-marged-left {
+	img {
+		margin-left: 1rem;
+	}
+}
+.img-marged-right {
+	img {
+		margin-right: 1rem;
+	}
+}
+
+.button .icon:first-child:last-child,
+button .icon:first-child:last-child,
+.btn .icon:first-child:last-child {
+	margin-left: 1rem;
+	margin-right: auto;
+}

src/styles/partials/_responsive.scss

@@ -2,6 +2,16 @@
 
 // small screens
 @media (max-width: 487px) {
+	.logo-home-link-img {
+		display: inline-block;
+		margin-top: 8px;
+		width: 50px;
+		padding: 8px !important;
+	}
+	.title-section {
+		width: 60%;
+	}
+
 	.is-hidden-smallest-screen {
 		display: none;
 	}

src/styles/partials/global.scss

@@ -25,7 +25,7 @@ main {
 }
 
 .min-height {
-	margin-bottom: 1em;
+	padding-bottom: 1em;
 	min-height: 50vh;
 	overflow-x: hidden;
 }

src/styles/variables.scss

@@ -74,7 +74,7 @@ $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
 $large-column-width: 588px;
 $main-column-width: 25rem;
 $main-column-width-inner: 23.75rem;
-$logo-side: 31px;
+$logo-side: 40px;
 $mobile-size: 25rem;
 $header-nav-height: 4.85rem;
 $header-nav-inner-height: 4.5rem;