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'; @import '../../../../styles/variables';
.big-header { .big-header {
height: $home-nav-height; 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 { .app-title {
color: $white !important; color: $white !important;

View File

@ -54,11 +54,7 @@
<div class="step-info"> <div class="step-info">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<a <a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active">
class="logo-home-link navbar-item pull-left is-hidden-mobile"
routerLink="/"
routerLinkActive="active"
>
<img <img
class="stepper-app-logo" class="stepper-app-logo"
*ngIf="environment.appLogo" *ngIf="environment.appLogo"
@ -87,6 +83,10 @@
</h1> </h1>
</div> </div>
<div class="column has-text-right is-narrow"> <div class="column has-text-right is-narrow">
<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> <app-language-selector class="nav-button"></app-language-selector>
<button <button
class="nav-button cancel-button-stepper" class="nav-button cancel-button-stepper"
@ -96,6 +96,7 @@
> >
{{ 'nav.leave' | translate }} {{ 'nav.leave' | translate }}
</button> </button>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -145,4 +146,7 @@
</div> </div>
</ng-template> </ng-template>
</p-dialog> </p-dialog>
<div id="mobile_menu" *ngIf="display_mobile_menu">
coucou le menu mobile
</div>
</section> </section>

View File

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

View File

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

View File

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

View File

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