Calendar, Contacts, Mail, Scrumboard apps responsive refinements,

+ temporary fix for md-sidenav-locked transition

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

@@ -1,4 +1,4 @@
-import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding, AfterViewInit } from '@angular/core';
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseMatchMedia } from '../../services/match-media.service';
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs/Subscription';
 @Directive({
     selector: '[fuseMdSidenavHelper]'
 })
-export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDestroy
+export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
 {
     matchMediaSubscription: Subscription;
 
@@ -38,6 +38,7 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
                 this.mdSidenav.mode = 'side';
                 this.mdSidenav.open();
             });
+            this.stopTransition = false;
         }
         else
         {
@@ -46,6 +47,10 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
                 this.mdSidenav.mode = 'over';
                 this.mdSidenav.close();
             });
+
+            setTimeout(() => {
+                this.stopTransition = false;
+            }, 3000);
         }
 
         this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
@@ -69,13 +74,6 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
 
     }
 
-    ngAfterViewInit()
-    {
-        setTimeout(() => {
-            this.stopTransition = false;
-        }, 300);
-    }
-
     ngOnDestroy()
     {
         this.matchMediaSubscription.unsubscribe();

src/app/core/scss/partials/_angular-material-fix.scss

@@ -9,9 +9,10 @@ md-sidenav-container {
 
     md-sidenav {
 
-        &.md-stop-transition {
+        &[md-is-locked-open].md-stop-transition {
             transition: none !important;
             transform: translate3d(0, 0, 0) !important;
+            opacity: 0;
 
             ~ .mat-sidenav-content,
             ~ .mat-drawer-content {

src/app/main/content/apps/calendar/calendar.component.html

@@ -1,6 +1,7 @@
 <div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar>
+
     <!-- HEADER -->
-    <div class="header" [ngClass]="viewDate | date:'MMM'">
+    <div class="header p-16 p-sm-24" [ngClass]="viewDate | date:'MMM'">
 
         <div class="header-content" fxLayout="column" fxLayoutAlign="space-between">
 

src/app/main/content/apps/calendar/calendar.component.scss

@@ -26,8 +26,8 @@
     }
 
     .cal-open-day-events {
-        background: #455A64;
+        background: whitesmoke;
-        box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
+        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -44,11 +44,11 @@
             transition: box-shadow 300ms ease;
 
             &:first-of-type {
-                margin-top: 16px;
+                margin-top: 24px;
             }
 
             &:last-of-type {
-                margin-bottom: 16px;
+                margin-bottom: 24px;
             }
 
             &:hover {
@@ -184,12 +184,13 @@
 
 #calendar {
     background: #FFFFFF;
+    overflow-x: hidden;
+    overflow-y: auto;
 
     .header {
         height: 200px;
         min-height: 200px;
         max-height: 200px;
-        padding: 24px;
         position: relative;
         background-size: 100% auto;
         background-position: 0 50%;
@@ -197,6 +198,12 @@
         background-color: #FAFAFA;
         color: #FFFFFF;
 
+        @include media-breakpoint(xs) {
+            height: 164px;
+            min-height: 164px;
+            max-height: 164px;
+        }
+
         &:before {
             content: '';
             position: absolute;

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -1,3 +1,4 @@
+<div class="dialog-content-wrapper">
     <md-toolbar md-dialog-title class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">{{dialogTitle}}</span>
@@ -11,9 +12,9 @@
 
     <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
-    <form name="eventForm" [formGroup]="eventForm" class="event-form" fxLayout="column" fxFlex>
+        <form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
 
-        <md-input-container>
+            <md-input-container class="w-100-p">
                 <input mdInput
                        name="title"
                        formControlName="title"
@@ -32,7 +33,7 @@
             </div>
 
             <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
-            <md-input-container class="mr-24">
+                <md-input-container class="mr-24" fxFlex>
                     <input mdInput
                            name="primary color"
                            formControlName="primary"
@@ -43,7 +44,7 @@
                            [style.background]="event.color.primary"
                            (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
                 </md-input-container>
-            <md-input-container>
+                <md-input-container fxFlex>
                     <input mdInput
                            name="secondary color"
                            formControlName="secondary"
@@ -58,38 +59,40 @@
 
             <div fxFlex="1 0 auto" fxLayout="row">
 
-            <md-form-field class="mr-24">
+                <md-form-field class="mr-24" fxFlex>
                     <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
                     <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
                     <md-datepicker #startDatePicker></md-datepicker>
                 </md-form-field>
 
-            <md-datepicker #startDatePicker></md-datepicker>
+                <md-input-container class="no-errors-spacer" fxFlex md-no-float>
+                    <input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time">
+                </md-input-container>
 
             </div>
 
             <div fxFlex="1 0 auto" fxLayout="row">
 
-            <md-form-field class="mr-24">
+                <md-form-field class="mr-24" fxFlex>
                     <input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
                     <md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
                     <md-datepicker #endDatePicker></md-datepicker>
                 </md-form-field>
 
-            <md-input-container class="no-errors-spacer" flex md-no-float>
+                <md-input-container class="no-errors-spacer" fxFlex md-no-float>
                     <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
                 </md-input-container>
 
             </div>
 
-        <md-input-container formGroupName="meta">
+            <md-input-container formGroupName="meta" class="w-100-p">
                 <input mdInput
                        name="location"
                        formControlName="location"
                        placeholder="Location">
             </md-input-container>
 
-        <md-input-container formGroupName="meta">
+            <md-input-container formGroupName="meta" class="w-100-p">
 
             <textarea mdInput
                       formControlName="notes"
@@ -131,5 +134,5 @@
                 md-tooltip="Delete">
             <md-icon>delete</md-icon>
         </button>
-
+    </div>
 </div>

src/app/main/content/apps/calendar/event-form/event-form.component.scss

@@ -2,11 +2,12 @@
 
     .mat-dialog-container {
         padding: 0;
-        width: 720px;
+        width: 480px;
-    }
     }
 
-:host {
+    .dialog-content-wrapper {
+        max-height: 85vh;
         display: flex;
         flex-direction: column;
     }
+}

src/app/main/content/apps/contacts/contact-form/contact-form.component.html

@@ -1,3 +1,4 @@
+<div class="dialog-content-wrapper">
     <md-toolbar md-dialog-title class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">{{dialogTitle}}</span>
@@ -8,7 +9,7 @@
             </button>
         </div>
 
-    <md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
+        <md-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
             <img [src]="contact.avatar" class=" avatar contact-avatar huge"
                  [alt]="contact.name"/>
             <div class="contact-name">{{contact.name}}</div>
@@ -124,3 +125,4 @@
         </button>
 
     </div>
+</div>

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

@@ -3,14 +3,20 @@
     .mat-dialog-container {
         padding: 0;
         width: 400px;
+        overflow: hidden;
+
+        .mat-toolbar {
+            min-height: initial;
+        }
 
         .toolbar-bottom {
-            height: 200px;
+            height: auto;
-        }
         }
     }
 
-:host {
+    .dialog-content-wrapper {
+        max-height: 85vh;
         display: flex;
         flex-direction: column;
     }
+}

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

@@ -104,9 +104,3 @@
 </md-table>
 
 
-<!-- ADD CONTACT BUTTON -->
-<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
-        *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
-    <md-icon>person_add</md-icon>
-</button>
-<!-- / ADD CONTACT BUTTON -->

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

@@ -8,7 +8,7 @@
         box-shadow: none;
 
         .mat-column-checkbox {
-            flex: 0 1 64px;
+            flex: 0 1 48px;
         }
 
         .mat-column-avatar {
@@ -22,6 +22,7 @@
         .mat-row {
             position: relative;
             cursor: pointer;
+            padding-right: 8px;
 
             .mat-cell {
                 min-width: 0;

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

@@ -63,28 +63,6 @@ export class FuseContactsContactListComponent implements OnInit
         this.dataSource = new FilesDataSource(this.contactsService);
     }
 
-    newContact()
-    {
-        this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
-            panelClass: 'contact-form-dialog',
-            data      : {
-                action: 'new'
-            }
-        });
-
-        this.dialogRef.afterClosed()
-            .subscribe((response: FormGroup) => {
-                if ( !response )
-                {
-                    return;
-                }
-
-                this.contactsService.updateContact(response.getRawValue());
-
-            });
-
-    }
-
     editContact(contact)
     {
         this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {

src/app/main/content/apps/contacts/contacts.component.html

@@ -1,7 +1,7 @@
-<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar>
+<div id="contacts" class="page-layout simple left-sidenav inner-sidenav">
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="start start"
+    <div class="header md-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
          fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 
         <!-- APP TITLE -->
@@ -51,7 +51,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center p-24 pr-sm-92" fusePerfectScrollbar>
+        <div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
 
             <!-- CONTENT -->
             <div class="content md-white-bg mat-elevation-z4">
@@ -67,3 +67,10 @@
     </md-sidenav-container>
 
 </div>
+
+<!-- ADD CONTACT BUTTON -->
+<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
+        *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
+    <md-icon>person_add</md-icon>
+</button>
+<!-- / ADD CONTACT BUTTON -->

src/app/main/content/apps/contacts/contacts.component.scss

@@ -4,3 +4,10 @@
         overflow: hidden;
     }
 }
+#add-contact-button {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    padding: 0;
+    z-index: 99;
+}

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

@@ -1,7 +1,9 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ContactsService } from './contacts.service';
 import { fuseAnimations } from '../../../../core/animations';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
+import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
+import { MdDialog } from '@angular/material';
 
 @Component({
     selector     : 'fuse-contacts',
@@ -14,12 +16,38 @@ export class FuseContactsComponent implements OnInit
 {
     hasSelectedContacts: boolean;
     searchInput: FormControl;
+    dialogRef: any;
 
-    constructor(private contactsService: ContactsService)
+    constructor(
+        private contactsService: ContactsService,
+        public dialog: MdDialog
+    )
     {
         this.searchInput = new FormControl('');
     }
 
+    newContact()
+    {
+        this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
+            panelClass: 'contact-form-dialog',
+            data      : {
+                action: 'new'
+            }
+        });
+
+        this.dialogRef.afterClosed()
+            .subscribe((response: FormGroup) => {
+                if ( !response )
+                {
+                    return;
+                }
+
+                this.contactsService.updateContact(response.getRawValue());
+
+            });
+
+    }
+
     ngOnInit()
     {
 

src/app/main/content/apps/mail/dialogs/compose/compose.component.html

@@ -1,3 +1,4 @@
+<div class="dialog-content-wrapper">
     <md-toolbar md-dialog-title class="mat-accent m-0">
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
             <span class="title dialog-title">New Message</span>
@@ -107,3 +108,4 @@
             <md-icon>delete</md-icon>
         </button>
     </div>
+</div>

src/app/main/content/apps/mail/dialogs/compose/compose.component.scss

@@ -1,8 +1,3 @@
-:host {
-    display: flex;
-    flex-direction: column;
-}
-
 .mail-compose-dialog {
     .mat-dialog-container {
         padding: 0;
@@ -36,4 +31,10 @@
             }
         }
     }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
 }

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html

@@ -1,3 +1,4 @@
+<div class="dialog-content-wrapper">
     <md-toolbar *ngIf="card" md-dialog-title class="md-accent-bg m-0">
 
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@@ -450,3 +451,4 @@
         </div>
         <!-- / SECTIONS -->
     </div>
+</div>

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss

@@ -1,10 +1,5 @@
 @import "src/app/core/scss/fuse";
 
-:host {
-    display: flex;
-    flex-direction: column;
-}
-
 .scrumboard-card-dialog {
 
     .mat-dialog-container {
@@ -387,6 +382,12 @@
         }
 
     }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 .scrumboard-members-menu {