Lots of Responsive refinements applied espacially for the apps

+ responsive variations of spacing class helpers added.

src/app/core/scss/mixins/_breakpoints.scss

@@ -1,14 +1,26 @@
 // Media step breakpoint mixin based on Angular Material lib
 $breakpoints: (
     xs: 'screen and (max-width: 599px)',
-    gt-xs: 'screen and (min-width: 600px)',
     sm: 'screen and (min-width: 600px) and (max-width: 959px)',
-    gt-sm: 'screen and (min-width: 960px)',
     md: 'screen and (min-width: 960px) and (max-width: 1279px)',
-    gt-md: 'screen and (min-width: 1280px)',
     lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
-    gt-lg: 'screen and (min-width: 1920px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
-    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)'
+    lt-sm: 'screen and (max-width: 599px)',
+    lt-md: 'screen and (max-width: 959px)',
+    lt-lg: 'screen and (max-width: 1279px)',
+    lt-xl: 'screen and (max-width: 1919px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    gt-sm: 'screen and (min-width: 960px)',
+    gt-md: 'screen and (min-width: 1280px)',
+    gt-lg: 'screen and (min-width: 1920px)'
+) !default;
+
+$grid-breakpoints: (
+    xs: 0,
+    sm: 600px,
+    md: 960px,
+    lg: 1280px,
+    xl: 1920px
 ) !default;
 
 @mixin media-breakpoint($breakpointName) {
@@ -22,3 +34,94 @@ $breakpoints: (
         }
     }
 }
+
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+    $n: index($breakpoint-names, $name);
+    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+    $min: map-get($breakpoints, $name);
+    @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.1.
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+    $next: breakpoint-next($name, $breakpoints);
+    @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+    $max: breakpoint-max($name, $breakpoints);
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-max($lower, $breakpoints);
+    $max: breakpoint-max($upper, $breakpoints);
+
+    @media (min-width: $min) and (max-width: $max) {
+        @content;
+    }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    $max: breakpoint-max($name, $breakpoints);
+
+    @media (min-width: $min) and (max-width: $max) {
+        @content;
+    }
+}

src/app/core/scss/partials/_helpers.scss

@@ -28,13 +28,20 @@
 // ######################
 // SPACING HELPERS
 // ######################
-@each $prop, $abbrev in (margin: m, padding: p) {
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @each $prop, $abbrev in (margin: m, padding: p) {
 
             @for $index from 0 through 64 {
                 $size: $index * 4;
                 $length: #{$size}px;
 
-        .#{$abbrev}-#{$size} {
+                .#{$abbrev}#{$infix}-#{$size} {
                     #{$prop}: $length !important;
                 }
             }
@@ -43,12 +50,12 @@
                 $size: $index * 4;
                 $length: #{$size}px;
 
-        .#{$abbrev}x-#{$size} {
+                .#{$abbrev}x#{$infix}-#{$size} {
                     #{$prop}-right: $length !important;
                     #{$prop}-left: $length !important;
                 }
 
-        .#{$abbrev}y-#{$size} {
+                .#{$abbrev}y#{$infix}-#{$size} {
                     #{$prop}-top: $length !important;
                     #{$prop}-bottom: $length !important;
                 }
@@ -58,56 +65,64 @@
                 $size: $index * 4;
                 $length: #{$size}px;
 
-        .#{$abbrev}t-#{$size} {
+                .#{$abbrev}t#{$infix}-#{$size} {
                     #{$prop}-top: $length !important;
                 }
 
-        .#{$abbrev}r-#{$size} {
+                .#{$abbrev}r#{$infix}-#{$size} {
                     #{$prop}-right: $length !important;
                 }
 
-        .#{$abbrev}b-#{$size} {
+                .#{$abbrev}b#{$infix}-#{$size} {
                     #{$prop}-bottom: $length !important;
                 }
 
-        .#{$abbrev}l-#{$size} {
+                .#{$abbrev}l#{$infix}-#{$size} {
                     #{$prop}-left: $length !important;
                 }
             }
-}
 
-// Some special margin utils for flex alignments
+            @if ($abbrev == m) {
-.m-auto {
+                @for $index from 0 through 64 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
+
+                    // Some special margin utils for flex alignments
+                    .m#{$infix}-auto {
                         margin: auto !important;
-}
+                    }
 
-.mt-auto {
+                    .mt#{$infix}-auto {
                         margin-top: auto !important;
-}
+                    }
 
-.mr-auto {
+                    .mr#{$infix}-auto {
                         margin-right: auto !important;
-}
+                    }
 
-.mb-auto {
+                    .mb#{$infix}-auto {
                         margin-bottom: auto !important;
-}
+                    }
 
-.ml-auto {
+                    .ml#{$infix}-auto {
                         margin-left: auto !important;
-}
+                    }
 
-.mx-auto {
+                    .mx#{$infix}-auto {
                         margin-right: auto !important;
                         margin-left: auto !important;
-}
+                    }
 
-.my-auto {
+                    .my#{$infix}-auto {
                         margin-top: auto !important;
                         margin-bottom: auto !important;
+                    }
+                }
+            }
+        }
+    }
 }
 
-
 // Border helpers
 $border-style: 1px solid rgba(0, 0, 0, 0.12);
 

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

@@ -79,7 +79,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1;
                     overflow: hidden;
-                    background: mat-color($background, background);
                     @include mat-elevation(7);
 
                     .toolbar {
@@ -96,7 +95,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         display: flex;
                         flex: 1;
                         overflow: auto;
-                        background: mat-color($background, background);
                     }
                 }
             }
@@ -186,7 +184,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                             flex-direction: column;
                             flex: 1;
                             overflow: hidden;
-                            background: mat-color($background, background);
                             @include mat-elevation(7);
 
                             .toolbar {
@@ -209,7 +206,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                             .content {
                                 display: flex;
                                 flex: 1;
-                                background: mat-color($background, background);
                                 overflow: auto;
                             }
                         }
@@ -402,7 +398,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         @include mat-elevation(7);
 
                         .content {
-                            background: mat-color($background, background);
                         }
                     }
                 }

src/app/core/scss/variables/_theme.scss

@@ -49,7 +49,7 @@ $mat-fusedark: (
 
 // Palettes
 $primary: mat-palette($mat-fusedark);
-$accent: mat-palette($mat-blue, 600, 400, 700);
+$accent: mat-palette($mat-light-blue, 600, 400, 700);
 $warn: mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).

src/app/core/services/match-media.service.ts

@@ -14,23 +14,6 @@ export class FuseMatchMedia
     {
         this.activeMediaQuery = '';
 
-        /*this.onMediaChange = Observable.create((observer: Observer<string>) =>
-        {
-            this.observableMedia.subscribe((change: MediaChange) =>
-            {
-                if ( this.activeMediaQuery !== change.mqAlias )
-                {
-                    this.activeMediaQuery = change.mqAlias;
-                    observer.next(this.activeMediaQuery);
-                }
-            });
-        });*/
-
-        /*this.onMediaChange = Observable.create((observer: Observer<string>) =>
-        {
-
-        });*/
-
         this.observableMedia.subscribe((change: MediaChange) =>
         {
             if ( this.activeMediaQuery !== change.mqAlias )

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

@@ -7,7 +7,7 @@
 
             <div class="header-top" fxLayout="row" fxLayoutAlign="space-between center" fxLayout.xs="column">
 
-                <div class="logo" fxLayout="row" fxLayoutAlign="start center">
+                <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
 
                     <md-icon class="logo-icon">today</md-icon>
 
@@ -78,7 +78,7 @@
         </div>
 
         <!-- ADD EVENT BUTTON -->
-        <button md-fab class="add-event-button md-warn" (click)="addEvent($event)" aria-label="Add event">
+        <button md-fab class="add-event-button mat-warn" (click)="addEvent($event)" aria-label="Add event">
             <md-icon>add</md-icon>
         </button>
         <!-- / ADD EVENT BUTTON -->

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

@@ -1,7 +1,7 @@
 .event-form-dialog {
+
     .mat-dialog-container {
         padding: 0;
-        max-width: 720px;
         width: 720px;
     }
 }

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

@@ -2,9 +2,9 @@ import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
 import { CalendarEvent } from 'angular-calendar';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import 'rxjs/Rx';
 import { CalendarEventModel } from '../event.model';
 import { MatColors } from '../../../../../core/matColors';
+import 'rxjs/Rx';
 
 @Component({
     selector     : 'fuse-calendar-event-form-dialog',

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

@@ -2,7 +2,6 @@
 
     .mat-dialog-container {
         padding: 0;
-        max-width: 400px;
         width: 400px;
 
         .toolbar-bottom {

src/app/main/content/apps/dashboards/project/project.component.html

@@ -44,7 +44,7 @@
                         <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap>
 
                             <!-- WIDGET 1 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.sm="50" fxFlex.gt-sm="25">
+                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50"  fxFlex.gt-md="25">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -93,7 +93,7 @@
                             <!-- / WIDGET 1 -->
 
                             <!-- WIDGET 2 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.sm="50" fxFlex.gt-sm="25">
+                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -135,7 +135,7 @@
                             <!-- / WIDGET 2 -->
 
                             <!-- WIDGET 3 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.sm="50" fxFlex.gt-sm="25">
+                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">
@@ -177,7 +177,7 @@
                             <!-- / WIDGET 3 -->
 
                             <!-- WIDGET 4 -->
-                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.sm="50" fxFlex.gt-sm="25">
+                            <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                                 <!-- Front -->
                                 <div class="fuse-widget-front md-white-bg mat-elevation-z2">

src/app/main/content/apps/file-manager/file-list/file-list.component.html

@@ -2,8 +2,8 @@
 
     <!-- Type Column -->
     <ng-container cdkColumnDef="icon">
-        <md-header-cell *cdkHeaderCellDef></md-header-cell>
+        <md-header-cell *cdkHeaderCellDef fxFlex="64px"></md-header-cell>
-        <md-cell *cdkCellDef="let row">
+        <md-cell *cdkCellDef="let row" fxFlex="64px">
             <md-icon class="type-icon" [class]="row.type"></md-icon>
         </md-cell>
     </ng-container>
@@ -16,32 +16,32 @@
 
     <!-- Type Column -->
     <ng-container cdkColumnDef="type">
-        <md-header-cell *cdkHeaderCellDef>Type</md-header-cell>
+        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</md-header-cell>
-        <md-cell *cdkCellDef="let row"> {{row.type}}</md-cell>
+        <md-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</md-cell>
     </ng-container>
 
     <!-- Owner Column -->
     <ng-container cdkColumnDef="owner">
-        <md-header-cell *cdkHeaderCellDef>Owner</md-header-cell>
+        <md-header-cell *cdkHeaderCellDef fxHide.xs>Owner</md-header-cell>
-        <md-cell *cdkCellDef="let row"> {{row.owner}}</md-cell>
+        <md-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</md-cell>
     </ng-container>
 
     <!-- Size Column -->
     <ng-container cdkColumnDef="size">
-        <md-header-cell *cdkHeaderCellDef>Size</md-header-cell>
+        <md-header-cell *cdkHeaderCellDef fxHide.xs>Size</md-header-cell>
-        <md-cell *cdkCellDef="let row">{{row.size === '' ? '-': row.size}}</md-cell>
+        <md-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</md-cell>
     </ng-container>
 
     <!-- Modified Column -->
     <ng-container cdkColumnDef="modified">
-        <md-header-cell *cdkHeaderCellDef>Modified</md-header-cell>
+        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</md-header-cell>
-        <md-cell *cdkCellDef="let row"> {{row.modified}}</md-cell>
+        <md-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</md-cell>
     </ng-container>
 
     <!-- Detail Button Column -->
     <ng-container cdkColumnDef="detail-button">
-        <md-header-cell *cdkHeaderCellDef></md-header-cell>
+        <md-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></md-header-cell>
-        <md-cell *cdkCellDef="let row">
+        <md-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
             <button md-icon-button class="sidenav-toggle"
                     fuseMdSidenavToggler="file-manager-right-sidenav">
                 <md-icon>info</md-icon>

src/app/main/content/apps/file-manager/file-list/file-list.component.scss

@@ -14,16 +14,9 @@
             .mat-cell {
 
                 &.mat-column-icon {
-                    flex: 0 1 auto;
-                    padding: 0 24px 0 0;
                 }
 
                 &.mat-column-detail-button {
-                    flex: 0 1 auto;
-                    padding: 0 24px 0 0;
-                    @include media-breakpoint('gt-md') {
-                        display: none;
-                    }
                 }
             }
         }

src/app/main/content/apps/file-manager/file-manager.component.html

@@ -45,8 +45,8 @@
                 <!-- ADD FILE BUTTON -->
                 <div class="file-uploader">
                     <input hidden type="file" #fileInput/>
-                    <button type="submit" md-fab
+                    <button md-fab
-                            class="add-file-button mat-accent"
+                            class="add-file-button mat-warn"
                             (click)="fileInput.click()"
                             aria-label="Add file">
                         <md-icon>add</md-icon>
@@ -58,7 +58,7 @@
             <!-- / HEADER -->
 
             <!-- CONTENT -->
-            <div class="content" perfect-scrollbar>
+            <div class="content md-white-bg" perfect-scrollbar>
                 <fuse-file-list></fuse-file-list>
             </div>
             <!-- / CONTENT -->

src/app/main/content/apps/file-manager/sidenavs/details/details.component.html

@@ -27,7 +27,7 @@
 <!-- / SIDENAV HEADER -->
 
 <!-- SIDENAV CONTENT -->
-<div class="content p-24" perfect-scrollbar>
+<div class="content p-24 md-white-bg" perfect-scrollbar>
 
     <div class="file-details">
 

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

@@ -6,7 +6,6 @@
 .mail-compose-dialog {
     .mat-dialog-container {
         padding: 0;
-        max-width: 720px;
         width: 720px;
 
         .attachment-list {

src/app/main/content/apps/mail/mail-details/mail-details.component.scss

@@ -4,9 +4,6 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    width: 50%;
-    min-width: 50%;
-    max-width: 50%;
     overflow-y: auto;
     padding: 24px;
 

src/app/main/content/apps/mail/mail-list/mail-list.component.scss

@@ -3,9 +3,6 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    width: 50%;
-    min-width: 50%;
-    max-width: 50%;
     overflow-y: auto;
     padding: 0;
     border-right: 1px solid rgba(0,0,0,.12);

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

@@ -27,7 +27,7 @@
                         <md-icon>menu</md-icon>
                     </button>
 
-                    <div class="search" flex fxLayout="row" fxLayoutAlign="start center">
+                    <div class="search md-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
                         <md-icon>search</md-icon>
                         <input [formControl]="searchInput" placeholder="Search for an e-mail or contact" fxFlex>
                     </div>
@@ -37,11 +37,12 @@
             <!-- / CONTENT HEADER -->
 
             <!-- CONTENT CARD -->
-            <div class="content-card">
+            <div class="content-card md-white-bg" [ngClass]="{'current-mail-selected':currentMail}">
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
 
+                    <div *ngIf="!currentMail">
                         <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
                                      [indeterminate]="isIndeterminate"></md-checkbox>
 
@@ -82,16 +83,22 @@
                                     (click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
                             </button>
                         </md-menu>
+                    </div>
 
+                    <div *ngIf="currentMail">
+                        <button md-icon-button (click)="deSelectCurrentMail()">
+                            <md-icon>arrow_back</md-icon>
+                        </button>
+                    </div>
                 </div>
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content">
+                <div class="content" fxLayoutAlign="row">
 
-                    <fuse-mail-list perfect-scrollbar></fuse-mail-list>
+                    <fuse-mail-list perfect-scrollbar fxFlex></fuse-mail-list>
 
-                    <fuse-mail-details perfect-scrollbar></fuse-mail-details>
+                    <fuse-mail-details perfect-scrollbar fxFlex></fuse-mail-details>
 
                 </div>
                 <!-- / CONTENT -->

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

@@ -24,7 +24,6 @@
                     height: 56px;
                     line-height: 56px;
                     padding: 18px;
-                    background: #FFFFFF;
 
                     input {
                         height: 56px;
@@ -36,6 +35,35 @@
                 }
             }
         }
+
+        .content-card {
+
+            @include media-breakpoint(xs) {
+
+                fuse-mail-list,
+                fuse-mail-details {
+                    flex: 1 0 100%;
+                }
+
+                fuse-mail-details {
+                    display: none !important;
+                }
+
+                &.current-mail-selected {
+
+                    .content {
+
+                        fuse-mail-list {
+                            display: none !important;
+                        }
+
+                        fuse-mail-details {
+                            display: flex !important;
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 

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

@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MailService } from './mail.service';
 import { Subscription } from 'rxjs/Subscription';
 import { FormControl } from '@angular/forms';
+import { Mail } from './mail.model';
 
 @Component({
     selector   : 'fuse-mail',
@@ -16,11 +17,13 @@ export class MailComponent implements OnInit, OnDestroy
     filters: any[];
     labels: any[];
     searchInput: FormControl;
+    currentMail: Mail;
 
     onSelectedMailsChanged: Subscription;
     onFoldersChanged: Subscription;
     onFiltersChanged: Subscription;
     onLabelsChanged: Subscription;
+    onCurrentMailChanged: Subscription;
 
     constructor(private mailService: MailService)
     {
@@ -57,6 +60,18 @@ export class MailComponent implements OnInit, OnDestroy
                     this.labels = this.mailService.labels;
                 });
 
+        this.onCurrentMailChanged =
+            this.mailService.onCurrentMailChanged
+                .subscribe(currentMail => {
+                    if ( !currentMail )
+                    {
+                        this.currentMail = null;
+                    }
+                    else
+                    {
+                        this.currentMail = currentMail;
+                    }
+                });
 
         /*this.searchInput.valueChanges
             .debounceTime(300)
@@ -72,6 +87,8 @@ export class MailComponent implements OnInit, OnDestroy
         this.onFoldersChanged.unsubscribe();
         this.onFiltersChanged.unsubscribe();
         this.onLabelsChanged.unsubscribe();
+        this.onCurrentMailChanged.unsubscribe();
+
     }
 
     toggleSelectAll()
@@ -89,6 +106,11 @@ export class MailComponent implements OnInit, OnDestroy
         this.mailService.deselectMails();
     }
 
+    deSelectCurrentMail()
+    {
+        this.mailService.onCurrentMailChanged.next(null);
+    }
+
     toggleLabelOnSelectedMails(labelId)
     {
         this.mailService.toggleLabelOnSelectedMails(labelId);

src/app/main/content/apps/todo/todo-details/todo-details.component.scss

@@ -4,11 +4,7 @@
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
-    width: 50%;
-    min-width: 50%;
-    max-width: 50%;
     overflow-y: auto;
-    background: #FFFFFF;
     padding: 24px;
 
     .todo-header {

src/app/main/content/apps/todo/todo-list/todo-list.component.scss

@@ -2,11 +2,7 @@
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
-    width: 50%;
-    min-width: 50%;
-    max-width: 50%;
     overflow-y: auto;
-    background: #FAFAFA;
     position: relative;
     padding: 0;
     border-right: 1px solid rgba(0, 0, 0, .12);

src/app/main/content/apps/todo/todo-list/todo-list.component.ts

@@ -18,9 +18,11 @@ export class TodoListComponent implements OnInit, OnDestroy
     onTodosChanged: Subscription;
     onCurrentTodoChanged: Subscription;
 
-    constructor(private route: ActivatedRoute,
+    constructor(
+        private route: ActivatedRoute,
         private todoService: TodoService,
-                private location: Location)
+        private location: Location
+    )
     {
     }
 
@@ -54,6 +56,10 @@ export class TodoListComponent implements OnInit, OnDestroy
                         {
                             this.location.go('apps/todo/filter/' + filterHandle);
                         }
+                        else
+                        {
+                            this.location.go('apps/todo/all');
+                        }
                     }
                     else
                     {

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

@@ -19,7 +19,7 @@
             <!-- CONTENT HEADER -->
             <div class="header" fxLayout="row" fxLayoutAlign="start center">
 
-                <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
+                <div class="search-wrapper md-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center">
 
                     <button md-button class="mat-icon-button sidenav-toggle"
                             fuseMdSidenavToggler="carded-left-sidenav"
@@ -37,11 +37,11 @@
             <!-- / CONTENT HEADER -->
 
             <!-- CONTENT CARD -->
-            <div class="content-card">
+            <div class="content-card md-white-bg" [ngClass]="{'current-todo-selected':currentTodo}">
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar px-24 py-8">
-
+                    <div *ngIf="!currentTodo">
                         <md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
                                      [indeterminate]="isIndeterminate"></md-checkbox>
 
@@ -69,16 +69,22 @@
                                 {{tag.title}}
                             </button>
                         </md-menu>
+                    </div>
 
+                    <div *ngIf="currentTodo">
+                        <button md-icon-button (click)="deSelectCurrentTodo()">
+                            <md-icon>arrow_back</md-icon>
+                        </button>
+                    </div>
                 </div>
                 <!-- / CONTENT TOOLBAR -->
 
                 <!-- CONTENT -->
-                <div class="content">
+                <div class="content" fxFlexAlign="row">
 
-                    <fuse-todo-list perfect-scrollbar></fuse-todo-list>
+                    <fuse-todo-list perfect-scrollbar fxFlex></fuse-todo-list>
 
-                    <fuse-todo-details perfect-scrollbar></fuse-todo-details>
+                    <fuse-todo-details perfect-scrollbar fxFlex></fuse-todo-details>
 
                 </div>
                 <!-- / CONTENT -->

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

@@ -14,7 +14,6 @@
                     margin: 0;
                     width: 56px;
                     height: 56px;
-                    background: #FFF;
                     border-radius: 0;
                     border-right: 1px solid rgba(0, 0, 0, .12);
                 }
@@ -24,7 +23,6 @@
                     height: 56px;
                     line-height: 56px;
                     padding: 18px;
-                    background: #FFFFFF;
 
                     input {
                         height: 56px;
@@ -36,6 +34,34 @@
                 }
             }
         }
+
+        .content-card{
+            @include media-breakpoint-down(lg) {
+
+                fuse-todo-list,
+                fuse-todo-details {
+                    flex: 1 0 100%;
+                }
+
+                fuse-todo-details {
+                    display: none !important;
+                }
+
+                &.current-todo-selected {
+
+                    .content {
+
+                        fuse-todo-list {
+                            display: none !important;
+                        }
+
+                        fuse-todo-details {
+                            display: flex !important;
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 

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

@@ -16,10 +16,12 @@ export class TodoComponent implements OnInit, OnDestroy
     filters: any[];
     tags: any[];
     searchInput: FormControl;
+    currentTodo: Todo;
 
     onSelectedTodosChanged: Subscription;
     onFiltersChanged: Subscription;
     onTagsChanged: Subscription;
+    onCurrentTodoChanged: Subscription;
 
     constructor(private todoService: TodoService)
     {
@@ -57,6 +59,24 @@ export class TodoComponent implements OnInit, OnDestroy
             .subscribe(searchText => {
                 this.todoService.onSearchTextChanged.next(searchText);
             });
+
+        this.onCurrentTodoChanged =
+            this.todoService.onCurrentTodoChanged
+                .subscribe(currentTodo => {
+                    if ( !currentTodo )
+                    {
+                        this.currentTodo = null;
+                    }
+                    else
+                    {
+                        this.currentTodo = currentTodo;
+                    }
+                });
+    }
+
+    deSelectCurrentTodo()
+    {
+        this.todoService.onCurrentTodoChanged.next(null);
     }
 
     ngOnDestroy()
@@ -64,6 +84,7 @@ export class TodoComponent implements OnInit, OnDestroy
         this.onSelectedTodosChanged.unsubscribe();
         this.onFiltersChanged.unsubscribe();
         this.onTagsChanged.unsubscribe();
+        this.onCurrentTodoChanged.unsubscribe();
     }
 
     toggleSelectAll()

src/app/main/navbar/navbar.component.scss

@@ -72,7 +72,7 @@ fuse-navbar {
         box-shadow: none;
     }
 
-    @include media-breakpoint('xs') {
+    @include media-breakpoint('lt-md') {
         position: absolute;
         top: 0;
         bottom: 0;

src/app/main/navbar/navbar.component.ts

@@ -35,7 +35,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
                 .subscribe((mediaStep) => {
                     setTimeout(() => {
 
-                        if ( mediaStep === 'xs' )
+                        if ( this.media.isActive('lt-md') )
                         {
                             this.closeBar();
                             this.deActivateFolded();
@@ -60,7 +60,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
             this.initialized = true;
         });
 
-        if ( this.media.isActive('xs') )
+        if ( this.media.isActive('lt-md') )
         {
             this.closeBar();
             this.deActivateFolded();

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

@@ -4,17 +4,17 @@
 
         <div fxFlex fxLayout="row" fxLayoutAlign="start center">
 
-            <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
+            <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-sm fxFlex="56px">
                 <md-icon>menu</md-icon>
             </button>
 
-            <div class="toolbar-separator" fxHide.gt-xs></div>
+            <div class="toolbar-separator" fxHide.gt-sm></div>
 
-            <div class="px-16">
+            <div class="px-16" fxHide.lt-md>
                 <fuse-shortcuts></fuse-shortcuts>
             </div>
 
-            <div class="toolbar-separator"></div>
+            <div class="toolbar-separator" fxHide.lt-md></div>
         </div>
 
         <div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">