Improve toolbars on small screens

- normalized toolbars in message viewer, contact viewer and contact
  editor;
- lower width of sidenav on medium screens;
- reworked display of message headers

UI/WebServerResources/scss/components/button/button.scss

@@ -108,7 +108,7 @@ md-list md-list-item button.md-button.sg-icon-button {
 .sg-icon-bar--vertical {
   display: flex;
   flex-direction: column;
-  margin: 0 ($mg * -1) 0 $mg;
+  //margin: 0 ($mg * -1) 0 $mg;
   font-size: $sg-font-size-3;
   align-items: center;
   // Containers have padding, we compensate to align according to specs

UI/WebServerResources/scss/components/icon/icon.scss

@@ -123,11 +123,11 @@ md-icon {
 }
 
 // Message flag
-.sg-msg-flag {
-  md-icon {
-    color: sg-color($sogoGreen, 50) !important;
-    &.flagged {
-      color: sg-color($sogoBlue, 600) !important;
-    }
-  }
-}
+//.sg-msg-flag {
+//  md-icon {
+//    color: sg-color($sogoGreen, 50) !important;
+//    &.flagged {
+//      color: sg-color($sogoBlue, 600) !important;
+//    }
+//  }
+//}

UI/WebServerResources/scss/components/list/list.scss

@@ -45,8 +45,11 @@ md-list-item {
   padding: $layout-gutter-width;
   width: $sg-md-grid-pitch + $baseline-grid;
   height: $sg-md-grid-pitch + $baseline-grid;
-  line-height: $sg-md-grid-pitch + $baseline-grid;
+  //line-height: $sg-md-grid-pitch + $baseline-grid;
   background-clip: content-box;
+  md-icon {
+    font-size: $sg-md-grid-pitch + $baseline-grid - 2 * $layout-gutter-width;
+  }
 }
 .md-tile-right {
   margin-right: -$layout-gutter-width;

UI/WebServerResources/scss/components/toolbar/toolbar.scss

@@ -1,7 +1,7 @@
 /// toolbar.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
-$toolbar-tools-height: 100%;
+//$toolbar-tools-height: 100%;
 $toolbar-height: $pitch;
-$toolbar-medium-tall-height: 88px !default;
+//$toolbar-medium-tall-height: 88px !default;
 $toolbar-tall-height: ($toolbar-height * 2);
 $toolbar-indent-margin: $pitch;
 $toolbar-padding: $mg;
@@ -18,18 +18,34 @@ md-toolbar {
   font-size: 1em !important;
   background-image: url("../img/felt-transp.png");
   background-blend-mode: luminosity;
-  box-shadow: $whiteframe-shadow-z1;
+  //box-shadow: $whiteframe-shadow-z1;
 }
 
 .md-toolbar-tools {
-  padding: 0;
+  //padding: 0;
   // dirty fix to override angular-material botchy typography
   font-size: 1em !important;
 }
 
+md-toolbar,
+.md-toolbar-tools {
+  // Animate the first icon button of a "secondary" toolbar
+  &.sg-toolbar-secondary {
+    > .md-toolbar-tools > .sg-icon-button:first-child,
+    > .sg-icon-button:first-child {
+      transition: $swift-ease-in;
+      transform: translateX(0px);
+    }
+    &.ng-hide > .md-toolbar-tools > .sg-icon-button:first-child,
+    &.ng-hide > .sg-icon-button:first-child {
+      transform: translateX(-$touch-zone-width);
+    }
+  }
+}
+
 // angular-material is overspecifying so we are
 .md-toolbar-tools[layout-align="start start"] {
-  align-items: flex-start;
+  //align-items: flex-start;
 }
 
 .md-toolbar-tools.md-toolbar-tools-top {
@@ -50,14 +66,14 @@ header {
 }
 hgroup {
   align-items: center;
-  flex: 1 1 auto;
+  //flex: 1 1 auto;
   &h3 {
     margin-bottom: 0;
   }
 }
 .toolbar-main .md-button {
-  color: inherit;
-  font-size: sg-size(headline);
+//  color: inherit;
+//  font-size: sg-size(headline);
 }
 
 .sg-toolbar-group {
@@ -65,6 +81,9 @@ hgroup {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+//  & > .sg-icon-button:first-child {
+//    padding-left: 0;
+//  }
   &-1 {
     order: 1;
     max-width: $listView-width;

UI/WebServerResources/scss/views/MailerUI.scss

@@ -39,8 +39,10 @@
 }
 
 .msg-date {
+  font-size: $sg-font-size-2;
   text-align: right;
-  margin-bottom: 10px;
+//  margin-bottom: 10px;
+//  margin-bottom: ($mg/2);
 }
 
 .msg-attachment-image {

UI/WebServerResources/scss/views/_view.scss

@@ -38,7 +38,7 @@ $detailView-width: grid-step(8) !global;
   z-index: ($z-index-view - 1);
   min-width: ($listView-width - ($pitch * 2));
   @include at(md){
-    @include flex-col(md, 7, 1, 1);
+    @include flex-col(md, 6, 1, 1);
     min-width: ($pitch * 3);
   }
   @include from(lg) {
@@ -52,26 +52,30 @@ $detailView-width: grid-step(8) !global;
 
 .view-detail {
   z-index: $z-index-view;
-  overflow-x: hidden;
+  //overflow-x: hidden;
+  overflow: hidden;
   @include at(md) {
-    @include flex-col(md, 9);
+    @include flex-col(md, 10);
     margin: 0;
-
   }
   @include from(lg) {
     @include flex-col(lg, 10, 2, 1);
     margin: 0;
-
   }
 
   // No animation on medium to large screens
   @include from(md) {
+    .md-static {
+      position: static;
+    }
     .viewer {
       position: absolute;
-      top: 0;
+      top: $toolbar-height;
       left: 0;
       right: 0;
+      bottom: 0;
       max-width: 100%;
+      overflow-y: auto;
 //      transform: translate3d(0, 0, 0);
 //      transition: all 0.5s $swift-ease-in-out-timing-function;
 //      &.ng-enter {
@@ -109,10 +113,12 @@ $detailView-width: grid-step(8) !global;
     display: block;
     background-color: transparent !important;
     position: absolute;
-    top: $toolbar-tall-height;
+    //top: $toolbar-tall-height;
+    top: 0;
     bottom: 0;
     left: 0;
     right: 0;
+    z-index: ($z-index-toolbar + 1);
     transform: translateX(0);
     transition: $swift-ease-in-out;
     &.sg-close {
@@ -133,6 +139,7 @@ $detailView-width: grid-step(8) !global;
       bottom: 0;
       left: 0;
       right: 0;
+      overflow-x: hidden;
     }
   }
 }