tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix scrolling on safari

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-20 15:22:58 +02:00
parent 9409cbb981
commit 458a9d0013
2 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/app.component.html
View File

@ -4,9 +4,9 @@
</button>
<h1 class="title">Travopti - Prototype</h1>
</mat-toolbar>
<mat-drawer-container class="content">
<mat-drawer #drawer [mode]="isMobile?'over':'side'" [opened]="!isMobile" class="drawer">
<div class="nav">
<mat-drawer-container autosize class="drawer">
<mat-drawer #drawer [mode]="isMobile?'over':'side'" [opened]="!isMobile">
<div class="side-nav">
<a (click)="isMobile&&drawer.close()" mat-button routerLink="home" routerLinkActive="active">
<mat-icon>home</mat-icon>
<span>Home</span>
@ -21,11 +21,11 @@
</a>
</div>
</mat-drawer>
<div class="routed-component-wrapper">
<div class="routed-component">
<mat-drawer-content class="content">
<div class="router-outlet">
<router-outlet></router-outlet>
</div>
</div>
</mat-drawer-content>
</mat-drawer-container>

48
frontend/src/app/app.component.scss
View File

@ -1,31 +1,36 @@
:host {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
flex-flow: column;
}
.toolbar {
flex: 0 0 auto;
box-sizing: border-box;
display: flex;
flex-flow: row;
align-items: center;
.menu-btn {
margin-right: 1rem;
}
.title {
flex: 1 1 auto
flex: 1 1 auto;
margin: 0;
}
}
.drawer {
padding: 1rem;
min-width: 10%;
flex: 1 1 auto;
.nav {
.side-nav {
display: flex;
flex-direction: column;
height: 100%;
min-width: 10vw;
box-sizing: border-box;
padding: 1rem 0;
a {
margin-bottom: 0.5rem;
@ -47,23 +52,26 @@
}
.content {
flex: 1 1 auto;
padding: 2rem;
box-sizing: border-box;
}
.routed-component-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
.routed-component {
flex: 0 1 auto;
box-sizing: border-box;
padding: 1rem;
.router-outlet {
width: 100%;
max-width: 700px;
height: 100%;
box-sizing: border-box;
}
}
.mat-drawer-container {
overflow-y: visible;
box-sizing: border-box;
}