more responsive menu header

src/app/core/components/header/header.component.html

@@ -3,53 +3,53 @@
 		<div class="navbar-brand">
 			<a class="navbar-item" routerLink="/">
 				<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
-				<span class="app-title title is-2">
-					{{ appTitle }}
-				</span>
-				<span class="dev-env button has-background-success" *ngIf="!environment.production">
-					<i>
-						(dev)
-					</i>
-				</span>
 			</a>
+			<a class="navbar-item title is-size-1-fullhd is-size-4-touch has-text-black" routerLink="/">
+				{{ appTitle }}
+			</a>
+		</div>
+		<div class="navbar-start">
+			<a
+				class="navbar-item button is-primary"
+				role="button"
+				routerLink="/administration"
+				routerLinkActive="is-active"
+			>
+				<i class="fa fa-plus-circle"></i>
+				<div class="is-hidden-touch">
+					{{ 'config.title' | translate }}
+				</div>
+			</a>
+		</div>
+		<div class="navbar-end">
+			<!-- navbar items -->
 
+			<span class="navbar-item">
+				<app-language-selector></app-language-selector>
+			</span>
 			<a
 				role="button"
-				class="navbar-burger burger"
+				class="navbar-item burger-button-menu-custom"
 				aria-label="menu"
 				aria-expanded="false"
 				data-target="navbarBasicExample"
 				[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
 				(click)="mobileMenuVisible = !mobileMenuVisible"
 			>
-				<span aria-hidden="true"></span>
-				<span aria-hidden="true"></span>
-				<span aria-hidden="true"></span>
+				<fa class="fa fa-bars" *ngIf="!mobileMenuVisible"></fa>
+				<fa class="fa fa-times" *ngIf="mobileMenuVisible"></fa>
 			</a>
 		</div>
-
-		<div id="navbarBasicExample" class="navbar-menu">
-			<div class="navbar-start">
-				<a class="navbar-item btn btn--primary" routerLink="administration" routerLinkActive="is-active">
-					<i class="fa fa-plus-circle"></i>
-					<span>
-						{{ 'config.title' | translate }}
-					</span>
-				</a>
-			</div>
-
-			<div class="navbar-end">
-				<app-language-selector></app-language-selector>
-			</div>
-		</div>
+		<!-- navbar items -->
 		<div class="mobile-menu" *ngIf="mobileMenuVisible">
 			<!--			menu mobile-->
 			<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
 		</div>
 	</nav>
+
 	<div
 		*ngIf="environment.showDemoWarning"
-		class="well debug has-text-white-bis has-background-warning-dark padded marged"
+		class="demo demo-warning well debug has-text-white-bis has-background-warning-dark padded marged"
 	>
 		<!--	infos locales storage-->
 		<i class="fa fa-info"></i>

src/app/core/components/header/header.component.scss

@@ -1,17 +1,9 @@
 :host {
-	header {
-		nav {
-			padding-right: 1em;
-			.fa {
-				margin-right: 1ch;
-			}
-		}
-		.container {
-			padding: 0;
-		}
+	.demo {
+		margin: 1em;
 	}
-	.app-logo {
-		max-width: 5em;
-		max-height: 5em;
+	.burger-button-menu-custom {
+		width: 4em;
+		text-align: center;
 	}
 }

src/app/core/components/home/home.component.html

@@ -23,24 +23,32 @@
 					<h1 class="title is-1 is-centered">
 						{{ 'home.search_title' | translate }}
 					</h1>
+					<div class="poll-list">
+						<ul>
+							<li *ngFor="let p of storageService.userPolls">
+								<a
+									class="button is-fullwidth padded"
+									[routerLink]="'poll/' + p.custom_url + '/consultation'"
+								>
+									{{ p.title }}
+									<i class="fa fa-arrow-right pull-right"></i>
+								</a>
+							</li>
+						</ul>
+					</div>
 
-					<ul class="poll-list">
-						<li *ngFor="let p of storageService.userPolls">
-							<a
-								class="button is-fullwidth padded"
-								[routerLink]="'poll/' + p.custom_url + '/consultation'"
-							>
-								{{ p.title }}
-								<i class="fa fa-arrow-right pull-right"></i>
-							</a>
-						</li>
-					</ul>
 					<form (ngSubmit)="searchMyPolls()">
 						<div class="search-others">
 							<label for="search_others">
 								Je cherche d'autres sondages, qui correspondent à mon mail :
 							</label>
-							<input type="email" id="search_others" [ngModel]="storageService.vote_stack.owner.email" />
+							<input
+								type="email"
+								name="search_email"
+								id="search_others"
+								placeholder="moi@example.com"
+								[ngModel]="storageService.vote_stack.owner.email"
+							/>
 							<button
 								type="submit"
 								role="button"
@@ -192,17 +200,17 @@
 				<h2 class="title">Nos Mentions légales</h2>
 				<ul>
 					<li>
-						<a href="/legal">
+						<a routerLink="/legal">
 							mentions légales,
 						</a>
 					</li>
 					<li>
-						<a href="/cgu">
+						<a routerLink="/cgu">
 							CGU, CPU,
 						</a>
 					</li>
 					<li>
-						<a href="/privacy">
+						<a routerLink="/privacy">
 							politique de confidentialité.
 						</a>
 					</li>

src/app/core/components/home/home.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { StorageService } from '../../services/storage.service';
+import { ApiService } from '../../services/api.service';
 
 @Component({
 	selector: 'app-home',
@@ -9,7 +10,9 @@ import { StorageService } from '../../services/storage.service';
 })
 export class HomeComponent {
 	public environment = environment;
-	constructor(public storageService: StorageService) {}
+	constructor(public storageService: StorageService, private api: ApiService) {}
 
-	searchMyPolls() {}
+	searchMyPolls() {
+		this.api.sendEmailToUserOfItsPollsList(this.storageService.vote_stack.owner.email);
+	}
 }

src/app/core/components/sibebar/navigation/navigation.component.html

@@ -1,28 +1,19 @@
 <nav class="has-background-light padded">
-	<!--	<div class='navbar-item has-dropdown is-hoverable'>-->
-	<!--		<a class='navbar-link'> Tous les sondages </a>-->
-	<!--		<div class='navbar-dropdown'>-->
-	<!--			<a-->
-	<!--				class='navbar-item'-->
-	<!--				*ngFor='let poll of _pollsAvailables | async'-->
-	<!--				routerLink="{{ '/poll/' + poll.custom_url + '/consultation' }}"-->
-	<!--				routerLinkActive='is-active'-->
-	<!--			>-->
-	<!--				« {{ poll.custom_url }} »-->
-	<!--			</a>-->
-	<!--		</div>-->
-	<!--	</div>-->
 	<a class="navbar-item is-block" [routerLink]="['/']" routerLinkActive="active">
 		<i class="fa fa-home" aria-hidden="true"></i> Accueil
 	</a>
-	<a class="navbar-item" [routerLink]="['/#/administration']" routerLinkActive="is-primary">
+	<a class="navbar-item" [routerLink]="['/administration']" routerLinkActive="is-primary">
 		{{ 'creation.title' | translate }}
 	</a>
 	<div class="navbar-item has-dropdown is-hoverable is-warning" *ngIf="environment.display_routes">
 		<div class="padded">
 			<a class="navbar-link"> Démos fixtures</a>
 			<div class="navbar-dropdown">
-				<a class="navbar-item" [routerLink]="['/poll/dessin-anime/consultation']" routerLinkActive="is-primary">
+				<a
+					class="navbar-item"
+					[routerLink]="['/poll/dessin-anime/consultation']"
+					[routerLinkActive]="'is-primary'"
+				>
 					<em>
 						dessin-anime
 					</em>

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

@@ -32,6 +32,7 @@ export class ApiService {
 	private readonly usersPollsEndpoint = apiEndpoints.users.polls.name;
 	private readonly usersPollsSendEmailEndpoint = apiEndpoints.users.polls.sendEmail.name;
 	private baseHref: string;
+	private loading = false;
 
 	constructor(private http: HttpClient, private loader: LoaderService, private toastService: ToastService) {
 		this.baseHref = apiBaseHref;
@@ -98,6 +99,7 @@ export class ApiService {
 			console.log('Error', error.message);
 		}
 		console.log(error.config);
+		this.loading = false;
 	}
 
 	public async createPoll(poll: Poll): Promise<Subscription> {
@@ -308,8 +310,12 @@ export class ApiService {
 	/////////////////////
 
 	public async sendEmailToUserOfItsPollsList(email: string): Promise<void> {
+		if (this.loading) {
+			return;
+		}
 		// If user is not authenticated: the list of polls is send to user's email by the backend.
 		try {
+			this.loading;
 			await this.axiosInstance.get<Poll[]>(
 				`${this.usersEndpoint}/${email}${this.usersPollsEndpoint}${this.usersPollsSendEmailEndpoint}`
 			);

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

@@ -3,6 +3,8 @@ import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 
 import { Language } from '../enums/language.enum';
 import { StorageService } from './storage.service';
+import { type } from 'os';
+import { isString } from 'util';
 
 @Injectable({
 	providedIn: 'root',

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

@@ -1,8 +1,8 @@
 <div class="selector">
-	<img src="assets/img/icone-langue.svg" alt="langue" />
+	<img src="assets/img/icone-langue.svg" alt="langue" (click)="nextLang()" />
 	<div class="buttons has-addons">
 		<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
-		<select class="select" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
+		<select class="select is-hidden-touch" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
 			<option *ngFor="let language of availableLanguages" value="{{ language }}">
 				{{ language }} - {{ 'LANGUAGES.' + language | translate }}
 			</option>

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

@@ -1,7 +1,8 @@
-import { Component, DoCheck, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Language } from '../../../../core/enums/language.enum';
 import { LanguageService } from '../../../../core/services/language.service';
+import { StorageService } from '../../../../core/services/storage.service';
 
 @Component({
 	selector: 'app-language-selector',
@@ -12,14 +13,26 @@ export class LanguageSelectorComponent implements OnInit {
 	public currentLang: Language;
 	public availableLanguages: string[] = [];
 
-	constructor(private languageService: LanguageService) {}
+	constructor(private languageService: LanguageService, private storageService: StorageService) {}
 
 	ngOnInit(): void {
 		this.availableLanguages = this.languageService.getAvailableLanguages();
+		console.log('this.availableLanguages', this.availableLanguages);
+
 		this.currentLang = this.languageService.getLangage();
+		this.nextLang();
 	}
 
 	setLang(): void {
 		this.languageService.setLanguage(this.currentLang);
 	}
+
+	nextLang(): void {
+		console.log('this.currentLang ', this.currentLang);
+		console.log('this.storageService.language ', this.storageService.language);
+		console.log("this.availableLanguages['FR']", this.availableLanguages['FR']);
+
+		console.log('this.availableLanguages', this.availableLanguages);
+		console.log('TODO');
+	}
 }

src/environments/environment.ts

@@ -20,9 +20,9 @@ const apiV1 = {
 export const environment = {
 	frontDomain: 'http://tktest.lan',
 	production: false,
-	display_routes: true,
+	display_routes: false,
 	autofill: true,
-	showDemoWarning: true,
+	showDemoWarning: false,
 	autoSendNewPoll: false,
 	appTitle: 'FramaDate Funky',
 	appVersion: '2.1.0',

src/styles/partials/_navigation.scss

@@ -1,8 +1,5 @@
 nav {
 	text-align: center;
-	margin-bottom: 3.2rem;
-	padding-top: 1.6rem;
-	padding-bottom: 1.6rem;
 	border-bottom: 2px solid $primary;
 
 	a {