mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
nav header
This commit is contained in:
tykayn
parent
e4fd637cb4
commit
9cf278f18b
@ -7,9 +7,9 @@
|
||||
</a>
|
||||
<a class="navbar-item title is-size-1-fullhd is-size-4-touch has-text-black" routerLink="/">
|
||||
{{ appTitle }}
|
||||
<sub>
|
||||
{{ environment.appVersion }}
|
||||
</sub>
|
||||
<!-- <sub>-->
|
||||
<!-- {{ environment.appVersion }}-->
|
||||
<!-- </sub>-->
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-start">
|
||||
@ -22,9 +22,25 @@
|
||||
>
|
||||
<i class="fa fa-plus-circle"></i>
|
||||
<div class="is-hidden-touch">
|
||||
{{ 'config.title' | translate }}
|
||||
{{ 'creation.init' | translate }}
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
Explorer le libre
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
Des outils éthiques
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
Changer le monde
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
Entraide
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
@ -33,23 +49,15 @@
|
||||
<span class="navbar-item">
|
||||
<app-language-selector></app-language-selector>
|
||||
</span>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-item burger-button-menu-custom"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbarBasicExample"
|
||||
[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
|
||||
(click)="mobileMenuVisible = !mobileMenuVisible"
|
||||
>
|
||||
<i class="fa fa-bars" *ngIf="!mobileMenuVisible"></i>
|
||||
<i class="fa fa-times" *ngIf="mobileMenuVisible"></i>
|
||||
<a href="#">
|
||||
Faire un don
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- navbar items -->
|
||||
<div class="mobile-menu" *ngIf="mobileMenuVisible">
|
||||
<!-- menu mobile-->
|
||||
<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
|
||||
<!-- <app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>-->
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="assets/img/icone_home.png" alt="calendrier icone framadate" />
|
||||
<!-- <img src="assets/img/icone_home.png" alt="calendrier icone framadate" />-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,18 @@
|
||||
<a class="navbar-item" [routerLink]="['/administration']" routerLinkActive="is-primary">
|
||||
{{ 'creation.title' | translate }}
|
||||
</a>
|
||||
<a
|
||||
role="button"
|
||||
class="navbar-item burger-button-menu-custom is-visible-mobile"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbarBasicExample"
|
||||
[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
|
||||
(click)="mobileMenuVisible = !mobileMenuVisible"
|
||||
>
|
||||
<i class="fa fa-bars" *ngIf="!mobileMenuVisible"></i>
|
||||
<i class="fa fa-times" *ngIf="mobileMenuVisible"></i>
|
||||
</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>
|
||||
|
||||
@ -1,4 +1,18 @@
|
||||
@import '../../../../../styles/variables';
|
||||
|
||||
em {
|
||||
margin-left: 1ch;
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
||||
.logo-home-link {
|
||||
margin-top: 0;
|
||||
line-height: $header-nav-inner-height;
|
||||
height: $header-nav-inner-height;
|
||||
display: inline-block;
|
||||
padding-left: 1em;
|
||||
|
||||
&:hover {
|
||||
color: $font_color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ export class NavigationComponent implements OnInit {
|
||||
@Input() public appTitle = 'FramaDate Funky';
|
||||
@Input() public appLogo: string;
|
||||
public environment = environment;
|
||||
mobileMenuVisible: boolean;
|
||||
|
||||
constructor(private mockingService: MockingService) {}
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<div
|
||||
class="button input-radio is-fullwidth"
|
||||
[ngClass]="{
|
||||
'is-selected': pollService.form.controls.isAboutDate.value !== false
|
||||
'is-selected': pollService.form.value.isAboutDate != false
|
||||
}"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(true)"
|
||||
>
|
||||
@ -27,7 +27,7 @@
|
||||
<div
|
||||
class="button input-radio is-fullwidth"
|
||||
[ngClass]="{
|
||||
'is-selected': !pollService.form.controls.isAboutDate.value !== false
|
||||
'is-selected': !pollService.form.controls.isAboutDate.value != false
|
||||
}"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(false)"
|
||||
>
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
transition: background-color ease 1.5s;
|
||||
color: $font-color;
|
||||
&.is-selected {
|
||||
background: $secondary_color;
|
||||
border: solid $primary-color 1px;
|
||||
color: $white;
|
||||
label {
|
||||
|
||||
@ -53,7 +53,11 @@
|
||||
<div class="step-info">
|
||||
<div class="columns half-columns">
|
||||
<div class="column">
|
||||
<a class="navbar-item pull-left is-hidden-mobile" [routerLink]="['/']" routerLinkActive="active">
|
||||
<a
|
||||
class="logo-home-link navbar-item pull-left is-hidden-mobile"
|
||||
[routerLink]="['/']"
|
||||
routerLinkActive="active"
|
||||
>
|
||||
<img src="assets/img/icone_home.png" alt="accueil FramaDate" />
|
||||
</a>
|
||||
<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
|
||||
@ -70,7 +74,10 @@
|
||||
<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
<a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
|
||||
<app-language-selector class="nav-button is-hidden-mobile"></app-language-selector>
|
||||
<a class="nav-button cancel-button" (click)="showCancelDialog()">
|
||||
Annuler <i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -52,12 +52,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
.nav-button {
|
||||
margin-top: 0;
|
||||
line-height: $header-nav-inner-height;
|
||||
height: $header-nav-inner-height;
|
||||
line-height: 5rem;
|
||||
height: 5rem;
|
||||
display: inline-block;
|
||||
padding-left: 1em;
|
||||
&app-language-selector {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
.cancel-button {
|
||||
line-height: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
&:hover {
|
||||
color: $font_color;
|
||||
@ -96,3 +103,8 @@
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.lang-selector-icon {
|
||||
margin-top: 0.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<div class="selector">
|
||||
<img class="clickable" src="assets/img/icone-langue.svg" alt="langue" (click)="nextLang()" />
|
||||
<img
|
||||
class="lang-selector-icon clickable"
|
||||
src="assets/img/icone-langue.svg"
|
||||
alt="sélection de langue"
|
||||
(click)="nextLang()"
|
||||
/>
|
||||
<div class="buttons has-addons">
|
||||
<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
|
||||
<select class="select is-hidden-touch" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
|
||||
<label for="lang_selector" class="hidden"
|
||||
>{{ 'selector.lang' | translate }} {{ 'LANGUAGES.' + language | translate }}</label
|
||||
>
|
||||
<select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
|
||||
<option *ngFor="let language of availableLanguages" value="{{ language }}">
|
||||
<!-- {{ language }} - -->
|
||||
{{ 'LANGUAGES.' + language | translate }}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
#lang_selector {
|
||||
background: white;
|
||||
max-width: 15em;
|
||||
width: 15em !important;
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@ import { StorageService } from '../../../../core/services/storage.service';
|
||||
export class LanguageSelectorComponent implements OnInit {
|
||||
public currentLang: Language;
|
||||
public availableLanguages: any = [];
|
||||
language: string;
|
||||
|
||||
constructor(private languageService: LanguageService, private storageService: StorageService) {}
|
||||
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"find_button": "Find my polls"
|
||||
},
|
||||
"creation": {
|
||||
"init": "Creation",
|
||||
"title": "To begin with",
|
||||
"want": "I want to create a poll",
|
||||
"advanced": "More options",
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
"find_button": "Retrouver mes sondages"
|
||||
},
|
||||
"creation": {
|
||||
"init": "Création",
|
||||
"title": "Création de sondage",
|
||||
"want": "Choisissez le type de sondage",
|
||||
"dialog": "Quitter la création de sondage?",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user