contain mobile menu

This commit is contained in:
Tykayn 2022-02-11 12:18:20 +01:00 committed by tykayn
parent 8a39c43ead
commit 0dfdc0b4e0
2 changed files with 31 additions and 20 deletions

View File

@ -152,19 +152,31 @@
</ng-template>
</p-dialog>
<div id="mobile_menu" *ngIf="display_mobile_menu">
<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 class="menu-content">
<div class="padded">
<button
id="close_menu"
class="button cancel-button-reject pull-right img-marged-left"
(click)="focusOnCancelButton()"
>
{{ 'SENTENCES.Close' | translate }}
<img class="icon" src="assets/icons/x_blue.svg" />
</button>
<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>
</div>
</div>
</section>

View File

@ -45,7 +45,7 @@
margin: 0;
width: 100%;
position: relative;
top: 4px;
top: 0;
display: block;
min-width: 1px;
height: 4px;
@ -54,7 +54,7 @@
.step-bar-progress {
position: relative;
top: 0;
top: -4px;
left: 0;
height: 4px;
display: block;
@ -152,11 +152,6 @@
border-color: $primary_color;
color: $primary_color;
}
#mobile_menu {
.cancel-button-stepper {
padding: 1rem 2rem;
}
}
.cancel-button-confirm {
color: $white !important;
@ -230,8 +225,12 @@
}
}
#mobile_menu {
top: -4px;
width: 100%;
background: #fff;
padding: 0.75rem;
height: 100vh;
.cancel-button-stepper {
padding: 1rem 2rem;
}
}