more responsive menu header

This commit is contained in:
Tykayn 2021-05-03 11:32:03 +02:00 committed by tykayn
parent 1bfe747e4c
commit bf1df96dcd
11 changed files with 94 additions and 82 deletions

View File

@ -3,53 +3,53 @@
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" routerLink="/"> <a class="navbar-item" routerLink="/">
<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" /> <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>
<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 <a
role="button" role="button"
class="navbar-burger burger" class="navbar-item burger-button-menu-custom"
aria-label="menu" aria-label="menu"
aria-expanded="false" aria-expanded="false"
data-target="navbarBasicExample" data-target="navbarBasicExample"
[ngClass]="{ 'has-background-primary': mobileMenuVisible }" [ngClass]="{ 'has-background-primary': mobileMenuVisible }"
(click)="mobileMenuVisible = !mobileMenuVisible" (click)="mobileMenuVisible = !mobileMenuVisible"
> >
<span aria-hidden="true"></span> <fa class="fa fa-bars" *ngIf="!mobileMenuVisible"></fa>
<span aria-hidden="true"></span> <fa class="fa fa-times" *ngIf="mobileMenuVisible"></fa>
<span aria-hidden="true"></span>
</a> </a>
</div> </div>
<!-- navbar items -->
<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>
<div class="mobile-menu" *ngIf="mobileMenuVisible"> <div class="mobile-menu" *ngIf="mobileMenuVisible">
<!-- menu mobile--> <!-- menu mobile-->
<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation> <app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
</div> </div>
</nav> </nav>
<div <div
*ngIf="environment.showDemoWarning" *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--> <!-- infos locales storage-->
<i class="fa fa-info"></i> <i class="fa fa-info"></i>

View File

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

View File

@ -23,8 +23,8 @@
<h1 class="title is-1 is-centered"> <h1 class="title is-1 is-centered">
{{ 'home.search_title' | translate }} {{ 'home.search_title' | translate }}
</h1> </h1>
<div class="poll-list">
<ul class="poll-list"> <ul>
<li *ngFor="let p of storageService.userPolls"> <li *ngFor="let p of storageService.userPolls">
<a <a
class="button is-fullwidth padded" class="button is-fullwidth padded"
@ -35,12 +35,20 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
<form (ngSubmit)="searchMyPolls()"> <form (ngSubmit)="searchMyPolls()">
<div class="search-others"> <div class="search-others">
<label for="search_others"> <label for="search_others">
Je cherche d'autres sondages, qui correspondent à mon mail : Je cherche d'autres sondages, qui correspondent à mon mail :
</label> </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 <button
type="submit" type="submit"
role="button" role="button"
@ -192,17 +200,17 @@
<h2 class="title">Nos Mentions légales</h2> <h2 class="title">Nos Mentions légales</h2>
<ul> <ul>
<li> <li>
<a href="/legal"> <a routerLink="/legal">
mentions légales, mentions légales,
</a> </a>
</li> </li>
<li> <li>
<a href="/cgu"> <a routerLink="/cgu">
CGU, CPU, CGU, CPU,
</a> </a>
</li> </li>
<li> <li>
<a href="/privacy"> <a routerLink="/privacy">
politique de confidentialité. politique de confidentialité.
</a> </a>
</li> </li>

View File

@ -1,6 +1,7 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { environment } from '../../../../environments/environment'; import { environment } from '../../../../environments/environment';
import { StorageService } from '../../services/storage.service'; import { StorageService } from '../../services/storage.service';
import { ApiService } from '../../services/api.service';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@ -9,7 +10,9 @@ import { StorageService } from '../../services/storage.service';
}) })
export class HomeComponent { export class HomeComponent {
public environment = environment; 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);
}
} }

View File

@ -1,28 +1,19 @@
<nav class="has-background-light padded"> <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"> <a class="navbar-item is-block" [routerLink]="['/']" routerLinkActive="active">
<i class="fa fa-home" aria-hidden="true"></i> Accueil <i class="fa fa-home" aria-hidden="true"></i> Accueil
</a> </a>
<a class="navbar-item" [routerLink]="['/#/administration']" routerLinkActive="is-primary"> <a class="navbar-item" [routerLink]="['/administration']" routerLinkActive="is-primary">
{{ 'creation.title' | translate }} {{ 'creation.title' | translate }}
</a> </a>
<div class="navbar-item has-dropdown is-hoverable is-warning" *ngIf="environment.display_routes"> <div class="navbar-item has-dropdown is-hoverable is-warning" *ngIf="environment.display_routes">
<div class="padded"> <div class="padded">
<a class="navbar-link"> Démos fixtures</a> <a class="navbar-link"> Démos fixtures</a>
<div class="navbar-dropdown"> <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> <em>
dessin-anime dessin-anime
</em> </em>

View File

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

View File

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

View File

@ -1,8 +1,8 @@
<div class="selector"> <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"> <div class="buttons has-addons">
<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label> <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 }}"> <option *ngFor="let language of availableLanguages" value="{{ language }}">
{{ language }} - {{ 'LANGUAGES.' + language | translate }} {{ language }} - {{ 'LANGUAGES.' + language | translate }}
</option> </option>

View File

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

View File

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

View File

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