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">
<a class="navbar-item" routerLink="/">
<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 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
role="button"
class="navbar-burger burger"
class="navbar-item burger-button-menu-custom"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
(click)="mobileMenuVisible = !mobileMenuVisible"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<fa class="fa fa-bars" *ngIf="!mobileMenuVisible"></fa>
<fa class="fa fa-times" *ngIf="mobileMenuVisible"></fa>
</a>
</div>
<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>
<!-- navbar items -->
<div class="mobile-menu" *ngIf="mobileMenuVisible">
<!-- menu mobile-->
<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
</div>
</nav>
<div
*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-->
<i class="fa fa-info"></i>

View File

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

View File

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

View File

@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { environment } from '../../../../environments/environment';
import { StorageService } from '../../services/storage.service';
import { ApiService } from '../../services/api.service';
@Component({
selector: 'app-home',
@ -9,7 +10,9 @@ import { StorageService } from '../../services/storage.service';
})
export class HomeComponent {
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">
<!-- <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">
<i class="fa fa-home" aria-hidden="true"></i> Accueil
</a>
<a class="navbar-item" [routerLink]="['/#/administration']" routerLinkActive="is-primary">
<a class="navbar-item" [routerLink]="['/administration']" routerLinkActive="is-primary">
{{ 'creation.title' | translate }}
</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>
<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>
dessin-anime
</em>

View File

@ -32,6 +32,7 @@ export class ApiService {
private readonly usersPollsEndpoint = apiEndpoints.users.polls.name;
private readonly usersPollsSendEmailEndpoint = apiEndpoints.users.polls.sendEmail.name;
private baseHref: string;
private loading = false;
constructor(private http: HttpClient, private loader: LoaderService, private toastService: ToastService) {
this.baseHref = apiBaseHref;
@ -98,6 +99,7 @@ export class ApiService {
console.log('Error', error.message);
}
console.log(error.config);
this.loading = false;
}
public async createPoll(poll: Poll): Promise<Subscription> {
@ -308,8 +310,12 @@ export class ApiService {
/////////////////////
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.
try {
this.loading;
await this.axiosInstance.get<Poll[]>(
`${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 { StorageService } from './storage.service';
import { type } from 'os';
import { isString } from 'util';
@Injectable({
providedIn: 'root',

View File

@ -1,8 +1,8 @@
<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">
<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 }}">
{{ language }} - {{ 'LANGUAGES.' + language | translate }}
</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 { LanguageService } from '../../../../core/services/language.service';
import { StorageService } from '../../../../core/services/storage.service';
@Component({
selector: 'app-language-selector',
@ -12,14 +13,26 @@ export class LanguageSelectorComponent implements OnInit {
public currentLang: Language;
public availableLanguages: string[] = [];
constructor(private languageService: LanguageService) {}
constructor(private languageService: LanguageService, private storageService: StorageService) {}
ngOnInit(): void {
this.availableLanguages = this.languageService.getAvailableLanguages();
console.log('this.availableLanguages', this.availableLanguages);
this.currentLang = this.languageService.getLangage();
this.nextLang();
}
setLang(): void {
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 = {
frontDomain: 'http://tktest.lan',
production: false,
display_routes: true,
display_routes: false,
autofill: true,
showDemoWarning: true,
showDemoWarning: false,
autoSendNewPoll: false,
appTitle: 'FramaDate Funky',
appVersion: '2.1.0',

View File

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