smaller height of nav

This commit is contained in:
Tykayn 2022-02-11 10:59:02 +01:00 committed by tykayn
parent 0fde16e14f
commit cc79114c79
6 changed files with 56 additions and 19 deletions

View File

@ -1,6 +1,12 @@
@import '../../../../styles/variables';
.big-header {
height: $home-nav-height;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
position: fixed;
top: 0;
width: 100%;
background: $white;
z-index: 2;
}
.app-title {
color: $white !important;

View File

@ -54,11 +54,7 @@
<div class="step-info">
<div class="columns">
<div class="column">
<a
class="logo-home-link navbar-item pull-left is-hidden-mobile"
routerLink="/"
routerLinkActive="active"
>
<a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active">
<img
class="stepper-app-logo"
*ngIf="environment.appLogo"
@ -87,15 +83,20 @@
</h1>
</div>
<div class="column has-text-right is-narrow">
<app-language-selector class="nav-button"></app-language-selector>
<button
class="nav-button cancel-button-stepper"
(click)="showCancelDialog()"
id="display_cancel_popup_button"
aria-haspopup="dialog"
>
{{ 'nav.leave' | translate }}
</button>
<span class="is-visible-smallest-screen" (click)="toggle_mobile_menu()">
menu burger
</span>
<span class="is-hidden-smallest-screen">
<app-language-selector class="nav-button"></app-language-selector>
<button
class="nav-button cancel-button-stepper"
(click)="showCancelDialog()"
id="display_cancel_popup_button"
aria-haspopup="dialog"
>
{{ 'nav.leave' | translate }}
</button>
</span>
</div>
</div>
</div>
@ -145,4 +146,7 @@
</div>
</ng-template>
</p-dialog>
<div id="mobile_menu" *ngIf="display_mobile_menu">
coucou le menu mobile
</div>
</section>

View File

@ -19,6 +19,7 @@ export class StepperComponent {
public step_max: number = 5;
public environment = environment;
display_cancel_dialog: boolean = false;
display_mobile_menu: boolean = false;
constructor(
public pollService: PollService,
@ -52,4 +53,8 @@ export class StepperComponent {
this.display_cancel_dialog = false;
this.router.navigate(['/']);
}
toggle_mobile_menu() {
this.display_mobile_menu = !this.display_mobile_menu;
}
}

View File

@ -1,7 +1,6 @@
@import './../../../../../styles/variables';
#lang_selector {
background: white;
max-width: 15em;
width: 15em !important;
.top {
@ -9,6 +8,9 @@
width: 100%;
}
}
#lang_button_popup {
background: transparent !important;
}
.language-selector-container {
cursor: pointer;
@ -34,5 +36,5 @@
padding: 0 1rem;
display: block;
line-height: 2rem;
height: 4rem;
height: $stepper-nav-height;
}

View File

@ -2,6 +2,12 @@
// small screens
@media (max-width: 487px) {
.is-hidden-smallest-screen {
display: none;
}
.is-visible-smallest-screen {
display: block;
}
.big-header {
height: $home-nav-height-small;
}
@ -16,6 +22,14 @@
}
}
#creation_stepper {
.logo-home-link {
padding: 0;
margin: 0;
img {
padding: 0;
margin: 0;
}
}
.step-info {
height: 4.5rem;
}
@ -30,7 +44,13 @@
max-width: 18ch;
}
}
@media (min-width: 380px) {
@media (min-width: 488px) {
.is-hidden-smallest-screen {
display: block;
}
.is-visible-smallest-screen {
display: none;
}
.feedback-container {
//position: fixed;
}

View File

@ -79,8 +79,8 @@ $mobile-size: 25rem;
$header-nav-height: 4.85rem;
$header-nav-inner-height: 4.5rem;
$widescreen-width-main-column: 75rem;
$stepper-nav-height: 4.5rem;
$home-nav-height: 4.5rem;
$stepper-nav-height: 56px;
$home-nav-height: 56px;
$home-nav-height-small: 3.5rem;
// datepicker
$cell-size: 30px;