Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

more responsive menu header

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/core/components/header/header.component.html
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>

18
src/app/core/components/header/header.component.scss
View File

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

38
src/app/core/components/home/home.component.html
View File

@ -23,24 +23,32 @@
<h1 class="title is-1 is-centered">
{{ 'home.search_title' | translate }}
</h1>
<div class="poll-list">
<ul>
<li *ngFor="let p of storageService.userPolls">
<a
class="button is-fullwidth padded"
[routerLink]="'poll/' + p.custom_url + '/consultation'"
>
{{ p.title }}
<i class="fa fa-arrow-right pull-right"></i>
</a>
</li>
</ul>
</div>
<ul class="poll-list">
<li *ngFor="let p of storageService.userPolls">
<a
class="button is-fullwidth padded"
[routerLink]="'poll/' + p.custom_url + '/consultation'"
>
{{ p.title }}
<i class="fa fa-arrow-right pull-right"></i>
</a>
</li>
</ul>
<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>

7
src/app/core/components/home/home.component.ts
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);
}
}

21
src/app/core/components/sibebar/navigation/navigation.component.html
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>

6
src/app/core/services/api.service.ts
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}`
);

2
src/app/core/services/language.service.ts
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',

4
src/app/shared/components/selectors/language-selector/language-selector.component.html
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>

17
src/app/shared/components/selectors/language-selector/language-selector.component.ts
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');
}
}

4
src/environments/environment.ts
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',

3
src/styles/partials/_navigation.scss
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 {