nav header

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

@@ -7,9 +7,9 @@
 				</a>
 				<a class="navbar-item title is-size-1-fullhd is-size-4-touch has-text-black" routerLink="/">
 					{{ appTitle }}
-					<sub>
+					<!--					<sub>-->
-						{{ environment.appVersion }}
+					<!--						{{ environment.appVersion }}-->
-					</sub>
+					<!--					</sub>-->
 				</a>
 			</div>
 			<div class="navbar-start">
@@ -22,9 +22,25 @@
 					>
 						<i class="fa fa-plus-circle"></i>
 						<div class="is-hidden-touch">
-							{{ 'config.title' | translate }}
+							{{ 'creation.init' | translate }}
 						</div>
 					</a>
+					<a href="#">
+						Explorer le libre
+						<i class="fa fa-chevron-down"></i>
+					</a>
+					<a href="#">
+						Des outils éthiques
+						<i class="fa fa-chevron-down"></i>
+					</a>
+					<a href="#">
+						Changer le monde
+						<i class="fa fa-chevron-down"></i>
+					</a>
+					<a href="#">
+						Entraide
+						<i class="fa fa-chevron-down"></i>
+					</a>
 				</span>
 			</div>
 			<div class="navbar-end">
@@ -33,23 +49,15 @@
 				<span class="navbar-item">
 					<app-language-selector></app-language-selector>
 				</span>
-				<a
+				<a href="#">
-					role="button"
+					Faire un don
-					class="navbar-item burger-button-menu-custom"
+					<i class="fa fa-chevron-down"></i>
-					aria-label="menu"
-					aria-expanded="false"
-					data-target="navbarBasicExample"
-					[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
-					(click)="mobileMenuVisible = !mobileMenuVisible"
-				>
-					<i class="fa fa-bars" *ngIf="!mobileMenuVisible"></i>
-					<i class="fa fa-times" *ngIf="mobileMenuVisible"></i>
 				</a>
 			</div>
 			<!-- navbar items -->
 			<div class="mobile-menu" *ngIf="mobileMenuVisible">
 				<!--			menu mobile-->
-				<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
+				<!--				<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>-->
 			</div>
 		</nav>
 

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

@@ -23,7 +23,7 @@
 					</div>
 				</div>
 				<div class="column">
-					<img src="assets/img/icone_home.png" alt="calendrier icone framadate" />
+					<!--					<img src="assets/img/icone_home.png" alt="calendrier icone framadate" />-->
 				</div>
 			</div>
 		</div>

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

@@ -5,6 +5,18 @@
 	<a class="navbar-item" [routerLink]="['/administration']" routerLinkActive="is-primary">
 		{{ 'creation.title' | translate }}
 	</a>
+	<a
+		role="button"
+		class="navbar-item burger-button-menu-custom is-visible-mobile"
+		aria-label="menu"
+		aria-expanded="false"
+		data-target="navbarBasicExample"
+		[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
+		(click)="mobileMenuVisible = !mobileMenuVisible"
+	>
+		<i class="fa fa-bars" *ngIf="!mobileMenuVisible"></i>
+		<i class="fa fa-times" *ngIf="mobileMenuVisible"></i>
+	</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>

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

@@ -1,4 +1,18 @@
+@import '../../../../../styles/variables';
+
 em {
 	margin-left: 1ch;
 	margin-right: 1ch;
 }
+
+.logo-home-link {
+	margin-top: 0;
+	line-height: $header-nav-inner-height;
+	height: $header-nav-inner-height;
+	display: inline-block;
+	padding-left: 1em;
+
+	&:hover {
+		color: $font_color;
+	}
+}

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

@@ -16,6 +16,7 @@ export class NavigationComponent implements OnInit {
 	@Input() public appTitle = 'FramaDate Funky';
 	@Input() public appLogo: string;
 	public environment = environment;
+	mobileMenuVisible: boolean;
 
 	constructor(private mockingService: MockingService) {}
 

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 !== false
+								'is-selected': pollService.form.value.isAboutDate != 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 !== false
+								'is-selected': !pollService.form.controls.isAboutDate.value != false
 							}"
 							(click)="pollService.form.controls.isAboutDate.setValue(false)"
 						>

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

@@ -12,6 +12,7 @@
 		transition: background-color ease 1.5s;
 		color: $font-color;
 		&.is-selected {
+			background: $secondary_color;
 			border: solid $primary-color 1px;
 			color: $white;
 			label {

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

@@ -53,7 +53,11 @@
 	<div class="step-info">
 		<div class="columns half-columns">
 			<div class="column">
-				<a class="navbar-item pull-left is-hidden-mobile" [routerLink]="['/']" routerLinkActive="active">
+				<a
+					class="logo-home-link navbar-item pull-left is-hidden-mobile"
+					[routerLink]="['/']"
+					routerLinkActive="active"
+				>
 					<img src="assets/img/icone_home.png" alt="accueil FramaDate" />
 				</a>
 				<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
@@ -70,7 +74,10 @@
 				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
 			</div>
 			<div class="column has-text-right">
-				<a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
+				<app-language-selector class="nav-button is-hidden-mobile"></app-language-selector>
+				<a class="nav-button cancel-button" (click)="showCancelDialog()">
+					Annuler <i class="fa fa-times"></i>
+				</a>
 			</div>
 		</div>
 	</div>

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

@@ -52,12 +52,19 @@
 		}
 	}
 
-	.cancel-button {
+	.nav-button {
 		margin-top: 0;
-		line-height: $header-nav-inner-height;
+		line-height: 5rem;
-		height: $header-nav-inner-height;
+		height: 5rem;
 		display: inline-block;
 		padding-left: 1em;
+		&app-language-selector {
+			padding-top: 1rem;
+		}
+	}
+	.cancel-button {
+		line-height: 4rem;
+		height: 4rem;
 
 		&:hover {
 			color: $font_color;
@@ -96,3 +103,8 @@
 		color: white !important;
 	}
 }
+
+.lang-selector-icon {
+	margin-top: 0.5rem;
+	display: inline-block;
+}

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

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

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

@@ -1,3 +1,5 @@
 #lang_selector {
 	background: white;
+	max-width: 15em;
+	width: 15em !important;
 }

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

@@ -12,6 +12,7 @@ import { StorageService } from '../../../../core/services/storage.service';
 export class LanguageSelectorComponent implements OnInit {
 	public currentLang: Language;
 	public availableLanguages: any = [];
+	language: string;
 
 	constructor(private languageService: LanguageService, private storageService: StorageService) {}
 

src/assets/i18n/EN.json

@@ -26,6 +26,7 @@
 		"find_button": "Find my polls"
 	},
 	"creation": {
+		"init": "Creation",
 		"title": "To begin with",
 		"want": "I want to create a poll",
 		"advanced": "More options",

src/assets/i18n/FR.json

@@ -31,6 +31,7 @@
 		"find_button": "Retrouver mes sondages"
 	},
 	"creation": {
+		"init": "Création",
 		"title": "Création de sondage",
 		"want": "Choisissez le type de sondage",
 		"dialog": "Quitter la création de sondage?",