Merge branch 'master' into skeleton

+ chat & toolbar small mobile tweaks

.npmrc

@@ -0,0 +1 @@
+save-prefix=''

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -24,9 +24,9 @@
       }
     },
     "@angular/cdk": {
-      "version": "2.0.0-beta.8",
+      "version": "2.0.0-beta.10",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.8.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.10.tgz",
-      "integrity": "sha512-OOtK+AA14cmRG9AbUgvoKC9Tooz0N37GTaRSV+xziC8GxXHgwvTu4PFSFHlBnHPipOYC/tB2oP39j3KuurEMPA==",
+      "integrity": "sha512-G0RvzxItfPy8JEdnyV/10GryE3zHehm3bUJ7U9dwYKhAzhye+MX0P6rs8VEmbClJb5SuZDr0ZZ53vbHhHsUh6A==",
       "requires": {
         "tslib": "1.7.1"
       }
@@ -129,15 +129,6 @@
         "reflect-metadata": "0.1.10"
       },
       "dependencies": {
-        "@angular/tsc-wrapped": {
-          "version": "4.3.5",
-          "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.3.5.tgz",
-          "integrity": "sha1-lf2qgTz8VyYvx+9f6nJtYorvq6w=",
-          "dev": true,
-          "requires": {
-            "tsickle": "0.21.6"
-          }
-        },
         "minimist": {
           "version": "1.2.0",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
@@ -155,9 +146,12 @@
       }
     },
     "@angular/flex-layout": {
-      "version": "2.0.0-beta.8",
+      "version": "2.0.0-beta.9",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-beta.8.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-beta.9.tgz",
-      "integrity": "sha1-uc9XhlqTyhWP5W2FCVJCPySNEDs="
+      "integrity": "sha1-PlT4mOgF0LFCbRXmE520FdBO518=",
+      "requires": {
+        "tslib": "1.7.1"
+      }
     },
     "@angular/forms": {
       "version": "4.3.5",
@@ -182,9 +176,9 @@
       "dev": true
     },
     "@angular/material": {
-      "version": "2.0.0-beta.8",
+      "version": "2.0.0-beta.10",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.8.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.10.tgz",
-      "integrity": "sha512-4+OecvjU15i+l/vXBP2qEHdlsU9taK6kBhsWKsxNLK3+TAVoV5qjc2rjOucHtTwI/oOjyBXnLJP6pl4tuLEUQw==",
+      "integrity": "sha512-KAQ2t9wenI55oXkjjT6E4VGUSVu7AZmR+ytnaP96VBFk18wxcGnVaTbQmCvVm/vkbcdeoSF09D6ic94DHAE+1A==",
       "requires": {
         "tslib": "1.7.1"
       }
@@ -213,6 +207,15 @@
         "tslib": "1.7.1"
       }
     },
+    "@angular/tsc-wrapped": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.3.5.tgz",
+      "integrity": "sha1-lf2qgTz8VyYvx+9f6nJtYorvq6w=",
+      "dev": true,
+      "requires": {
+        "tsickle": "0.21.6"
+      }
+    },
     "@ngtools/json-schema": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.1.0.tgz",
@@ -255,18 +258,18 @@
       "dev": true
     },
     "@types/jasminewd2": {
-      "version": "2.0.2",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.3.tgz",
-      "integrity": "sha1-X2jh5pe/ELxv2Mvy4Aaj1nEsW2Q=",
+      "integrity": "sha512-hYDVmQZT5VA2kigd4H4bv7vl/OhlympwREUemqBdOqtrYTo5Ytm12a5W5/nGgGYdanGVxj0x/VhZ7J3hOg/YKg==",
       "dev": true,
       "requires": {
         "@types/jasmine": "2.5.54"
       }
     },
     "@types/node": {
-      "version": "6.0.87",
+      "version": "6.0.88",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.87.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.88.tgz",
-      "integrity": "sha512-Xo0pYENOBaGtJUhi50KH6gdBNQmZQQxAwBArsJpBd15ncoz+LZD5Ev14vuezcw62CsQ1q6bM++7jA6jfwaAbfQ==",
+      "integrity": "sha512-bYDPZTX0/s1aihdjLuAgogUAT5M+TpoWChEMea2p0yOcfn5bu3k6cJb9cp6nw268XeSNIGGr+4+/8V5K6BGzLQ==",
       "dev": true
     },
     "@types/q": {
@@ -1541,26 +1544,15 @@
       "dev": true
     },
     "connect": {
-      "version": "3.6.2",
+      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.3.tgz",
-      "integrity": "sha1-aU6NIGgb/kkCgsiriGvpjwn0L+c=",
+      "integrity": "sha512-GLSZqgjVxPvGYVD/2vz//gS201MEXk4b7t3nHV6OVnTdDNWi/Gm7Rpxs/ybvljPWvULys/wrzIV3jB3YvEc3nQ==",
       "dev": true,
       "requires": {
-        "debug": "2.6.7",
+        "debug": "2.6.8",
-        "finalhandler": "1.0.3",
+        "finalhandler": "1.0.4",
         "parseurl": "1.3.1",
         "utils-merge": "1.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.7.tgz",
-          "integrity": "sha1-krrR9tBbu2u6Isyoi80OyJTChh4=",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
       }
     },
     "connect-history-api-fallback": {
@@ -3140,29 +3132,18 @@
       }
     },
     "finalhandler": {
-      "version": "1.0.3",
+      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.0.4.tgz",
-      "integrity": "sha1-70fneVDpmXgOhgIqVg4yF+DQzIk=",
+      "integrity": "sha512-16l/r8RgzlXKmFOhZpHBztvye+lAhC5SU7hXavnerC9UfZqZxxXl3BzL8MhffPT3kF61lj9Oav2LKEzh0ei7tg==",
       "dev": true,
       "requires": {
-        "debug": "2.6.7",
+        "debug": "2.6.8",
         "encodeurl": "1.0.1",
         "escape-html": "1.0.3",
         "on-finished": "2.3.0",
         "parseurl": "1.3.1",
         "statuses": "1.3.1",
         "unpipe": "1.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.7.tgz",
-          "integrity": "sha1-krrR9tBbu2u6Isyoi80OyJTChh4=",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
       }
     },
     "find-up": {
@@ -5542,9 +5523,9 @@
       }
     },
     "karma": {
-      "version": "1.7.0",
+      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-1.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-1.7.1.tgz",
-      "integrity": "sha1-b3oaQGRG+i4YfslTmGmPTO5HYmk=",
+      "integrity": "sha512-k5pBjHDhmkdaUccnC7gE3mBzZjcxyxYsYVaqiL2G5AqlfLyBO5nw2VdNK+O16cveEPd/gIOWULH7gkiYYwVNHg==",
       "dev": true,
       "requires": {
         "bluebird": "3.5.0",
@@ -5552,7 +5533,7 @@
         "chokidar": "1.7.0",
         "colors": "1.1.2",
         "combine-lists": "1.0.1",
-        "connect": "3.6.2",
+        "connect": "3.6.3",
         "core-js": "2.5.0",
         "di": "0.0.1",
         "dom-serialize": "2.2.1",
@@ -6192,6 +6173,11 @@
       "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.3.1.tgz",
       "integrity": "sha512-/Gn3XvOgaAK/ZnXA0ej9ivYm6uIvHwvZaSzx04ZUtG1Vw5RCKzw84dK0Ru9Ylnnq1xJU4WmdA63REkJb8cvYXg=="
     },
+    "ngx-cookie-service": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-1.0.7.tgz",
+      "integrity": "sha1-NdQzt3WloqgIxUl19Pr1AKzFL2g="
+    },
     "ngx-perfect-scrollbar": {
       "version": "4.5.6",
       "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-4.5.6.tgz",
@@ -7415,7 +7401,7 @@
       "integrity": "sha1-myIXQXCaTGLVzVPGqt1UpxE36V8=",
       "dev": true,
       "requires": {
-        "@types/node": "6.0.87",
+        "@types/node": "6.0.88",
         "@types/q": "0.0.32",
         "@types/selenium-webdriver": "2.53.42",
         "blocking-proxy": "0.0.5",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fuse2",
-  "version": "1.0.1",
+  "version": "1.0.4",
-  "license": "MIT",
+  "license": "",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -13,34 +13,35 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "4.3.5",
-    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/cdk": "2.0.0-beta.10",
     "@angular/common": "4.3.5",
     "@angular/compiler": "4.3.5",
     "@angular/core": "4.3.5",
-    "@angular/flex-layout": "2.0.0-beta.8",
+    "@angular/flex-layout": "2.0.0-beta.9",
     "@angular/forms": "4.3.5",
     "@angular/http": "4.3.5",
-    "@angular/material": "^2.0.0-beta.8",
+    "@angular/material": "2.0.0-beta.10",
     "@angular/platform-browser": "4.3.5",
     "@angular/platform-browser-dynamic": "4.3.5",
     "@angular/router": "4.3.5",
-    "@swimlane/ngx-charts": "^6.0.2",
+    "@swimlane/ngx-charts": "6.0.2",
-    "@swimlane/ngx-datatable": "^9.3.1",
+    "@swimlane/ngx-datatable": "9.3.1",
-    "@swimlane/ngx-dnd": "^3.0.0",
+    "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "^0.19.0",
+    "angular-calendar": "0.19.0",
-    "angular-in-memory-web-api": "^0.3.2",
+    "angular-in-memory-web-api": "0.3.2",
-    "classlist.js": "^1.1.20150312",
+    "classlist.js": "1.1.20150312",
-    "core-js": "^2.5.0",
+    "core-js": "2.5.0",
-    "d3": "^4.10.0",
+    "d3": "4.10.0",
-    "hammerjs": "^2.0.8",
+    "hammerjs": "2.0.8",
-    "highlight.js": "^9.12.0",
+    "highlight.js": "9.12.0",
-    "intl": "^1.2.5",
+    "intl": "1.2.5",
-    "moment": "^2.18.1",
+    "moment": "2.18.1",
-    "ngx-color-picker": "^4.3.1",
+    "ngx-color-picker": "4.3.1",
-    "ngx-perfect-scrollbar": "^4.5.6",
+    "ngx-cookie-service": "1.0.7",
-    "rxjs": "^5.4.3",
+    "ngx-perfect-scrollbar": "4.5.6",
-    "web-animations-js": "^2.3.1",
+    "rxjs": "5.4.3",
-    "zone.js": "^0.8.17"
+    "web-animations-js": "2.3.1",
+    "zone.js": "0.8.17"
   },
   "devDependencies": {
     "@angular/cli": "^1.3.2",
@@ -49,11 +50,11 @@
     "@ngtools/webpack": "^1.6.2",
     "@types/jasmine": "^2.5.54",
     "@types/jasminewd2": "^2.0.2",
-    "@types/node": "^6.0.87",
+    "@types/node": "^6.0.88",
     "codelyzer": "~3.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
+    "karma": "1.7.1",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",

src/app/core/components/countdown/countdown.component.scss

@@ -9,6 +9,7 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        text-align: center;
 
         .time {
             display: flex;

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -1,4 +1,5 @@
 <button md-icon-button
+        type="button"
         class="mat-elevation-z1"
         [mdMenuTriggerFor]="colorMenu"
         (onMenuOpen)="onMenuOpen()"

src/app/core/components/search-bar/search-bar.component.scss

@@ -3,11 +3,14 @@
 :host {
 
     .fuse-search-bar {
+        min-width: 64px;
         height: 64px;
         font-size: 13px;
+
         @include media-breakpoint-down('xs') {
             height: 56px;
         }
+
         .fuse-search-bar-expander,
         .fuse-search-bar-collapser {
             cursor: pointer;
@@ -16,6 +19,7 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
+
             @include media-breakpoint-down('xs') {
                 height: 56px !important;
                 line-height: 56px !important;

src/app/core/components/shortcuts/shortcuts.component.html

@@ -9,7 +9,7 @@
 
     <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
 
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
 
             <div fxLayout="row" fxLayoutAlign="start center">
 

src/app/core/components/shortcuts/shortcuts.component.ts

@@ -4,6 +4,7 @@ import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
 import { FuseMatchMedia } from '../../services/match-media.service';
 import { FuseConfigService } from '../../services/config.service';
+import { CookieService } from 'ngx-cookie-service';
 
 @Component({
     selector   : 'fuse-shortcuts',
@@ -29,7 +30,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         private observableMedia: ObservableMedia,
         private fuseMatchMedia: FuseMatchMedia,
         private fuseNavigationService: FuseNavigationService,
-        private fuseConfig: FuseConfigService
+        private fuseConfig: FuseConfigService,
+        private cookieService: CookieService
     )
     {
         this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
@@ -44,6 +46,14 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     }
 
     ngOnInit()
+    {
+        const cookieExists = this.cookieService.check('FUSE2.shortcuts');
+
+        if ( cookieExists )
+        {
+            this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts'));
+        }
+        else
         {
             // User's shortcut items
             this.shortcutItems = [
@@ -72,6 +82,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
                     'url'  : '/apps/todo'
                 }
             ];
+        }
 
         this.matchMediaSubscription =
             this.fuseMatchMedia.onMediaChange.subscribe(() => {
@@ -115,12 +126,18 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             if ( this.shortcutItems[i].url === itemToToggle.url )
             {
                 this.shortcutItems.splice(i, 1);
+
+                // Save to the cookies
+                this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
+
                 return;
             }
-
         }
 
         this.shortcutItems.push(itemToToggle);
+
+        // Save to the cookies
+        this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
     }
 
     isInShortcuts(navigationItem)

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts

@@ -33,29 +33,37 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
 
         if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
         {
+            setTimeout(() => {
                 this.isLockedOpen = true;
                 this.mdSidenav.mode = 'side';
                 this.mdSidenav.open();
+            });
         }
         else
         {
+            setTimeout(() => {
                 this.isLockedOpen = false;
                 this.mdSidenav.mode = 'over';
                 this.mdSidenav.close();
+            });
         }
 
         this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
             if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
             {
+                setTimeout(() => {
                     this.isLockedOpen = true;
                     this.mdSidenav.mode = 'side';
                     this.mdSidenav.open();
+                });
             }
             else
             {
+                setTimeout(() => {
                     this.isLockedOpen = false;
                     this.mdSidenav.mode = 'over';
                     this.mdSidenav.close();
+                });
             }
         });
 

src/app/core/fuseUtils.ts

@@ -90,4 +90,16 @@ export class FuseUtils
 
         return (S4() + S4());
     }
+
+    public static toggleInArray(item, array)
+    {
+        if ( array.indexOf(item) === -1 )
+        {
+            array.push(item);
+        }
+        else
+        {
+            array.splice(array.indexOf(item), 1);
+        }
+    }
 }

src/app/core/modules/material.module.ts

@@ -32,7 +32,7 @@ import {
     MdTableModule,
     MdTabsModule
 } from '@angular/material';
-import { CdkTableModule } from '@angular/cdk';
+import { CdkTableModule } from '@angular/cdk/table';
 
 @NgModule({
     imports: [

src/app/core/modules/shared.module.ts

@@ -20,6 +20,8 @@ import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-s
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
+import { Md2Module } from 'md2';
+import { CookieService } from 'ngx-cookie-service';
 
 @NgModule({
     declarations   : [
@@ -41,7 +43,8 @@ import { FuseMaterialColorPickerComponent } from '../components/material-color-p
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule
+        NgxDatatableModule,
+        Md2Module
     ],
     exports        : [
         FlexLayoutModule,
@@ -59,12 +62,14 @@ import { FuseMaterialColorPickerComponent } from '../components/material-color-p
         NgxDnDModule,
         NgxDatatableModule,
         FuseIfOnDomDirective,
-        FuseMaterialColorPickerComponent
+        FuseMaterialColorPickerComponent,
+        Md2Module
     ],
     entryComponents: [
         FuseConfirmDialogComponent
     ],
     providers      : [
+        CookieService,
         FuseNavigationService,
         FuseMatchMedia,
         FuseNavbarService,

src/app/core/pipes/getById.pipe.ts

@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({name: 'getById'})
+@Pipe({
+    name: 'getById',
+    pure: false
+})
 export class GetByIdPipe implements PipeTransform
 {
     transform(value: any[], id: number, property: string): any

src/app/core/scss/core.scss

@@ -28,6 +28,7 @@
 @import "partials/navigation";
 @import "partials/forms";
 @import "partials/toolbar";
+@import "partials/print";
 
 // Plugins
 @import "partials/plugins/plugins";

src/app/core/scss/partials/_colors.scss

@@ -54,7 +54,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         &.secondary-text,
         .secondary-text,
         .mat-icon,
-        .icon {
+        .icon,
+        .md2-datepicker-button {
             color: rgba(0, 0, 0, 0.54);
         }
 
@@ -79,7 +80,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     @else {
 
         .mat-icon,
-        .icon {
+        .icon,
+        .md2-datepicker-button {
             color: rgba(255, 255, 255, 1);
         }
 

src/app/core/scss/partials/_page-layouts.scss

@@ -144,7 +144,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                     &.md-stop-transition {
 
-                        ~ .mat-sidenav-content {
+                        ~ .mat-sidenav-content,
+                        ~ .mat-drawer-content {
                             transition: none;
                         }
                     }
@@ -161,7 +162,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     }
                 }
 
-                > .mat-sidenav-content {
+                > .mat-sidenav-content,
+                > .mat-drawer-content {
                     display: flex;
                     flex: 1;
                     height: auto;
@@ -229,7 +231,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                     &.md-is-locked-open {
 
-                        ~ .mat-sidenav-content {
+                        ~ .mat-sidenav-content,
+                        ~ .mat-drawer-content {
                             margin-left: 0 !important;
 
                             .center {
@@ -252,7 +255,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                     &.md-is-locked-open {
 
-                        ~ .mat-sidenav-content {
+                        ~ .mat-sidenav-content,
+                        ~ .mat-drawer-content {
                             margin-right: 0 !important;
 
                             .center {
@@ -301,7 +305,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 > md-sidenav-container {
                     flex: 1 0 auto;
 
-                    > .mat-sidenav-content {
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
                         flex: 1 0 auto;
                         max-height: none;
 
@@ -325,7 +330,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         }
                     }
 
-                    > .mat-sidenav-content {
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
                         display: flex;
                         height: auto;
 
@@ -368,7 +374,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                     &.md-stop-transition {
 
-                        ~ .mat-sidenav-content {
+                        ~ .mat-sidenav-content,
+                        ~ .mat-drawer-content {
                             transition: none;
                         }
                     }
@@ -378,7 +385,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     }
                 }
 
-                > .mat-sidenav-content {
+                > .mat-sidenav-content,
+                > .mat-drawer-content {
                     display: flex;
                     flex: 1;
                     height: auto;
@@ -472,7 +480,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 > md-sidenav-container {
                     flex: 1 0 auto !important;
 
-                    > .mat-sidenav-content {
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
                         flex: 1 0 auto;
 
                         > .center {
@@ -499,7 +508,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
 
                 > md-sidenav-container {
 
-                    > .mat-sidenav-content {
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
 
                         .center {
                             margin: 0 16px;

src/app/core/scss/partials/_print.scss

@@ -0,0 +1,51 @@
+/*----------------------------------------------------------------*/
+/*  Print
+/*----------------------------------------------------------------*/
+
+@media all {
+
+    /* Never show page break in normal view */
+    .page-break {
+        display: none;
+    }
+
+}
+
+@media print {
+
+    /* Page Styles */
+    @page {
+        //margin: 0.5cm;
+    }
+
+    /* Page break */
+    .page-break {
+        display: block;
+        break-after: always;
+        page-break-after: always;
+    }
+
+    /* General styles */
+    fuse-root {
+
+        fuse-navbar,
+        fuse-toolbar,
+        fuse-footer,
+        fuse-quick-panel,
+        fuse-theme-options,
+        .ps > .ps__scrollbar-x-rail,
+        .ps > .ps__scrollbar-y-rail {
+            display: none !important;
+        }
+
+        .ps {
+            overflow: visible !important;
+        }
+    }
+
+    /* Printable page specific styles */
+    .printable {
+        overflow: visible !important;
+        height: auto !important;
+    }
+}

src/app/core/services/config.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { NavigationStart, Router } from '@angular/router';
-import { Platform } from '@angular/cdk';
+import { Platform } from '@angular/cdk/platform';
 
 @Injectable()
 export class FuseConfigService
@@ -12,6 +12,7 @@ export class FuseConfigService
 
     /**
      * @param router
+     * @param platform
      */
     constructor(
         private router: Router,

src/app/main/content/content.component.ts

@@ -3,6 +3,8 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { Animations } from '../../core/animations';
 import { FuseConfigService } from '../../core/services/config.service';
 import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/map';
 
 @Component({
     selector   : 'fuse-content',

src/app/main/main.component.scss

@@ -23,7 +23,8 @@ fuse-main {
         display: flex;
         flex: 1;
 
-        > .mat-sidenav-content {
+        > .mat-sidenav-content,
+        > .mat-drawer-content {
             display: flex;
             flex: 1;
             overflow: hidden;
@@ -57,6 +58,7 @@ fuse-main {
                             flex: 1;
                             flex-direction: row;
                             width: 100%;
+                            overflow: hidden;
 
                             > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
                                 display: flex;

src/app/main/toolbar/toolbar.component.html

@@ -2,7 +2,7 @@
 
     <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
 
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+        <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
             <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-md>
                 <md-icon>menu</md-icon>
@@ -18,7 +18,7 @@
 
             <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
                target="_blank" md-raised-button class="ml-8 ml-sm-24 md-pink-bg" fxFlex="0 0 auto" fxLayout="row"
-               fxLayoutAlign="start center">
+               fxLayoutAlign="start center" fxHide fxShow.gt-xs>
                 <md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
                 <span fxHide fxShow.gt-xs>Purchase Fuse template (Angular4+)</span>
             </a>
@@ -62,7 +62,7 @@
 
             <div class="toolbar-separator"></div>
 
-            <button md-button
+            <button md-button fxHide fxShow.gt-xs
                     class="language-button"
                     [mdMenuTriggerFor]="languageMenu">
                 <div fxLayout="row" fxLayoutAlign="center center">

src/environments/environment.ts

@@ -4,13 +4,5 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-    production: false,
+    production: false
-    firebase  : {
-        apiKey     : 'AIzaSyDYFfhaC5QaKPgPhh8YqohjhfUpcYlg33c',
-        // authDomain       : '<your-project-authdomain>',
-        databaseURL: 'https://fuse2-demo.firebaseio.com/',
-        projectId  : 'fuse2-demo'
-        // storageBucket    : '<your-storage-bucket>',
-        // messagingSenderId: '<your-messaging-sender-id>'
-    }
 };