From 48b74b0f6b56bd0ab8eb6c4722f2fe47b5c27f46 Mon Sep 17 00:00:00 2001
From: Benoit Favreault <benoit.favreault@gmail.com>
Date: Thu, 26 Mar 2015 09:58:09 -0400
Subject: [PATCH] Add responsiveness (First draft)

---
 .../ContactsUI/UIxContactFoldersView.wox      |  10 +-
 .../ContactsUI/UIxContactViewTemplate.wox     |   1 +
 .../MailerUI/UIxMailFolderTemplate.wox        |   6 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    |   3 +-
 UI/Templates/MailerUI/UIxMailViewTemplate.wox |   1 +
 UI/WebServerResources/Gruntfile.js            |   3 +-
 UI/WebServerResources/js/Common/ui.js         |  10 +-
 UI/WebServerResources/scss/.scss-lint.yml     |   7 +-
 .../scss/components/button/_button.scss       |  56 ++++--
 .../scss/components/sidenav/sidenav.scss      |  10 +-
 .../scss/components/toolbar/toolbar.scss      |   1 -
 .../scss/core/base_styles/_base_style.scss    |   5 -
 UI/WebServerResources/scss/core/layout.scss   | 167 ++++++++++++++++--
 UI/WebServerResources/scss/core/mixins.scss   |   4 +-
 .../scss/core/typography/typography.scss      |   2 +-
 .../scss/core/variables.scss                  |  17 +-
 .../scss/views/ContactsUI.scss                |   3 +-
 .../scss/views/MailerUI.scss                  |   2 +-
 UI/WebServerResources/scss/views/_view.scss   |  63 ++++---
 19 files changed, 275 insertions(+), 96 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 9d581737c..ea7f4ff21 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -207,9 +207,10 @@
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
           <div class="sg-toolbar-group-1" layout="row">
-            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
+            <md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>
             </md-button>
+            <!--todo: provide live data for this group-->
             <div class="sg-date-group" layout="column" layout-align="space-between end">
               <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
               <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
@@ -237,10 +238,8 @@
                 <md-option value="category"><var:string label:value="Category"/></md-option>
                 <md-option value="organization"><var:string label:value="Organization"/></md-option>
               </md-select>
-              <md-button class="iconButton" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-create"><!--icon--></i></md-button>
             </div>
           </div>
-          <div class="spacer cols-8"><!-- spacer --></div>
         </div>
       </md-toolbar>
 
@@ -273,7 +272,7 @@
             <md-item ng-repeat="currentCard in addressbook.cards track by currentCard.id">
               <md-item-content
                   ng-class="{_selected: card.id == currentCard.id}"
-                  ng-click="select($index)">
+                  ng-click="select($index); toggleDetailView()">
                 <div class="md-tile-left">
                   <!--avatar--><!-- currentCard.tag = vcard || vlist -->
                 </div>
@@ -289,7 +288,8 @@
         </md-content>
         <!-- This extra container is used to animate views transitions
              double quotes in ng-animate is not a typo                         -->
-        <div class="view-detail" ui-view="card" layout="column" ng-animate="'view'"><!-- card view --></div>
+        <div id="detailView" class="view-detail" ui-view="card" layout="column" ng-animate="'view'"><!-- card view --></div>
+        <md-button class="iconButton md-fab md-accent" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-add"><!--icon--></i></md-button>
       </div>
 
     </section>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index c3d28e28f..9b5595d11 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -7,6 +7,7 @@
     >
   <md-card class="viewer">
     <md-card-content>
+      <md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-arrow-back"><!--icon--></i></md-button>
       <header>
         <div class="sg-avatar">
           <!--avatar--><!-- currentCard.tag = vcard || vlist -->
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 39554d83b..01c2677c4 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -2,7 +2,7 @@
 <container
     xmlns="http://www.w3.org/1999/xhtml"
     >
-  <md-content class="view-list" style="position: relative;" id="messagesList">
+  <md-content class="view-list cols-6" style="position: relative;" id="messagesList">
     <style>
       .vs-repeat-repeated-element {
         width: 100%;
@@ -16,7 +16,7 @@
         vs-scroll-parent="#messagesList">
       <md-item ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
           ng-class="{unread: !currentMessage.isread}">
-        <md-item-content ui-sref-active="_selected">
+        <md-item-content ui-sref-active="_selected" ng-click="toggleDetailView()">
           <div class="md-tile-left">
             <!--avatar-->
           </div>
@@ -42,6 +42,6 @@
   </md-content>
   <!-- This extra container is used to animate views transitions
        double quotes in ng-animate is not a typo                         -->
-    <div class="view-detail" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
+    <div id="detailView" class="view-detail" layout="column" ui-view="message"><!-- message view --></div>
 
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 5155ad3bb..9ee46b760 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -306,9 +306,10 @@
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
           <div class="sg-toolbar-group-1" layout="row">
-            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
+            <md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>
             </md-button>
+            <!--todo: provide live data for this group-->
             <div class="sg-date-group" layout="column" layout-align="space-between end">
               <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
               <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index ab4c22487..c70366bb3 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -8,6 +8,7 @@
    xmlns:uix="OGo:uix">
 
 <md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
+  <md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-arrow-back"><!--icon--></i></md-button>
   <header class="msg-header">
 
       <div class="msg-header-content">
diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js
index 743062559..7e3b6bdc2 100644
--- a/UI/WebServerResources/Gruntfile.js
+++ b/UI/WebServerResources/Gruntfile.js
@@ -37,7 +37,8 @@ module.exports = function(grunt) {
         loadPath: ['scss', 'bower_components/compass-mixins/lib',
                    'bower_components/compass-breakpoint/stylesheets',
                    'bower_components/breakpoint-slicer/stylesheets',
-                   'bower_components/sassy-maps/sass'],
+                   'bower_components/sassy-maps/sass'
+        ],
         style: 'expanded'
       },
       dist: {
diff --git a/UI/WebServerResources/js/Common/ui.js b/UI/WebServerResources/js/Common/ui.js
index 6b99d9a76..a327c8ed3 100644
--- a/UI/WebServerResources/js/Common/ui.js
+++ b/UI/WebServerResources/js/Common/ui.js
@@ -91,9 +91,9 @@
           'hue-3': 'A700'
         })
         .accentPalette('sogo-green', {
-          'default': '300',
+          'default': '500',
           'hue-1': '200',
-          'hue-2': '500',
+          'hue-2': '300',
           'hue-3': 'A700'
         })
         .backgroundPalette('sogo-paper', {
@@ -146,6 +146,12 @@
           templateUrl: 'bottomSheetTemplate.html'
         });
       };
+      $scope.toggleDetailView = function() {
+        $timeout(function() {
+          var view = angular.element(document.getElementById('detailView'));
+          view.toggleClass('sg-open');
+        })
+      };
       $scope.$watch(function() {
         return $mdMedia(sgConstant['gt-md']);
       },
diff --git a/UI/WebServerResources/scss/.scss-lint.yml b/UI/WebServerResources/scss/.scss-lint.yml
index b3a18af72..bf707994f 100644
--- a/UI/WebServerResources/scss/.scss-lint.yml
+++ b/UI/WebServerResources/scss/.scss-lint.yml
@@ -87,15 +87,16 @@ linters:
     enabled: true
 
   PropertySortOrder:
-    enabled: false
-    ignore_unspecified: false
+    enabled: true
+    order: concentric
+    ignore_unspecified: true
 
   PropertySpelling:
     enabled: true
     extra_properties: []
 
   QualifyingElement:
-    enabled: true
+    enabled: false
     allow_element_with_attribute: false
     allow_element_with_class: false
     allow_element_with_id: false
diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss
index d3883ed0c..aa22d6d10 100644
--- a/UI/WebServerResources/scss/components/button/_button.scss
+++ b/UI/WebServerResources/scss/components/button/_button.scss
@@ -12,24 +12,27 @@
 // ------------------------------------
 sg-folder-tree .md-button,
 md-sidenav md-list button.md-button {
+  padding: 0;
   outline: none;
   color: inherit;
-  font-size: sg-size(button);
-  padding: 0;
   text-transform: initial;
+  font-size: sg-size(button);
   -webkit-font-smoothing: auto;
 }
+
 .sg-folder {
-  flex: 1;
   text-align: left;
+  flex: 1;
 }
+
 .sg-active .md-button {
   color: sg-color($sogoBlue, 800);
 }
 
-md-sidenav .md-button [class ^= md-icon] {
+md-sidenav .md-button [class ^= "md-icon"] {
   margin-right: 1em;
 }
+
 ///
 /// iconButton
 /// according to Material design specs:
@@ -54,25 +57,26 @@ $iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-i
 $iconButton-hover-scale: 1.25;
 $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-function;
 
-
 // Classes
-.iconButton {
-  padding: $iconButton-padding;
-  border-radius: 50%;
-  overflow: hidden;
+.iconButton,
+.md-button.md-default-theme:not([disabled]).iconButton {
   // z-index provides a stacking context that prevent ripple-effect from overflowing
   z-index: 1;
-  background-clip: content-box;
-  background-color: transparent;
+  overflow: hidden;
+  padding: $iconButton-padding;
+  border-radius: 50%;
   color: inherit;
+
   &:hover,
   &:active {
     background-color: transparent;
+
     [class ^= md-icon],
     [class *= md-icon-] {
       transform: scale($iconButton-hover-scale);
     }
   }
+
   [class ^= md-icon],
   [class *= md-icon-] {
     padding: $iconButton-icon-padding;
@@ -80,20 +84,27 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
     font-size: $iconButton-icon-size;
     transition: $iconButton-transition;
   }
+  .md-icon-arrow-back {
+    font-size: sg-size('headline')
+  }
+
   .md-ripple-container {
     border-radius: 50%;
   }
 }
+
+
+
 // Icon-bars are for iconButtons, by default they're vertical and at the right
 // the modifier class is to reflect those values and leave place to other versions
 .sg-icon-bar--vertical {
-  font-size: $sg-font-size-3;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  // Containers have padding, we compensate to align according to specs
   margin: 0 ($iconButton-padding * -1) 0 $mg;
+  font-size: $sg-font-size-3;
+  align-items: center;
+  // Containers have padding, we compensate to align according to specs
+  justify-content: space-between;
 }
 
 // NiceToHave: some horizontal or left hand side variant
@@ -102,16 +113,23 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
   display: block;
 }
 
-// angular-material is overspecifying so we are
-.md-button.md-default-theme:not([disabled]).iconButton {
-  @extend .iconButton;
+//// angular-material is overspecifying so we are
+//.md-button.md-default-theme:not([disabled]).iconButton {
+//  @extend .iconButton;
+//}
+
+.md-button.iconButton.md-fab.md-default-theme {
+  z-index: $z-index-fab;
+  margin-right: $mg;
+  transform: translateY(-50%);
 }
 
 .sg-button-navicon {
+  margin-left: ($mg * -1);
   width: $touch-zone;
   height: $touch-zone;
-  margin-left: ($mg * -1);
 }
+
 // angular-material is overspecifying so we are and so we have to continue
 .sg-button-navicon.iconButton span.md-icon-menu,
 .sg-button-navicon.iconButton i[class|="md-icon"] {
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index f261074be..6bb7d2c5d 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -4,9 +4,6 @@ $sidenav-min-space: $pitch;
 
 md-sidenav {
   position: absolute;
-
-  width: $sidenav-default-width;
-  min-width: $sidenav-default-width;
   max-width: $sidenav-default-width;
   bottom: 0;
   z-index: $z-index-sidenav;
@@ -37,9 +34,10 @@ md-sidenav {
     transform: translate3d(0, 0, 0);
   }
   &.md-locked-open {
-    width: $sidenav-default-width;
-    min-width: $sidenav-default-width;
-    max-width: $sidenav-default-width;
+    @include from(lg) {
+      @include flex-col(lg, 4, 1, 1)
+    }
+
   }
 
   &.md-locked-open,
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 665d508e3..b816fab99 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -2,7 +2,6 @@
 
 md-toolbar {
   // todo: create variables scaled z-index
-  z-index: 20;
   box-shadow: none;
   font-size: initial;
 }
diff --git a/UI/WebServerResources/scss/core/base_styles/_base_style.scss b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
index 53d4e3bbd..1ae2ae039 100644
--- a/UI/WebServerResources/scss/core/base_styles/_base_style.scss
+++ b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
@@ -9,11 +9,6 @@
  *
  */
 
-.sg-app-content {
-  // Adjust visualy to keep breathing room at the bottom
-  padding-bottom: $mg;
-}
-
 main {
   background-color: sg-color($sogoPaper, 200);
 }
diff --git a/UI/WebServerResources/scss/core/layout.scss b/UI/WebServerResources/scss/core/layout.scss
index a786dfb0a..72c5560eb 100644
--- a/UI/WebServerResources/scss/core/layout.scss
+++ b/UI/WebServerResources/scss/core/layout.scss
@@ -2,30 +2,161 @@
 // -------------------------------
 @import "../../angular-material/src/core/style/layout";
 
+
+/**
+ * Overrides angular-material sources
+ * There are some redundancies (thanks to breakpoint-slicer) that can't
+ * be easily overriden and are interfeering
+ *
+ */
+// todo: look for redundancies and find a way to override them
+
+// Responsive attributes
+// Some value are defined in project variables
+// ------------------------------
+
+// hide means hide everywhere
+/* Sizes:
+  0    <= size < 600  Phone
+  600  <= size < 960  Tablet
+  960  <= size < 1200 Tablet-Landscape
+  1200 <= size         PC
+*/
+
+
+// SMALL SCREEN
+@include at(sm) {
+  .hide-sm, .hide {
+    &:not(.show-sm):not(.show) {
+      display: none;
+    }
+  }
+
+  @include flex-order-for-name(sm);
+  @include layout-align-for-name(sm);
+  @include layout-for-name(sm);
+  @include flex-properties-for-name(sm);
+}
+
+@include from(md) {
+  .show-sm {
+    display: none;
+  }
+}
+
+
+// BIGGER THAN SMALL SCREEN
+@include from(md) {
+  @include flex-order-for-name(gt-sm);
+  @include layout-align-for-name(gt-sm);
+  @include layout-for-name(gt-sm);
+  @include flex-properties-for-name(gt-sm);
+}
+
+// MEDIUM SCREEN
+@include at(md) {
+  .hide, .hide-gt-sm {
+    &:not(.show-gt-sm):not(.show-md):not(.show) {
+      display: none;
+    }
+  }
+  .hide-md:not(.show-md):not(.show) {
+    display: none;
+  }
+
+  @include flex-order-for-name(md);
+  @include layout-align-for-name(md);
+  @include layout-for-name(md);
+  @include flex-properties-for-name(md);
+}
+
+// BIGGER THAN MEDIUM SCREEN
+@include from(lg) {
+  @include flex-order-for-name(gt-md);
+  @include layout-align-for-name(gt-md);
+  @include layout-for-name(gt-md);
+  @include flex-properties-for-name(gt-md);
+  @include flex-order-for-name(lg);
+  @include layout-align-for-name(lg);
+  @include layout-for-name(lg);
+  @include flex-properties-for-name(lg);
+}
+// BIGGER THAN LARGE SCREEN
+@include  from(lg) {
+  .hide, .hide-gt-sm, .hide-gt-md {
+    &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
+      display: none;
+    }
+  }
+  .hide-lg:not(.show-lg):not(.show) {
+    display: none;
+  }
+}
+
+// BIGGER THAN X-LARGE SCREEN in needed
+@include from(xl) {
+  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
+    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
+      display: none;
+    }
+  }
+
+  @include flex-order-for-name(gt-lg);
+  @include layout-align-for-name(gt-lg);
+  @include layout-for-name(gt-lg);
+  @include flex-properties-for-name(gt-lg);
+}
+
+
 // Utility classes to compensate for the the xml mandatory attribute values
 // ------------------------------------------------------------------------
-$selectors: layout, layout-sm, layout-gt-sm, layout-md, layout-gt-md, layout-lg, layout-gt-lg,
-layout-align,layout-align-sm, layout-align-gt-sm, layout-align-md, layout-align-gt-md, layout-align-lg, layout-align-gt-lg,
-layout-padding,
-layout-margin,
-layout-wrap,
-layout-fill,
-flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-sm, hide-gt-sm, hide-md, hide-gt-md, hide-lg, hide-gt-lg, show, show-sm, show-gt-sm, show-md, show-gt-md, show-lg, show-gt-lg;
+$selectors: layout, layout-align, layout-padding, layout-margin, layout-wrap, layout-fill,
+flex, hide, show, show-sm;
 
 @include attributesToClasses($selectors);
+
 .md-flex {
   flex: 1 1 auto;
 }
 
-@for $i from 1 to 20 {
-  .cols-#{$i} {
-  max-width: grid-step($i);
-  flex: 1 1 auto;
-  }
-  .cols-#{$i}.spacer {
-    width: grid-step($i);
+// Generate responsive columns
+// ----------------------------------------------------------------------------
+@mixin responsive-columns($breakpoint, $query) {
+  $cols: map-get($base-grid-total-columns, $breakpoint);
+  $colWidth: ((100 / $cols) * 1vw);
+  // there must be a way to escape the rule but we didn't found-out
+  @if ($query == 'from') {
+    @include from($breakpoint)  {
+      @for $i from 1 to $cols {
+        .cols-#{$i}, {
+          max-width: ($colWidth * $i);
+          flex: 1 1 ($colWidth * $i);
+        }
+      }
+    }
+  } @else {
+    @include at($breakpoint) {
+      @for $i from 1 to $cols {
+        .cols-#{$i} {
+          max-width: ($colWidth * $i);
+          flex: 1 1 ($colWidth * $i);
+        }
+      }
+    }
   }
 }
+@include responsive-columns('md', 'at');
+@include responsive-columns('lg', 'from');
+
+// Utility to implement a specific one without extending
+// todo: include error handling
+
+@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
+    $cols: map-get($base-grid-total-columns, $breakpoint);
+    $colWidth: ((100 / $cols) * 1vw);
+      max-width: ($colWidth * $nb);
+      flex: $grow $shrink ($colWidth * $nb);
+}
 
 // Rows are included in padded containers, margins are used for vertical spacing
 // ----------------------------------------------------------------------------
@@ -33,3 +164,11 @@ flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-
   margin-right: 0;
   margin-left: 0;
 }
+// App container for responsive
+.sg-app-content {
+  @include to(sm) {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+}
diff --git a/UI/WebServerResources/scss/core/mixins.scss b/UI/WebServerResources/scss/core/mixins.scss
index 9ab3a703c..68502c2e5 100644
--- a/UI/WebServerResources/scss/core/mixins.scss
+++ b/UI/WebServerResources/scss/core/mixins.scss
@@ -22,9 +22,9 @@
 // Utility to compensate for the the xml mandatory attribute values
 // Creates classes extending layout attributes with no values
 // ----------------------------------------------------------------
-@mixin attributesToClasses($selectors) {
+@mixin attributesToClasses($selectors, $prefix: 'md') {
   @each $selector in $selectors {
-    .md-#{$selector} {
+    .#{$prefix}-#{$selector} {
 // no syntax error here
       @extend #{'['$selector']'} !optional
     }
diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography/typography.scss
index ce600e3c2..5f0940a0f 100644
--- a/UI/WebServerResources/scss/core/typography/typography.scss
+++ b/UI/WebServerResources/scss/core/typography/typography.scss
@@ -143,7 +143,7 @@
 $md-prefix : 'sg-md';
 /// @alias $md-prefix
 $md: $md-prefix;
-$sg-rem-Base-value: 16 !global;
+$sg-rem-Base-value: 16;
 $sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value
 
 $sg-md-typo-baseline: 4px;
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index de3e74ad8..9c6e22912 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -39,10 +39,12 @@ $touch-zone: $touch-zone-width;
 // Google specifies dimensions in grid pitch
 // This is a small utility function
 // Return dimension in px
+
 @function grid-step($nb) {
   @return ($pitch * $nb)
 }
 
+
 // Margins
 $layout-gutter-width:      ($baseline-grid * 2) !default;
 $md-base-margin: $layout-gutter-width;
@@ -61,9 +63,19 @@ $layout-breakpoint-lg:     1200px !default;
 $layout-breakpoint-md:     1024px;
 $layout-breakpoint-lg:     1280px;
 
+// We use column-based responsive grids inspired by Google's Material design metrics
+// ----------------------------------------------------------------------------
+
+$base-grid-total-columns: (
+  'sm': 1,
+  'md': 16,
+  'lg': 20,
+);
+
 // Passing to breakpoint-slicer
 $slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
-$slicer-breakpoint-names: 'phones' 'tablets' 'laptops' 'desktops';
+// todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix
+$slicer-breakpoint-names: 'sm' 'md' 'lg' 'xl';
 
 $media-pointer: (pointer fine);
 
@@ -100,7 +112,8 @@ $z-index-toast: 90 !default;
 $z-index-bottom-sheet: 70 !default;
 $z-index-sidenav: 60 !default;
 $z-index-backdrop: 50 !default;
-$z-index-fab: 20 !default;
+$z-index-fab: 20;
+$z-index-view: 10;
 
 // Easing Curves
 //--------------------------------------------
diff --git a/UI/WebServerResources/scss/views/ContactsUI.scss b/UI/WebServerResources/scss/views/ContactsUI.scss
index e6a32175d..175dfbc7c 100644
--- a/UI/WebServerResources/scss/views/ContactsUI.scss
+++ b/UI/WebServerResources/scss/views/ContactsUI.scss
@@ -3,6 +3,7 @@
 [id = "contactsList"] .sg-md-subheader {
   transform: translateY(-100%); // Compensate the container top-margin
 }
+
 // md is overqualifying, we have to do the same to override
 md-content[ui-view="card"] {
   margin: 0 auto;
@@ -11,7 +12,7 @@ md-content[ui-view="card"] {
 
 // md is overqualifying, we have to do the same to override
 md-card.viewer {
-  min-width: ($detailView-width - ($pitch * 2));
+
 }
 
 // Contact editor
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index a46574766..4b6206b34 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -29,8 +29,8 @@
   @extend .sg-md-title;
   margin: 0;
   margin-bottom: $line;
-  font-weight: $sg-font-regular;
   white-space: normal;
+  font-weight: $sg-font-regular;
 }
 
 .mailer_mailcontent {
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 47d49e84a..c3f31a60a 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -13,6 +13,7 @@
 .view[layout=row] {
   max-height: 100%;
 }
+
 // We make intensive use of the list/detail view pattern, here are some base
 // definitions for this
 // ----------------------------------------------------------------------------
@@ -32,38 +33,42 @@ $detailView-width: grid-step(8) !global;
 //}
 
 .view-list {
-  flex: 0 1 $listView-width;
   min-width: ($listView-width - ($pitch * 2));
+  @include at(md){
+    @include flex-col(md, 7, 1, 1);
+  }
+  @include from(lg) {
+    @include flex-col(lg, 6, 1, 0);
+  }
+  @include to(sm) {
+    width: 100%;
+    min-width: 100%;
+  }
 }
 
 .view-detail {
-  flex: 1 2 $detailView-width;
-  min-width: ($detailView-width - $pitch);
-  max-width: ($detailView-width + $pitch);
-  margin: 0 auto;
+  position: relative;
+  z-index: $z-index-view;
+  @include from(lg) {
+    @include flex-col(lg, 8, 2, 1);
+    margin: 0 auto $mg auto;
+  }
+  @include at(md) {
+    @include flex-col(md, 9);
+    margin: 0;
+  }
+  @include to(sm) {
+    width: 100%;
+    min-width: 100%;
+    background-color: sg-color($sogoPaper, 50);
+    transform: translateX(0);
+    transition: all 0.25s $swift-ease-in-out-timing-function;
+    &.sg-open {
+      transform: translateX(-100%);
+    }
+    [class *= md-whiteframe-] {
+      box-shadow: none;
+    }
+  }
 }
 
-
-[ui-view="message"] {
-
-  &.ng-enter {
-    border: 4px solid red;
-    transition: all 1s linear;
-
-    &.ng-enter-active {
-      border: 4px solid green;
-      transition: all 1s linear;
-    }
-  }
-
-  &.ng-leave {
-    border: 4px solid blue;
-    transition: all 1s linear;
-
-    &.ng-leave-active {
-      border: 4px solid blue;
-      transition: all 1s linear;
-      filter: opacity(0);
-    }
-  }
-}
\ No newline at end of file