mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
display mobile menu on stepper
This commit is contained in:
tykayn
parent
cc79114c79
commit
d097d80dda
@ -54,7 +54,11 @@
|
||||
<div class="step-info">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active">
|
||||
<a
|
||||
class="logo-home-link logo-home-link-img navbar-item pull-left"
|
||||
routerLink="/"
|
||||
routerLinkActive="active"
|
||||
>
|
||||
<img
|
||||
class="stepper-app-logo"
|
||||
*ngIf="environment.appLogo"
|
||||
@ -83,9 +87,10 @@
|
||||
</h1>
|
||||
</div>
|
||||
<div class="column has-text-right is-narrow">
|
||||
<span class="is-visible-smallest-screen" (click)="toggle_mobile_menu()">
|
||||
menu burger
|
||||
</span>
|
||||
<button class="is-visible-smallest-screen pull-right menu-button" (click)="toggle_mobile_menu()">
|
||||
{{ 'nav.menu' | translate }}
|
||||
<img class="icon" aria-hidden="true" src="assets/icons/book.svg" />
|
||||
</button>
|
||||
<span class="is-hidden-smallest-screen">
|
||||
<app-language-selector class="nav-button"></app-language-selector>
|
||||
<button
|
||||
@ -119,7 +124,7 @@
|
||||
<div class="top">
|
||||
<button
|
||||
id="close_dialog"
|
||||
class="button cancel-button-reject pull-right"
|
||||
class="button cancel-button-reject pull-right img-marged-left"
|
||||
(click)="focusOnCancelButton()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }}
|
||||
@ -147,6 +152,19 @@
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
<div id="mobile_menu" *ngIf="display_mobile_menu">
|
||||
coucou le menu mobile
|
||||
<h2 class="title is-2 has-text-primary">Menu</h2>
|
||||
<div class="langs">
|
||||
<app-language-selector class="nav-button" [idSuffix]="'_mobile'"></app-language-selector>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
class="button cancel-button-stepper is-fullwidth"
|
||||
(click)="showCancelDialog()"
|
||||
id="display_cancel_popup_button_mobile"
|
||||
aria-haspopup="dialog"
|
||||
>
|
||||
{{ 'nav.leave' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -14,14 +14,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.step-counter-text {
|
||||
margin-top: -5px;
|
||||
}
|
||||
.title-section {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.step-title-poll {
|
||||
max-width: 40ch;
|
||||
margin-top: 5px;
|
||||
max-width: 45ch;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block !important;
|
||||
overflow: hidden;
|
||||
@ -124,7 +128,7 @@
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.step-counter-text {
|
||||
@ -148,6 +152,11 @@
|
||||
border-color: $primary_color;
|
||||
color: $primary_color;
|
||||
}
|
||||
#mobile_menu {
|
||||
.cancel-button-stepper {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button-confirm {
|
||||
color: $white !important;
|
||||
@ -192,10 +201,15 @@
|
||||
.logo-home-link {
|
||||
padding: 0;
|
||||
}
|
||||
.logo-home-link-img {
|
||||
&:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-app-logo {
|
||||
max-width: $main-column-width-inner;
|
||||
max-height: $main-column-width-inner;
|
||||
max-width: $logo-side;
|
||||
max-height: $logo-side;
|
||||
margin: 10px 16px;
|
||||
height: $logo-side;
|
||||
width: $logo-side;
|
||||
@ -206,3 +220,18 @@
|
||||
min-width: 7em; // to adapt other lang without making the nav move
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
border: 0;
|
||||
color: $primary_color;
|
||||
img {
|
||||
margin-left: 1ch;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
#mobile_menu {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 0.75rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<app-header></app-header>
|
||||
<section class="hero is-warning is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -5,3 +6,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<app-footer></app-footer>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="selector language-selector-container">
|
||||
<button id="lang_button_popup" class="lang-button" (click)="openDialogLang()">
|
||||
<button id="lang_button_popup{{ idSuffix }}" class="lang-button" (click)="openDialogLang()">
|
||||
<i class="fa fa-language"></i>
|
||||
{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
|
||||
<!-- <i class="fa fa-language lang-selector-icon clickable" ></i>-->
|
||||
@ -17,8 +17,8 @@
|
||||
<ng-template pTemplate="titlebar">
|
||||
<div class="top">
|
||||
<button
|
||||
id="close_dialog"
|
||||
class="button cancel-button-reject pull-right"
|
||||
id="close_dialog{{ idSuffix }}"
|
||||
class="button cancel-button-reject pull-right img-marged-left"
|
||||
(click)="focusOnCancelButton()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }}
|
||||
|
||||
@ -3,11 +3,13 @@
|
||||
#lang_selector {
|
||||
max-width: 15em;
|
||||
width: 15em !important;
|
||||
|
||||
.top {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#lang_button_popup {
|
||||
background: transparent !important;
|
||||
}
|
||||
@ -15,21 +17,26 @@
|
||||
.language-selector-container {
|
||||
cursor: pointer;
|
||||
color: $primary-color;
|
||||
|
||||
&:hover {
|
||||
color: $secondary_color;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.lang-element {
|
||||
float: left;
|
||||
margin: 0.5em;
|
||||
min-width: 11em;
|
||||
}
|
||||
|
||||
.is-current {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lang-button {
|
||||
color: $secondary_color;
|
||||
border: none;
|
||||
@ -38,3 +45,9 @@
|
||||
line-height: 2rem;
|
||||
height: $stepper-nav-height;
|
||||
}
|
||||
|
||||
#lang_button_popup_mobile {
|
||||
.lang-button {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { Component, Inject, Input, OnInit } from '@angular/core';
|
||||
|
||||
import { LanguageEnum } from '../../../../core/enums/language.enum';
|
||||
import { LanguageService } from '../../../../core/services/language.service';
|
||||
@ -11,6 +11,7 @@ import { DOCUMENT } from '@angular/common';
|
||||
styleUrls: ['./language-selector.component.scss'],
|
||||
})
|
||||
export class LanguageSelectorComponent implements OnInit {
|
||||
@Input() idSuffix: string = '';
|
||||
public currentLang: string;
|
||||
public availableLanguages: any = ['FR', 'EN', 'ES'];
|
||||
language: string;
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"search_button": "Search"
|
||||
},
|
||||
"nav": {
|
||||
"menu": "Menu",
|
||||
"leave": "Leave",
|
||||
"previous": "Previous",
|
||||
"next": "Next",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"search_button": "Rechercher"
|
||||
},
|
||||
"nav": {
|
||||
"menu": "Menu",
|
||||
"leave": "Quitter",
|
||||
"previous": "Précédent",
|
||||
"step": "Étape",
|
||||
|
||||
@ -41,3 +41,21 @@ $input-shadow: none;
|
||||
.round-borders {
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
.img-marged-left {
|
||||
img {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
.img-marged-right {
|
||||
img {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button .icon:first-child:last-child,
|
||||
button .icon:first-child:last-child,
|
||||
.btn .icon:first-child:last-child {
|
||||
margin-left: 1rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@ -2,6 +2,16 @@
|
||||
|
||||
// small screens
|
||||
@media (max-width: 487px) {
|
||||
.logo-home-link-img {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
width: 50px;
|
||||
padding: 8px !important;
|
||||
}
|
||||
.title-section {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.is-hidden-smallest-screen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@ main {
|
||||
}
|
||||
|
||||
.min-height {
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
min-height: 50vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@ -74,7 +74,7 @@ $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
|
||||
$large-column-width: 588px;
|
||||
$main-column-width: 25rem;
|
||||
$main-column-width-inner: 23.75rem;
|
||||
$logo-side: 31px;
|
||||
$logo-side: 40px;
|
||||
$mobile-size: 25rem;
|
||||
$header-nav-height: 4.85rem;
|
||||
$header-nav-inner-height: 4.5rem;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user