style for homepage containers, lang selector icon, colors

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

@@ -1,7 +1,3 @@
-.app-logo {
-	max-width: 5em;
-	max-height: 5em;
-}
 .main-footer {
 	a {
 		color: #fff;

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

@@ -1,12 +1,12 @@
 <header class="big-header">
-	<div class="container">
+	<div class="stuff">
 		<nav class="navbar" role="navigation" aria-label="main navigation">
 			<div class="navbar-brand">
-				<a class="navbar-item" routerLink="/">
+				<a class="navbar-item title logo-home-link has-text-black" routerLink="/">
 					<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
-				</a>
+					<span class="app-title">
-				<a class="navbar-item title is-size-1-fullhd is-size-4-touch has-text-black" routerLink="/">
+						{{ appTitle }}
-					{{ appTitle }}
+					</span>
 					<!--					<sub>-->
 					<!--						{{ environment.appVersion }}-->
 					<!--					</sub>-->
@@ -15,6 +15,7 @@
 			<div class="navbar-start">
 				<span class="navbar-item">
 					<a
+						*ngIf="environment.display_header_create_button"
 						class="button is-primary"
 						role="button"
 						routerLink="/administration"
@@ -25,19 +26,19 @@
 							{{ 'creation.init' | translate }}
 						</div>
 					</a>
-					<a href="#">
+					<a href="#" class="navbar-item is-visible-desktop">
 						Explorer le libre
 						<i class="fa fa-chevron-down"></i>
 					</a>
-					<a href="#">
+					<a href="#" class="navbar-item is-visible-desktop">
 						Des outils éthiques
 						<i class="fa fa-chevron-down"></i>
 					</a>
-					<a href="#">
+					<a href="#" class="navbar-item is-visible-desktop">
 						Changer le monde
 						<i class="fa fa-chevron-down"></i>
 					</a>
-					<a href="#">
+					<a href="#" class="navbar-item is-visible-desktop">
 						Entraide
 						<i class="fa fa-chevron-down"></i>
 					</a>
@@ -49,10 +50,12 @@
 				<span class="navbar-item">
 					<app-language-selector></app-language-selector>
 				</span>
-				<a href="#">
+				<span class="navbar-item give-to-project">
-					Faire un don
+					<a href="#" class="button is-outlined">
-					<i class="fa fa-chevron-down"></i>
+						Faire un don
-				</a>
+						<i class="fa fa-chevron-down"></i>
+					</a>
+				</span>
 			</div>
 			<!-- navbar items -->
 			<div class="mobile-menu" *ngIf="mobileMenuVisible">

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

@@ -1,15 +1,43 @@
-:host {
+@import '../../../../styles/variables';
-	margin: 0;
+
-	.demo {
+.navbar-item {
-		margin: 1em;
+	color: $white;
+	.app-title {
+		color: $white;
 	}
-	.burger-button-menu-custom {
+	a {
-		width: 4em;
+		color: $white;
-		text-align: center;
 	}
-	.navbar-item {
+	.fa {
-		.fa {
+		margin: 0 1ch;
-			margin-right: 1ch;
+	}
-		}
+}
+.app-logo {
+	max-width: $main-column-width-inner;
+	max-height: $main-column-width-inner;
+	height: 3rem;
+	width: 3rem;
+	display: inline-block;
+}
+
+.logo-home-link {
+	margin-top: 0;
+	line-height: $header-nav-inner-height;
+	padding: 1rem !important;
+	font-size: 0.85rem;
+
+	&:hover {
+		color: $font_color;
+	}
+}
+.give-to-project {
+	.button {
+		background: transparent;
+	}
+}
+
+app-language-selector {
+	.fa {
+		color: $white;
 	}
 }

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

@@ -16,7 +16,7 @@
 							</a>
 						</div>
 						<div class="column">
-							<a role="button" class="button is-fullwidth is-secondary" routerLink="about">
+							<a role="button" class="button is-fullwidth is-secondary is-outlined" routerLink="about">
 								{{ 'config.discover' | translate }}
 							</a>
 						</div>
@@ -37,7 +37,7 @@
 				<form (ngSubmit)="searchMyPolls()">
 					<div class="search-others-box">
 						<div class="columns">
-							<div class="search-others column is-three-fifths-desktop marged-auto">
+							<div class="search-others column contained-in-main-column">
 								<h2 class="title is-2">
 									{{ 'home.search_title' | translate }}
 								</h2>
@@ -64,12 +64,12 @@
 									<i class="fa fa-envelope"></i> C'est envoyé! Vérifiez votre boite email, ainsi que
 									votre dossier de spam.
 								</div>
-								<div
+								<!--								<div-->
-									class="email_error has-background-warning padded"
+								<!--									class="email_error has-background-warning padded"-->
-									*ngIf="nonexistent_email === storageService.vote_stack.owner.email"
+								<!--									*ngIf="nonexistent_email === storageService.vote_stack.owner.email"-->
-								>
+								<!--								>-->
-									<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.
+								<!--									<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.-->
-								</div>
+								<!--								</div>-->
 								<button
 									type="submit"
 									role="button"

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

@@ -22,7 +22,6 @@
 		&.is-secondary {
 			color: $white !important;
 			background: $secondary_color !important;
-			border-color: $secondary_color !important;
 		}
 	}
 
@@ -43,24 +42,32 @@
 	.home-content {
 		.title,
 		.subtitle {
-			color: $primary_color;
-		}
-	}
-
-	.search {
-		margin-top: 2em;
-		.search-others {
-			padding: 1em;
-			background: $d-grey;
-			border-radius: 0.25em;
-		}
-		#search_email {
-			background: $white;
-		}
-		.button-submit {
-			background: $d-grey;
 			color: $secondary_color;
-			border-color: $secondary_color;
 		}
 	}
 }
+
+.search {
+	margin-top: 2em;
+	.title {
+		font-size: 1.5rem;
+	}
+	.search-others {
+		padding: 2rem;
+		background: $d-grey;
+		border-radius: 0.5rem;
+	}
+	#search_email {
+		background: $white !important;
+		margin-bottom: 0;
+	}
+	.button-submit {
+		margin-top: 1rem !important;
+		background: $d-grey;
+		color: $secondary_color;
+		border-color: $secondary_color;
+	}
+	.search-description {
+		margin: 2rem 0;
+	}
+}

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

@@ -4,15 +4,3 @@ 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/models/owner.model.ts

@@ -3,8 +3,8 @@ import { Poll } from './poll.model';
 
 export class Owner {
 	constructor(
-		public pseudo: string = 'pseudo',
+		public pseudo: string = '',
-		public email: string = '_nonexistent_contact@cipherbliss.com',
+		public email: string = '',
 		public polls: Poll[] = [],
 		public role: UserRole = UserRole.ADMIN,
 		public modifier_token: string = '',

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

@@ -58,7 +58,12 @@
 					[routerLink]="['/']"
 					routerLinkActive="active"
 				>
-					<img src="assets/img/icone_home.png" alt="accueil FramaDate" />
+					<img
+						class="app-logo logo"
+						*ngIf="environment.appLogo"
+						src="{{ environment.appLogo }}"
+						alt="accueil {{ environment.appTitle }}"
+					/>
 				</a>
 				<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
 					{{ 'creation.title' | translate }}

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

@@ -1,10 +1,9 @@
 <div class="selector">
-	<img
+	<span class="lang-button" (click)="nextLang()">
-		class="lang-selector-icon clickable"
+		{{ 'LANGUAGES.' + currentLang | translate }}
-		src="assets/img/icone-langue.svg"
+		<i class="fa fa-language lang-selector-icon clickable" title="sélection de langue"></i>
-		alt="sélection de langue"
+	</span>
-		(click)="nextLang()"
+
-	/>
 	<div class="buttons has-addons">
 		<label for="lang_selector" class="hidden"
 			>{{ 'selector.lang' | translate }} {{ 'LANGUAGES.' + language | translate }}</label

src/environments/environment.prod.ts

@@ -29,6 +29,7 @@ export const environment = {
 	creation_email_is_required: true,
 	display_menu_creation: false,
 	display_routes: false,
+	display_header_create_button: false,
 	expiresDaysDelay: 60,
 	frontDomain: productionBaseUrl,
 	interval_days_default: 7,

src/environments/environment.ts

@@ -28,6 +28,7 @@ export const environment = {
 	creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
 	creation_display_proposals_time_slices: false,
 	creation_email_is_required: true,
+	display_header_create_button: false,
 	display_menu_creation: false,
 	display_routes: false, // demo paths to test polls
 	expiresDaysDelay: 60,

src/styles/partials/_forms.scss

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

src/styles/partials/_responsive.scss

@@ -7,7 +7,7 @@
 // wide screen like desktop
 @media (min-width: $widescreen) {
 	.step {
-		padding: 2rem 0;
+		padding: 6rem 0;
 	}
 	.date-choice > input:first-of-type {
 		width: 75%;

src/styles/partials/global.scss

@@ -101,3 +101,10 @@ main {
 	width: 100%;
 	display: block;
 }
+.contained-desktop,
+.stuff {
+	display: block;
+	width: 100%;
+	max-width: $widescreen-width-main-column;
+	margin: 0 auto;
+}

src/styles/variables.scss

@@ -73,6 +73,7 @@ $main-column-width-inner: 23.75rem;
 $mobile-size: 25rem;
 $header-nav-height: 4.25rem;
 $header-nav-inner-height: 4rem;
+$widescreen-width-main-column: 75rem;
 
 // datepicker
 $cell-size: 30px;