Merge branch 'styling-themes' into 'develop'

Styling themes

See merge request framasoft/framadate/funky-framadate-front!39
This commit is contained in:
ty kayn 2020-06-07 13:55:09 +02:00
commit e67f92e176
17 changed files with 175 additions and 49 deletions

View File

@ -24,14 +24,14 @@
| | [uuid](https://www.npmjs.com/package/uuid) | handle client-side generation of uuids | | | [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 # 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 ## 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 ## Code scaffolding

View File

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

View File

@ -1,9 +1,26 @@
<footer class="footer"> <footer class="footer">
<div class="content has-text-centered"> <div class="content has-text-centered">
<p> <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> </p>
</div> </div>
</footer> </footer>

View File

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

View File

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

View File

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

View File

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

View File

@ -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> <p>Form Status: {{ pollForm.status }}</p>
</div> </div>
<br /> <br />
<form [formGroup]="pollForm" (ngSubmit)="onSubmit()"> <form [formGroup]="pollForm" (ngSubmit)="onSubmit()">
<div class="control is-expanded">
<div class="field"> <div class="field">
<label for="primeType">Sondage concerne des dates ?</label> <label for="primeType">Sondage concerne des dates ?</label>
<p-inputSwitch id="primeType" formControlName="type"></p-inputSwitch> <p-inputSwitch id="primeType" formControlName="type"></p-inputSwitch>
</div> </div>
</div>
<div class="control is-expanded"> <div class="control is-expanded">
<label class="label" for="title"> <label class="label" for="title">
Intitulé Intitulé
<input class="input" type="text" formControlName="title" placeholder="Intitulé" /> <input class="input" formControlName="title" id="title" placeholder="Intitulé" type="text" />
</label> </label>
</div> </div>
<div class="control is-expanded"> <div class="control is-expanded">
<label class="label" for="description"> <label class="label" for="description">
Description Description
<textarea pInputTextarea formControlName="description" placeholder="Description"></textarea> <textarea
formControlName="description"
id="description"
pInputTextarea
placeholder="Description"
></textarea>
</label> </label>
</div> </div>
<div class="control is-expanded"> <div class="control is-expanded">
<label class="label" for="slug"> <label class="label" for="slug">
Url personnalisée Url personnalisée
<input class="input" type="text" formControlName="slug" placeholder="Url" /> <input class="input" formControlName="slug" id="slug" placeholder="Url" type="text" />
</label> </label>
</div> </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> </form>

View File

@ -29,5 +29,5 @@
</label> </label>
</div> </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> </form>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -4,15 +4,21 @@ $theme-color-tertiary: #ccc;
#big_container { #big_container {
&.theme-dark-crystal { &.theme-dark-crystal {
background: #222; background: #222;
color: #ddd; color: $theme-color-tertiary;
.container { main, .big-header, .navbar , footer{
padding: 1em;
}
main {
background: #444; background: #444;
} }
.big-header{
color: $white;
a{
color: $white;
}
}
input{
background: #222;
color: $white;
}
h1::after { h1::after {
background-color: $theme-color-primary; background-color: $theme-color-primary;
@ -33,7 +39,7 @@ $theme-color-tertiary: #ccc;
} }
select { select {
background: $theme-color-secondary; background: $theme-color-tertiary;
border-color: $theme-color-secondary; border-color: $theme-color-secondary;
&:hover { &:hover {
@ -54,5 +60,31 @@ $theme-color-tertiary: #ccc;
.big-header { .big-header {
margin-bottom: 22px; 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;
}
} }
} }

View File

@ -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;
}
} }

View File

@ -1,17 +1,36 @@
$theme-color-primary: #850003;
$theme-color-secondary: #501016;
$theme-color-tertiary: #ffbca4;
#big_container { #big_container {
&.theme-hot-covid { &.theme-hot-covid {
background: #ffbca4; background: $theme-color-tertiary;
color: #501016; color: $theme-color-secondary;
main{
background: $white;
}
h1::after { h1::after {
background-color: #850003; background-color: $theme-color-primary;
} }
.btn--primary:focus, .btn--primary:focus,
.btn--primary:hover, .btn--primary:hover,
.btn--primary:active, .btn--primary:active,
.btn--primary { .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;
}
} }
} }