Skip to content

Commit

Permalink
fix(styles): sticky footer animation flicker (IE11), fixes #39
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomastrajan
tomastrajan committed Jan 21, 2018
1 parent 03292f7 commit 9209ca2
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 131 deletions.
86 changes: 44 additions & 42 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,56 +12,58 @@

<div class="wrapper">

<mat-toolbar color="primary">
<button mat-icon-button class="d-md-none" (click)="sidenav.open()">
<mat-icon>menu</mat-icon>
</button>
<div class="toolbar">
<mat-toolbar color="primary">
<button mat-icon-button class="d-md-none" (click)="sidenav.open()">
<mat-icon>menu</mat-icon>
</button>

<span routerLink="" class="branding spacer d-inline d-sm-none text-center"><img
[src]="logo"/></span>
<span routerLink="" class="branding spacer d-none d-sm-inline d-md-none text-center"><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 d-inline d-sm-none text-center"><img
[src]="logo"/></span>
<span routerLink="" class="branding spacer d-none d-sm-inline d-md-none text-center"><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">
<button mat-button class="nav-button" *ngFor="let item of navigation"
[routerLink]="[item.link]" routerLinkActive="active">
{{item.label}}
</button>
</span>
<span class="d-none d-md-inline">
<button mat-button class="nav-button" *ngFor="let item of navigation"
[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>person</mat-icon>
</button>
<mat-menu #toolbarUserMenu="matMenu">
<button mat-menu-item (click)="onLogoutClick()">
<mat-icon>power_settings_new</mat-icon>
<span>Logout</span>
<button *ngIf="isAuthenticated"
mat-icon-button
[matMenuTriggerFor]="toolbarUserMenu">
<mat-icon>person</mat-icon>
</button>
</mat-menu>
<mat-menu #toolbarUserMenu="matMenu">
<button mat-menu-item (click)="onLogoutClick()">
<mat-icon>power_settings_new</mat-icon>
<span>Logout</span>
</button>
</mat-menu>

<button mat-icon-button routerLink="settings" class="d-none d-sm-inline">
<mat-icon>settings</mat-icon>
</button>
<button mat-icon-button routerLink="settings" class="d-none d-sm-inline">
<mat-icon>settings</mat-icon>
</button>

<a matTooltip="Project Github Repository"
matdTooltipPosition="before"
mat-icon-button class="link"
href="https://github.com/tomastrajan/angular-ngrx-material-starter"
target="_blank">
<i class="fa fa-github fa-2x"></i>
</a>
<a matTooltip="Project Github Repository"
matdTooltipPosition="before"
mat-icon-button class="link"
href="https://github.com/tomastrajan/angular-ngrx-material-starter"
target="_blank">
<i class="fa fa-github fa-2x"></i>
</a>

</mat-toolbar>
</mat-toolbar>
</div>

<div class="content"
[@routerTransition]="o.isActivated && o.activatedRoute.routeConfig.path">
Expand Down
186 changes: 97 additions & 89 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,112 @@
@import 'styles-variables';

:host {
height: 100%;
}

mat-sidenav-container {
height: 100%;

mat-toolbar {
z-index: 1;
.wrapper {
z-index: -2;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow-y: auto;

.nav-button {
margin: 0 10px 0 0;
}
.toolbar {
z-index: 1;
flex: 0 0 auto;

.branding {
cursor: pointer;
}
.nav-button {
margin: 0 10px 0 0;
}

.branding {
cursor: pointer;
}

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

.spacer {
flex: 1 1 auto;
}

.sign-in-button {
line-height: 35px;
margin-right: 10px;
@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;
}
}
}

.spacer {
flex: 1 1 auto;
.content {
flex: 1 0 auto;
position: relative;
}

@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;
.footer {
flex: 0 0 auto;
padding: 0 15px;
text-align: center;
z-index: 1;

.row {
padding: 10px 0;

.links {
a {
transition: padding 0.5s;
display: inline-block;
padding: 20px 5px;

&:hover {
text-decoration: none;
}

span {
display: inline-block;
width: 70px;
padding: 0 0 0 5px;
overflow: hidden;
text-align: left;
white-space: nowrap;
transition: width 0.5s;
}
}

@media (max-width: map-get($grid-breakpoints, md)) {
a {
padding: 20px;

span {
width: 0;
padding: 0;
}
}
}

@media (max-width: map-get($grid-breakpoints, sm)) {
a {
padding: 20px 5px;
}
}
}

.signature {
a {
float: right;
}
}
}
}
}
Expand Down Expand Up @@ -60,70 +135,3 @@ mat-sidenav {
padding-top: 0;
}
}

.wrapper {
z-index: -2;
min-height: 100%;
display: flex;
flex-direction: column;

.content {
flex: 1 0 auto;
position: relative;
}

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

.row {
padding: 10px 0;

.links {
a {
transition: padding 0.5s;
display: inline-block;
padding: 20px 5px;

&:hover {
text-decoration: none;
}

span {
display: inline-block;
width: 70px;
padding: 0 0 0 5px;
overflow: hidden;
text-align: left;
white-space: nowrap;
transition: width 0.5s;
}
}

@media (max-width: map-get($grid-breakpoints, md)) {
a {
padding: 20px;

span {
width: 0;
padding: 0;
}
}
}

@media (max-width: map-get($grid-breakpoints, sm)) {
a {
padding: 20px 5px;
}
}
}

.signature {
a {
float: right;
}
}
}
}
}

0 comments on commit 9209ca2

Please sign in to comment.