Skip to content

Commit

Permalink
fix(app): rework main layout to prevent scrollbar issues, closes #221, …
Browse files Browse the repository at this point in the history 
…closes #240
  • Loading branch information
@tomastrajan
tomastrajan committed Jun 9, 2018
1 parent 6cfec6e commit 0d08ade
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 110 deletions.
86 changes: 43 additions & 43 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,61 +15,61 @@
</mat-nav-list>
</mat-sidenav>

<div class="wrapper">

<div class="toolbar">
<mat-toolbar color="primary">
<button mat-icon-button class="d-md-none" (click)="sidenav.open()">
<mat-icon fontSet="fas" fontIcon="fa-bars"></mat-icon>
</button>
<div class="toolbar">
<mat-toolbar color="primary">
<button mat-icon-button class="d-md-none" (click)="sidenav.open()">
<mat-icon fontSet="fas" fontIcon="fa-bars"></mat-icon>
</button>

<span routerLink="" class="branding spacer center d-inline d-sm-none">
<span routerLink="" class="branding spacer center d-inline d-sm-none">
<img [src]="logo"/></span>
<span routerLink=""
class="branding spacer center d-none d-sm-inline d-md-none"><img
[src]="logo"/> Angular Starter</span>
<span routerLink="" class="branding spacer d-none d-md-inline"><img
[src]="logo"/> Angular NgRx Material Starter</span>
<span routerLink=""
class="branding spacer center d-none d-sm-inline d-md-none"><img
[src]="logo"/> Angular Starter</span>
<span routerLink="" class="branding spacer d-none d-md-inline"><img
[src]="logo"/> Angular NgRx Material Starter</span>

<span class="d-none d-md-inline">
<span class="d-none d-md-inline">
<button mat-button class="nav-button" *ngFor="let item of navigation"
[routerLink]="[item.link]" routerLinkActive="active">
[routerLink]="[item.link]" routerLinkActive="active">
{{item.label}}
</button>
</span>

<button mat-button class="sign-in-button "
*ngIf="!isAuthenticated"
(click)="onLoginClick()">
Sign in
</button>
<button mat-button class="sign-in-button "
*ngIf="!isAuthenticated"
(click)="onLoginClick()">
Sign in
</button>

<button *ngIf="isAuthenticated"
mat-icon-button
[matMenuTriggerFor]="toolbarUserMenu">
<mat-icon fontSet="fas" fontIcon="fa-user-circle"></mat-icon>
<button *ngIf="isAuthenticated"
mat-icon-button
[matMenuTriggerFor]="toolbarUserMenu">
<mat-icon fontSet="fas" fontIcon="fa-user-circle"></mat-icon>
</button>
<mat-menu #toolbarUserMenu="matMenu">
<button mat-menu-item (click)="onLogoutClick()">
<mat-icon fontSet="fas" fontIcon="fa-power-off"></mat-icon>
<span>Logout</span>
</button>
<mat-menu #toolbarUserMenu="matMenu">
<button mat-menu-item (click)="onLogoutClick()">
<mat-icon fontSet="fas" fontIcon="fa-power-off"></mat-icon>
<span>Logout</span>
</button>
</mat-menu>
</mat-menu>

<button mat-icon-button routerLink="settings" class="d-none d-sm-inline">
<mat-icon fontSet="fas" fontIcon="fa-cog"></mat-icon>
</button>
<button mat-icon-button routerLink="settings" class="d-none d-sm-inline">
<mat-icon fontSet="fas" fontIcon="fa-cog"></mat-icon>
</button>

<a matTooltip="Project Github Repository"
matdTooltipPosition="before"
mat-icon-button
class="link d-none d-sm-inline"
href="https://github.com/tomastrajan/angular-ngrx-material-starter"
target="_blank">
<mat-icon fontSet="fab" fontIcon="fa-github"></mat-icon>
</a>
</mat-toolbar>
</div>
<a matTooltip="Project Github Repository"
matdTooltipPosition="before"
mat-icon-button
class="link d-none d-sm-inline"
href="https://github.com/tomastrajan/angular-ngrx-material-starter"
target="_blank">
<mat-icon fontSet="fab" fontIcon="fa-github"></mat-icon>
</a>
</mat-toolbar>
</div>

<div class="wrapper">

<div class="content"
[@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
Expand Down
115 changes: 54 additions & 61 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,80 @@
@import '../styles-variables';

:host {
height: 100%;
width: 100%;
}

mat-sidenav-container {
height: 100%;
width: 100%;

.wrapper {
z-index: -2;
height: 100%;
.toolbar {
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow-y: auto;
overflow-x: hidden;

.toolbar {
position: fixed;
width: 100%;
z-index: 1;
flex: 0 0 auto;
.nav-button {
margin: 0 10px 0 0;
}

.nav-button {
margin: 0 10px 0 0;
mat-icon {
font-size: 24px;
}

.branding {
cursor: pointer;
padding-top: 4px;

&.center {
text-align: center;
}

mat-icon {
font-size: 24px;
img {
position: relative;
top: -2px;
width: 48px;
height: 48px;
}
}

.branding {
cursor: pointer;
padding-top: 4px;
.sign-in-button {
line-height: 35px;
margin-right: 10px;
}

&.center {
text-align: center;
}
.spacer {
flex: 1 1 auto;
}

img {
position: relative;
top: -2px;
width: 48px;
height: 48px;
}
@media (max-width: map-get($grid-breakpoints, lg)) {
.nav-button {
min-width: 0;
padding: 0 10px;
}

.sign-in-button {
line-height: 35px;
margin-right: 10px;
}

.spacer {
flex: 1 1 auto;
}

@media (max-width: map-get($grid-breakpoints, lg)) {
.nav-button {
min-width: 0;
padding: 0 10px;
}
.sign-in-button {
min-width: 0;
padding: 0 10px;
margin: 0 5px 0 0;
}
min-width: 0;
padding: 0 10px;
margin: 0 5px 0 0;
}
}
}

.wrapper {
position: absolute;
top: 64px;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;

.content {
padding-top: 64px;
flex: 1 0 auto;
position: relative;
}

@media (max-width: map-get($grid-breakpoints, sm)) {
.content {
padding-top: 56px;
}
flex: 1 0 auto;
}

.footer {
flex: 0 0 auto;
padding: 0 15px;
text-align: center;
z-index: 1;

.row {
padding: 10px 0;
Expand Down Expand Up @@ -155,6 +142,12 @@ mat-sidenav-container {
}
}
}

@media (max-width: map-get($grid-breakpoints, sm)) {
.wrapper {
top: 56px;
}
}
}

mat-sidenav {
Expand Down
6 changes: 0 additions & 6 deletions src/styles-reset.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,6 @@ label {
margin-bottom: 0;
}

html,
body {
height: 100%;
width: 100%;
}

code {
white-space: nowrap;
border-radius: 10px;
Expand Down

0 comments on commit 0d08ade

Please sign in to comment.