feat: use route transitions

tomastrajan · Jul 24, 2017 · 224c44d · 224c44d
1 parent df94736
commit 224c44d
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 39 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -3,7 +3,7 @@
   <md-sidenav #sidenav mode="push">
     <div class="branding"><img [src]="logo"/> <span>Angular Starter</span></div>
     <md-nav-list>
-      <a md-list-item *ngFor="let item of navigation" (click)="sidenav.close()"
+      <a md-list-item *ngFor="let item of navigationSideMenu" (click)="sidenav.close()"
          [routerLink]="[item.link]" routerLinkActive="active">
         {{item.label}}
       </a>
@@ -47,7 +47,7 @@
         </button>
       </md-menu>
 
-      <button md-icon-button routerLink="settings">
+      <button md-icon-button routerLink="settings" class="hidden-sm-down">
         <md-icon>settings</md-icon>
       </button>
 
@@ -61,8 +61,9 @@
 
     </md-toolbar>
 
-    <div class="content">
-      <router-outlet></router-outlet>
+    <div class="content"
+         [@routerTransition]="o.isActivated && o.activatedRoute.routeConfig.path">
+      <router-outlet #o="outlet"></router-outlet>
     </div>
 
     <div class="footer">

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -4,6 +4,7 @@ md-sidenav-container {
   height: 100%;
 
   md-toolbar {
+    z-index: 1;
 
     .nav-button {
       margin: 0 10px 0 0;
@@ -21,6 +22,18 @@ md-sidenav-container {
     .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;
+      }
+    }
   }
 }
 
@@ -57,6 +70,7 @@ md-sidenav {
 
   .content {
     flex: 1 0 auto;
+    position: relative;
   }
 
   .footer {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,20 +1,22 @@
-import { Component, OnInit, OnDestroy, HostBinding } from '@angular/core';
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
 import { OverlayContainer } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/takeUntil';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/filter';
 
-import { selectorAuth, login, logout } from '@app/core';
+import { login, logout, selectorAuth, routerTransition } from '@app/core';
 import { environment as env } from '@env/environment';
 
 import { selectorSettings } from './settings';
 
+
 @Component({
   selector: 'anms-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  animations: [routerTransition]
 })
 export class AppComponent implements OnInit, OnDestroy {
 
@@ -28,14 +30,17 @@ export class AppComponent implements OnInit, OnDestroy {
   navigation = [
     { link: 'about', label: 'About' },
     { link: 'features', label: 'Features' },
-    { link: 'examples', label: 'Examples' },
+    { link: 'examples', label: 'Examples' }
+  ];
+  navigationSideMenu = [
+    ...this.navigation,
+    { link: 'settings', label: 'Settings' }
   ];
   isAuthenticated;
 
-  constructor(
-    public overlayContainer: OverlayContainer,
-    private store: Store<any>
-  ) {}
+  constructor(public overlayContainer: OverlayContainer,
+              private store: Store<any>) {
+  }
 
   ngOnInit(): void {
     this.store

diff --git a/src/app/static/about/about.component.html b/src/app/static/about/about.component.html
@@ -1,23 +1,37 @@
 <div class="background">
-  <div class="container">
-    <h1>Angular ngRx Material Starter</h1>
-    <div class="actions">
-      <a md-raised-button color="primary" routerLink="../features">Check Features</a>
-      <a md-raised-button color="accent" routerLink="../examples">Check Examples</a>
-      <a md-raised-button routerLink="../settings">Change Theme</a>
-      <span>or</span>
-      <a md-raised-button
-         target="_blank"
-         href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1">
-        <i class="fa fa-medium"></i> Check Blog Post
-      </a>
-    </div>
-    <div class="get-started">
-      <h2>Getting started</h2>
-      <code>git clone https://github.com/tomastrajan/angular-ngrx-material-starter.git new-project</code><br>
-      <code>cd new-project</code><br>
-      <code>npm install</code><br>
-      <code>npm start</code>
+  <div class="gradient">
+    <div class="container">
+      <h1>Angular ngRx Material Starter</h1>
+      <div class="actions">
+        <a md-raised-button color="primary" routerLink="../features"
+           class="route-enter-staggered">
+          Check Features
+        </a>
+        <a md-raised-button color="accent" routerLink="../examples"
+           class="route-enter-staggered">
+          Check Examples
+        </a>
+        <a md-raised-button routerLink="../settings"
+           class="route-enter-staggered">
+          Change Theme
+        </a>
+        <span class="route-enter-staggered">or</span>
+        <a md-raised-button
+           class="route-enter-staggered"
+           target="_blank"
+           href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1">
+          <i class="fa fa-medium"></i> Check Blog Post
+        </a>
+      </div>
+      <div class="get-started route-enter-staggered">
+        <h2>Getting started</h2>
+        <code>git clone
+          https://github.com/tomastrajan/angular-ngrx-material-starter.git
+          new-project</code><br>
+        <code>cd new-project</code><br>
+        <code>npm install</code><br>
+        <code>npm start</code>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/static/features/features.component.html b/src/app/static/features/features.component.html
@@ -5,7 +5,7 @@ <h1 class="main-heading">Features</h1>
     </div>
   </div>
   <div class="row align-items-end">
-    <div class="col-md-6 col-lg-4">
+    <div class="col-md-6 col-lg-4 route-enter-staggered">
       <md-card>
         <md-card-title><code>{{versions.angular}}</code>Angular</md-card-title>
         <md-card-subtitle>
@@ -21,7 +21,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4">
+    <div class="col-md-6 col-lg-4 route-enter-staggered">
       <md-card>
         <md-card-title><code>{{versions.material}}</code>Angular Material</md-card-title>
         <md-card-subtitle>
@@ -37,7 +37,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4">
+    <div class="col-md-6 col-lg-4 route-enter-staggered">
       <md-card>
         <md-card-title><code>{{versions.angularCli}}</code>Angular Cli</md-card-title>
         <md-card-subtitle>
@@ -53,7 +53,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4">
+    <div class="col-md-6 col-lg-4 route-enter-staggered">
       <md-card>
         <md-card-title><code>{{versions.ngrx}}</code>ngRx</md-card-title>
         <md-card-subtitle>
@@ -69,7 +69,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4">
+    <div class="col-md-6 col-lg-4 route-enter-staggered">
       <md-card>
         <md-card-title><code>{{versions.rxjs}}</code>RxJS</md-card-title>
         <md-card-subtitle>
@@ -85,7 +85,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4">
+    <div class="col-md-6 col-lg-4 route-enter-staggered">
       <md-card>
         <md-card-title><code>{{versions.bootstrap}}</code>Bootstrap</md-card-title>
         <md-card-subtitle>
@@ -101,7 +101,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4">
+    <div class="col-md-6 col-lg-4 route-enter-staggered">
       <md-card>
         <md-card-title>Themes</md-card-title>
         <md-card-subtitle>Flexible theming support for provided and custom components</md-card-subtitle>
@@ -115,7 +115,7 @@ <h1 class="main-heading">Features</h1>
         </md-card-actions>
       </md-card>
     </div>
-    <div class="col-md-6 col-lg-4">
+    <div class="col-md-6 col-lg-4 route-enter-staggered">
       <md-card>
         <md-card-title>Lazy loading</md-card-title>
         <md-card-subtitle>Faster startup time with lazy loaded feature modules</md-card-subtitle>