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

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

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