Merge branch 'styling-themes' into 'develop'

Styling themes

See merge request framasoft/framadate/funky-framadate-front!39

README.md

@@ -24,14 +24,14 @@
 |                 | [uuid](https://www.npmjs.com/package/uuid)                     | handle client-side generation of uuids   |
 
 ---
-
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.1.
 # Framadate
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.1.
+A libre polling software make by contributors around the French association Framasoft.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `yarn start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 

src/app/app.component.html

@@ -1,16 +1,14 @@
 <div id="big_container" [class]="themeClass">
-	<app-header [isSidebarOpened]="isSidebarOpened" (toggleSidebarEE)="toggleSidebar($event)"></app-header>
+	<div class="container">
-
+		<app-header [isSidebarOpened]="isSidebarOpened" (toggleSidebarEE)="toggleSidebar($event)"></app-header>
-	<main>
+		<main>
-		<router-outlet></router-outlet>
+			<router-outlet></router-outlet>
-		<app-feedback></app-feedback>
+		</main>
-	</main>
+		<app-footer></app-footer>
-
+	</div>
-	<app-footer></app-footer>
 </div>
 
 <p-toast position="bottom-center"></p-toast>
-
 <p-sidebar [(visible)]="isSidebarOpened">
 	<app-navigation></app-navigation>
 </p-sidebar>

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

@@ -1,9 +1,26 @@
 <footer class="footer">
 	<div class="content has-text-centered">
 		<p>
-			<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+			Framadate - libérez vos sondages.
-			<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed
+			<i class="fa fa-copyleft"></i> Logiciel libre sous licence AGPL v3.
-			<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
+			<a href="https://framagit.org/framasoft/framadate/funky-framadate-front">
+				<i class="fa fa-gitlab"></i> Sources</a
+			>
+			|
+			<a href="https://framagit.org/framasoft/framadate/funky-framadate-front/-/wikis/home">
+				<i class="fa fa-book"></i>
+				Documentation
+			</a>
+			|
+			<a href="https://framateam.org/ux-framatrucs/channels/framadate">
+				<i class="fa fa-comment"></i>
+				canal de discussion Framateam
+			</a>
+			|
+			<a href="https://riot.im/app/#/room/#framadate:matrix.org">
+				<i class="fa fa-matrix-org"></i>
+				canal Matrix
+			</a>
 		</p>
 	</div>
 </footer>

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

@@ -1,4 +1,4 @@
-<header>
+<header class="big-header">
 	<nav class="navbar" role="navigation" aria-label="main navigation">
 		<div class="navbar-brand">
 			<a class="navbar-item">

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

@@ -0,0 +1,7 @@
+:host {
+	header {
+		.container {
+			padding: 0;
+		}
+	}
+}

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

@@ -4,15 +4,20 @@
 			<h1 class="title">
 				Bienvenue sur Framasondage
 			</h1>
-			<h2 class="subtitle">
-				Se consulter simplement pour s’organiser collectivement.
-			</h2>
 			<div class="columns">
 				<div class="column">
-					<a role="button" class="button is-fullwidth" routerLink="administration">
+					<h2 class="subtitle">
+						Se consulter simplement pour s’organiser collectivement.
+					</h2>
+					<a role="button" class="button is-fullwidth is-primary" routerLink="administration">
 						Créer un nouveau sondage
 					</a>
 				</div>
+				<div class="column">
+					<h2 class="subtitle">
+						Où sont mes sondages?
+					</h2>
+				</div>
 			</div>
 		</div>
 	</div>

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

@@ -6,7 +6,7 @@ import { Theme } from '../enums/theme.enum';
 	providedIn: 'root',
 })
 export class ThemeService {
-	private _theme: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(Theme.RED);
+	private _theme: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(Theme.LIGHT);
 	public readonly theme: Observable<Theme> = this._theme.asObservable();
 
 	public selectTheme(theme: Theme): void {

src/app/features/administration/edit-description/edit-description.component.html

@@ -1,33 +1,40 @@
-<div>
+<div [ngClass]="{ 'is-success': pollForm.status == 'VALID' }" class="info form-status pull-right debug">
 	<p>Form Status: {{ pollForm.status }}</p>
 </div>
 <br />
 <form [formGroup]="pollForm" (ngSubmit)="onSubmit()">
-	<div class="field">
+	<div class="control is-expanded">
-		<label for="primeType">Sondage concerne des dates ?</label>
+		<div class="field">
-		<p-inputSwitch id="primeType" formControlName="type"></p-inputSwitch>
+			<label for="primeType">Sondage concerne des dates ?</label>
+			<p-inputSwitch id="primeType" formControlName="type"></p-inputSwitch>
+		</div>
 	</div>
 
 	<div class="control is-expanded">
 		<label class="label" for="title">
 			Intitulé
-			<input class="input" type="text" formControlName="title" placeholder="Intitulé" />
+			<input class="input" formControlName="title" id="title" placeholder="Intitulé" type="text" />
 		</label>
 	</div>
 
 	<div class="control is-expanded">
 		<label class="label" for="description">
 			Description
-			<textarea pInputTextarea formControlName="description" placeholder="Description"></textarea>
+			<textarea
+				formControlName="description"
+				id="description"
+				pInputTextarea
+				placeholder="Description"
+			></textarea>
 		</label>
 	</div>
 
 	<div class="control is-expanded">
 		<label class="label" for="slug">
 			Url personnalisée
-			<input class="input" type="text" formControlName="slug" placeholder="Url" />
+			<input class="input" formControlName="slug" id="slug" placeholder="Url" type="text" />
 		</label>
 	</div>
 
-	<button class="button is-fullwidth" type="submit" [disabled]="!pollForm.valid">Créer</button>
+	<button class="button is-fullwidth is-primary" type="submit" [disabled]="!pollForm.valid">Créer</button>
 </form>

src/app/features/administration/poll-edit/poll-edit.component.html

@@ -29,5 +29,5 @@
 		</label>
 	</div>
 
-	<button class="button is-fullwidth" type="submit" [disabled]="!pollForm.valid">Créer</button>
+	<button class="button is-fullwidth is-primary" type="submit" [disabled]="!pollForm.valid">Créer</button>
 </form>

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

@@ -0,0 +1,5 @@
+:host {
+	.title {
+		color: #222;
+	}
+}

src/styles.scss

@@ -21,7 +21,7 @@
 // most general dom elements
 @import './styles/partials/global';
 @import './styles/partials/logo';
-// @import './styles/partials/navigation';
+ @import './styles/partials/navigation';
 
 // main content elements
 @import './styles/partials/main';

src/styles/partials/_forms.scss

@@ -1,5 +1,14 @@
 @charset "UTF-8";
 
+
+label{
+	line-height: 2.5em;
+}
+.ui-inputswitch{
+	margin-left: 1ch;
+	margin-right: 1ch;
+}
+
 .input-lg {
 	display: block;
 	width: 100%;
@@ -59,3 +68,7 @@ li {
 	display: block;
 	width: 100%;
 }
+
+button[type='submit']{
+	margin-top : 2em;
+}

src/styles/partials/_navigation.scss

@@ -18,14 +18,14 @@ nav {
 			display: none;
 		}
 
-		&.active {
+		&.active, &.is-active {
 			color: $white;
-			background: $primary;
+			background: $primary_color;
 		}
 	}
 }
-
 a {
+	color: $primary_color;
 	&,
 	&:hover {
 		text-decoration: none;
@@ -81,3 +81,10 @@ a {
 		padding-left: 1rem;
 	}
 }
+// material override
+.navbar{
+	margin-bottom: 0
+}
+a span.ui-steps-number{
+	padding: 0;
+}

src/styles/themes/_base.scss

@@ -1,14 +1,18 @@
 #big_container {
 	background: $primary;
 
-	.container {
+	main{
-		padding: 1em;
+		margin-bottom: 2em;
+		padding-bottom: 5em;
+		padding-top: 1em;
+		background: $white;
 	}
-
 	.big-header {
-		margin-bottom: 22px;
+		margin-bottom: 1em;
 
 		.container {
+			padding-bottom: 5em;
+
 			@extend .boxed-shadow;
 
 			.column:last-of-type {

src/styles/themes/_dark.scss

@@ -4,15 +4,21 @@ $theme-color-tertiary: #ccc;
 #big_container {
 	&.theme-dark-crystal {
 		background: #222;
-		color: #ddd;
+		color: $theme-color-tertiary;
 
-		.container {
+		main, .big-header, .navbar , footer{
-			padding: 1em;
-		}
-
-		main {
 			background: #444;
 		}
+		.big-header{
+			color: $white;
+			a{
+				color: $white;
+			}
+		}
+		input{
+			background: #222;
+			color: $white;
+		}
 
 		h1::after {
 			background-color: $theme-color-primary;
@@ -33,7 +39,7 @@ $theme-color-tertiary: #ccc;
 		}
 
 		select {
-			background: $theme-color-secondary;
+			background: $theme-color-tertiary;
 			border-color: $theme-color-secondary;
 
 			&:hover {
@@ -54,5 +60,31 @@ $theme-color-tertiary: #ccc;
 		.big-header {
 			margin-bottom: 22px;
 		}
+		label{
+			color: $theme-color-tertiary;
+		}
+
+		// bulma override
+		.button.is-primary, .button.btn--primary, button.is-primary, button.btn--primary, .is-primary.btn, .btn.btn--primary, .is-primary.back, .back.btn--primary{
+			background-color: $theme-color-primary !important;
+			color: $theme-color-tertiary !important;
+		}
+		.navbar-dropdown a.navbar-item{
+			color: #444;
+		}
+		// material override
+		.navbar-dropdown a.navbar-item.is-active,
+		body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number,
+		a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active{
+			color: $theme-color-primary !important;
+		}
+
+		.navbar-link:not(.is-arrowless)::after{
+			border-color: $theme-color-primary;
+		}
+
+		body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider{
+			background-color: $theme-color-primary;
+		}
 	}
 }

src/styles/themes/_light.scss

@@ -17,4 +17,16 @@
 			}
 		}
 	}
+
+	// material override
+	body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number{
+		color: $primary_color;
+	}
+	body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider{
+		background-color: $primary_color;
+	}
+	.navbar-link:not(.is-arrowless)::after{
+		border-color: $primary_color;
+	}
+
 }

src/styles/themes/_red.scss

@@ -1,17 +1,36 @@
+$theme-color-primary: #850003;
+$theme-color-secondary: #501016;
+$theme-color-tertiary: #ffbca4;
+
 #big_container {
 	&.theme-hot-covid {
-		background: #ffbca4;
+		background: $theme-color-tertiary;
-		color: #501016;
+		color: $theme-color-secondary;
 
+		main{
+			background: $white;
+		}
 		h1::after {
-			background-color: #850003;
+			background-color: $theme-color-primary;
 		}
 
 		.btn--primary:focus,
 		.btn--primary:hover,
 		.btn--primary:active,
 		.btn--primary {
-			background-color: #850003 !important;
+			background-color: $theme-color-primary !important;
 		}
+
+		// bulma override
+		.button.is-primary, .button.btn--primary, button.is-primary, button.btn--primary, .is-primary.btn, .btn.btn--primary, .is-primary.back, .back.btn--primary{
+			background-color: $theme-color-primary;
+			color: $theme-color-tertiary;
+		}
+		// material override
+		.navbar-dropdown a.navbar-item.is-active,
+		a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active{
+			color: $theme-color-primary;
+		}
+
 	}
 }