Removed fxFlexFill from main-content in an attempt to fix iOS scrolling and sizing issues

+ Updated Perfect scrollbar
+ updated various packages like zone-js & core-js
+ small tweak on contacts list item padding
+ removed md2 datepicker color tweak

package.json

@@ -30,23 +30,22 @@
     "@swimlane/ngx-charts": "6.0.2",
     "@swimlane/ngx-datatable": "9.3.1",
     "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "0.19.0",
+    "angular-calendar": "0.21.2",
     "angular-in-memory-web-api": "0.4.6",
     "angular2-markdown": "1.6.0",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.0",
+    "core-js": "2.5.1",
     "d3": "4.10.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
-    "moment": "2.18.1",
-    "ngx-color-picker": "4.3.1",
-    "ngx-cookie-service": "1.0.7",
-    "ngx-perfect-scrollbar": "4.6.2",
-    "perfect-scrollbar": "0.8.1",
+    "moment": "2.19.1",
+    "ngx-color-picker": "4.4.0",
+    "ngx-cookie-service": "1.0.9",
+    "perfect-scrollbar": "1.0.3",
     "rxjs": "5.4.3",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.17"
+    "zone.js": "0.8.18"
   },
   "devDependencies": {
     "@angular/cli": "1.4.2",

src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
-import * as Ps from 'perfect-scrollbar';
+import PerfectScrollbar from 'perfect-scrollbar';
 import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Platform } from '@angular/cdk/platform';
@@ -13,6 +13,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
+    ps;
 
     constructor(
         private element: ElementRef,
@@ -51,7 +52,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         this.zone.runOutsideAngular(() => {
 
             // Initialize the perfect-scrollbar
-            Ps.initialize(this.element.nativeElement);
+            this.ps = new PerfectScrollbar(this.element.nativeElement);
         });
     }
 
@@ -65,7 +66,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         this.onSettingsChanged.unsubscribe();
 
         // Destroy the perfect-scrollbar
-        Ps.destroy(this.element.nativeElement);
+        this.ps.destroy();
     }
 
     update()
@@ -76,7 +77,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         }
 
         // Update the perfect-scrollbar
-        Ps.update(this.element.nativeElement);
+        this.ps.update();
     }
 
     destroy()

src/app/core/scss/core.scss

@@ -3,7 +3,7 @@
 @import '~@swimlane/ngx-datatable/release/themes/material.css';
 @import '~@swimlane/ngx-datatable/release/assets/icons.css';
 // Perfect scrollbar
-@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
 // Fuse
 @import "fuse";
 

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

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

src/app/core/scss/partials/plugins/_perfect-scrollbar.scss

@@ -1,11 +1,12 @@
 .ps {
     position: relative;
 
-    > .ps__scrollbar-y-rail {
+    > .ps__rail-x {
         z-index: 99999;
     }
 
-    > .ps__scrollbar-y-rail {
+    > .ps__rail-y {
         z-index: 99999;
+        left: auto !important;
     }
 }

src/app/main/content/apps/contacts/contact-list/contact-list.component.scss

@@ -22,7 +22,7 @@
         .mat-row {
             position: relative;
             cursor: pointer;
-            padding-right: 8px;
+            padding: 8px 8px 8px 24px;
 
             .mat-cell {
                 min-width: 0;

src/app/main/main.component.html

@@ -1,6 +1,6 @@
 <mat-sidenav-container>
 
-    <div id="fuse-main-content" fxFlexFill>
+    <div id="fuse-main-content">
 
         <!-- TOOLBAR: Above -->
         <ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">