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

manage mobile menu, and add poll title to page title

Browse Source
This commit is contained in:
Tykayn 2021-04-29 12:49:23 +02:00 committed by tykayn
parent 3a89645e66
commit 31f0f19a9a
10 changed files with 71 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@ -1,6 +1,6 @@
<mat-sidenav-container (backdropClick)="sidenav.toggle()">
<mat-sidenav #sidenav mode="side">
<app-navigation></app-navigation>
<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
</mat-sidenav>
<mat-sidenav-content>

5
src/app/core/components/header/header.component.html
View File

@ -43,10 +43,11 @@
</div>
</div>
<div class="mobile-menu" *ngIf="mobileMenuVisible">
menu mobile
<!-- menu mobile-->
<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
</div>
</nav>
<div class="demo padded box" *ngIf="!env.production">
<div class="demo padded box" *ngIf="env.display_routes">
Environnement de développement: voici des liens de démonstration issus des fixtures Doctrine de date-poll-api.
<button class="btn is-primary" [routerLink]="['/poll/aujourdhui-ou-demain/consultation']">
consulter le sondage

6
src/app/core/components/header/header.component.ts
View File

@ -15,9 +15,9 @@ import { environment } from '../../../../environments/environment';
export class HeaderComponent implements OnInit {
public _user: Observable<Owner> = this.userService.user;
public env = environment;
@Input() public appTitle: string = 'FramaDate Funky';
@Input() public appLogo: string;
mobileMenuVisible = false;
@Input() public appTitle = environment.appTitle;
@Input() public appLogo = environment.appLogo;
mobileMenuVisible = true;
constructor(private userService: UserService) {}

88
src/app/core/components/sibebar/navigation/navigation.component.html
View File

@ -5,58 +5,66 @@
<a
class="navbar-item"
*ngFor="let poll of _pollsAvailables | async"
routerLink="{{ '/poll/' + poll.slug + '/consultation' }}"
routerLink="{{ '/poll/' + poll.custom_url + '/consultation' }}"
routerLinkActive="is-active"
>
« {{ poll.slug }} »
« {{ poll.custom_url }} »
</a>
</div>
</div>
<hr />
<div class="navbar-item has-dropdown is-hoverable is-warning" *ngIf="devModeEnabled">
<a class="navbar-link"> Modules </a>
<div class="navbar-dropdown">
<a class="navbar-item" routerLink="oldstuff" routerLinkActive="is-active">
Old stuff
</a>
<a class="navbar-item" routerLink="administration" routerLinkActive="is-active">
Administration
</a>
<a class="navbar-item" routerLink="consultation" routerLinkActive="is-active">
Consultation
</a>
<a class="navbar-item" routerLink="participation" routerLinkActive="is-active">
Participation
<div class="navbar-item has-dropdown is-hoverable is-warning" *ngIf="environment.display_routes">
<div class="padded">
<a class="navbar-link"> Modules </a>
<div class="navbar-dropdown">
<a class="navbar-item" routerLink="/#/administration" routerLinkActive="is-active">
{{ 'creation.title' | translate }}
</a>
</div>
<hr />
<a class="navbar-item" routerLink="/poll/inexistentPoll/consultation" routerLinkActive="is-active">
« tester une page 404 »
</a>
<hr />
<button
class="btn"
[routerLink]="['/poll/aujourdhui-ou-demain/consultation']"
routerLinkActive="is-primary"
>
consulter le sondage
<strong>
aujourdhui-ou-demain
</strong>
</button>
<button class="btn" [routerLink]="['/poll/citron/hash/consultation']" routerLinkActive="is-primary">
<strong>
citron
</strong>
sans pass
</button>
<button class="btn" [routerLink]="['/poll/dessin-anime/consultation']" routerLinkActive="is-primary">
<strong>
dessin-anime
</strong>
</button>
<button
class="btn"
[routerLink]="['/poll/citron/consultation/1c01ed9c94fc640a1be864f197ff808c']"
routerLinkActive="is-primary"
>
<strong>
citron
</strong>
avec son hash md5 de mot de passe intégré
</button>
</div>
<hr />
<a class="navbar-item" routerLink="/poll/inexistentPoll/consultation" routerLinkActive="is-active">
« inexistentPoll »
</a>
<hr />
<a class="button is-block" routerLink="oldstuff/step/creation" routerLinkActive="active"> Création </a>
<a class="button is-block" routerLink="oldstuff/step/date" routerLinkActive="active"> Les Dates </a>
<a class="button is-block" routerLink="oldstuff/step/answers" routerLinkActive="active"> Réponses </a>
<a class="button is-block" routerLink="oldstuff/step/visibility" routerLinkActive="active"> Visibilité </a>
<a class="button is-block" routerLink="oldstuff/step/resume" routerLinkActive="active"> Résumé </a>
<a class="button is-block" routerLink="oldstuff/step/end" routerLinkActive="active"> Confirmation </a>
<a class="button is-block" routerLink="oldstuff/step/admin"> Administration </a>
<hr />
<a class="button is-block" routerLink="oldstuff/step/kind" routerLinkActive="active"> Page démo </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/1" routerLinkActive="active"> Sondage 1 </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/2" routerLinkActive="active"> Sondage 2 </a>
<a class="button is-block" routerLink="oldstuff/vote/poll/id/3" routerLinkActive="active">
Sondage 3 (dessins animés)
</a>
<a class="button is-block" routerLink="oldstuff/graphic/toto" routerLinkActive="active"> Graphique </a>
</div>
<a class="button is-block" routerLink="oldstuff/step/home" routerLinkActive="active">
<a class="button is-block" [routerLink]="['/home']" routerLinkActive="active">
<i class="fa fa-home" aria-hidden="true"></i> Accueil
</a>
</nav>

5
src/app/core/components/sibebar/navigation/navigation.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Poll } from '../../../models/poll.model';
@ -13,6 +13,9 @@ import { environment } from '../../../../../environments/environment';
export class NavigationComponent implements OnInit {
public _pollsAvailables: Observable<Poll[]> = this.mockingService.pollsAvailables;
public devModeEnabled = !environment.production;
@Input() public appTitle = 'FramaDate Funky';
@Input() public appLogo: string;
public environment = environment;
constructor(private mockingService: MockingService) {}

4
src/app/core/services/poll.service.ts
View File

@ -13,6 +13,7 @@ import { UuidService } from './uuid.service';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { StorageService } from './storage.service';
import { Title } from '@angular/platform-browser';
@Injectable({
providedIn: 'root',
@ -28,6 +29,7 @@ export class PollService implements Resolve<Poll> {
private storageService: StorageService,
private userService: UserService,
private uuidService: UuidService,
private titleService: Title,
private toastService: ToastService
) {}
@ -74,9 +76,11 @@ export class PollService implements Resolve<Poll> {
console.log('slug', slug);
if (slug) {
const poll: Poll | undefined = await this.apiService.getPollBySlug(slug);
console.log({ loadPollBySlugResponse: poll });
if (poll) {
this.updateCurrentPoll(poll);
this.titleService.setTitle(`☑️ ${poll.title} - ${environment.appTitle}`);
} else {
this.toastService.display(`sondage ${slug} non trouvé`);
}

5
src/app/features/consultation/consultation.component.ts
View File

@ -11,6 +11,7 @@ import { StorageService } from '../../core/services/storage.service';
import { ApiService } from '../../core/services/api.service';
import { Stack } from '../../core/models/stack.model';
import { environment } from '../../../environments/environment';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-consultation',
@ -62,7 +63,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
console.log('params', params);
this.pollSlug = params.get('slug');
this.passHash = params.get('hash');
console.log('hash, slug', this.passHash, this.pollSlug);
if (this.passHash) {
this.pollService.loadPollBySlugWithPasswordHash(this.pollSlug, this.passHash);
} else {
@ -86,7 +87,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
addVoteStack() {
this.api.sendVoteStackOfPoll(this.poll, this.storageService.vote_stack).subscribe((resp) => {
console.log('resp', resp);
console.log('sendVoteStackOfPoll resp', resp);
if (resp) {
this.api.getPollBySlug(this.poll.custom_url);

2
src/app/shared/components/feedback/feedback.component.scss
View File

@ -1,6 +1,6 @@
:host {
position: fixed;
bottom: 1em;
bottom: 4em;
right: 1em;
color: white;
.feedback-choices {

3
src/environments/environment.prod.ts
View File

@ -3,7 +3,7 @@ const backendApiUrlsInDev = {
remote: 'https://framadate-api.cipherbliss.com/api/v1',
};
const apiV1 = {
baseHref: 'http://localhost:8000/api/v1',
baseHref: 'https://framadate-api.cipherbliss.com/api/v1',
api_new_poll: '/poll/',
api_get_poll: '/poll/{id}',
'api_test-mail-poll': '/api/v1/poll/mail/test-mail-poll/{emailChoice}',
@ -12,6 +12,7 @@ const apiV1 = {
export const environment = {
production: true,
display_routes: true,
autofill: true,
appTitle: 'FramaDate Funky',
appVersion: '2.1.0',

3
src/environments/environment.ts
View File

@ -18,7 +18,8 @@ const apiV1 = {
};
export const environment = {
production: false,
production: true,
display_routes: true,
autofill: true,
appTitle: 'FramaDate Funky',
appVersion: '2.1.0',