(css) Adapt to new breakpoints and layout-align

UI/WebServerResources/scss/components/sidenav/sidenav.scss

@@ -6,8 +6,8 @@ $sidenav-min-space: $pitch;
 
 md-sidenav {
   &.md-locked-open {
-    @include from(lg) {
-      @include flex-col(lg, 4, 1, 0);
+    @include from(md) {
+      @include flex-col(md, 4, 1, 0);
       // Custom representation of a closed sidenav where the sidenav is pushed to the left;
       // Used in in "locked open" mode.
       &.sg-closed.md-sidenav-left {

UI/WebServerResources/scss/core/variables.scss

@@ -62,9 +62,10 @@ $touch-zone: $touch-zone-width;
 // angular-material share breakpoint values between sass and js files (/core/constant.js)
 // we might consider using a sass library to import values as json single source for both
 
-$layout-breakpoint-sm:     600px !default;
-$layout-breakpoint-md:     960px !default;
-$layout-breakpoint-lg:     1200px !default;
+$layout-breakpoint-xs:     600px !default;
+$layout-breakpoint-sm:     960px !default;
+$layout-breakpoint-md:     1280px !default;
+$layout-breakpoint-lg:     1920px !default;
 $layout-gutter-width:      ($baseline-grid * 2) !default;
 
 // Margins
@@ -81,15 +82,16 @@ $layout-breakpoint-lg:     1280px;
 // ----------------------------------------------------------------------------
 
 $base-grid-total-columns: (
-  'sm': 1,
-  'md': 16,
+  'xs': 1,
+  'sm': 16,
+  'md': 20,
   'lg': 20,
 );
 
 // Passing to breakpoint-slicer
-$slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
+$slicer-breakpoints: 0 $layout-breakpoint-xs $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
 // todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix
-$slicer-breakpoint-names: 'sm' 'md' 'lg' 'xl';
+$slicer-breakpoint-names: 'xs' 'sm' 'md' 'lg' 'xl';
 
 $media-pointer: (pointer fine);
 

UI/WebServerResources/scss/views/LoginUI.scss

@@ -2,7 +2,7 @@
 
 [ui-view="login"] {
   md-content {
-    @include to(sm) {
+    @include to(xs) {
       [id=logo] {
         text-align: center;
         img {
@@ -10,7 +10,7 @@
         }
       }
     }
-    @include from(md) {
+    @include from(sm) {
       &.ng-hide {
         [id=logo] {
           opacity: 0;

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -20,12 +20,12 @@ $block_radius: 3px;
 
   .view-list {
     min-width: ($listView-width - ($pitch * 2));
-    @include at(md){
-      @include flex-col(md, 6, 1, 1);
+    @include at(sm){
+      @include flex-col(sm, 6, 1, 1);
       min-width: ($pitch * 3);
     }
-    @include from(lg) {
-      @include flex-col(lg, 5, 1, 0);
+    @include from(md) {
+      @include flex-col(md, 5, 1, 0);
     }
 
     // The color chip is smaller; adjust the "selected" icon accordingly
@@ -40,11 +40,11 @@ $block_radius: 3px;
   }
 
   .view-detail {
-    @include at(md) {
-      @include flex-col(md, 10);
+    @include at(sm) {
+      @include flex-col(sm, 10);
     }
-    @include from(lg) {
-      @include flex-col(lg, 11, 1, 1);
+    @include from(md) {
+      @include flex-col(md, 11, 1, 1);
     }
   }
 

UI/WebServerResources/scss/views/_view.scss

@@ -19,7 +19,7 @@ body.popup {
   .view-detail {
     max-width: 100%;
   }
-  @include from(md) {
+  @include from(sm) {
     [class|="view"] {
       position: static;
     }
@@ -57,14 +57,14 @@ $detailView-width: grid-step(8) !global;
       margin: 0;
     }
   }
-  @include at(md){
-    @include flex-col(md, 6, 1, 1);
+  @include at(sm){
+    @include flex-col(sm, 6, 1, 1);
     min-width: ($pitch * 3);
   }
-  @include from(lg) {
-    @include flex-col(lg, 6, 1, 0);
+  @include from(md) {
+    @include flex-col(md, 6, 1, 0);
   }
-  @include to(sm) {
+  @include to(xs) {
     width: 100%;
     min-width: 100%;
   }
@@ -74,17 +74,21 @@ $detailView-width: grid-step(8) !global;
   z-index: $z-index-view;
   //overflow-x: hidden;
   overflow: hidden;
-  @include at(md) {
-    @include flex-col(md, 10);
+  md-card {
+    overflow: hidden;
+  }
+
+  @include at(sm) {
+    @include flex-col(sm, 10);
     margin: 0;
   }
-  @include from(lg) {
+  @include from(md) {
     flex: 1 1 auto;
     margin: 0;
   }
 
   // No animation on medium to large screens
-  @include from(md) {
+  @include from(sm) {
     .md-static {
       position: static;
     }
@@ -129,7 +133,7 @@ $detailView-width: grid-step(8) !global;
   //   a. viewer slides out of view-detail and is removed from the DOM
   //   b. view-detail (transparent) slides outside view-list
   //   c. sg-close is added to view-detail
-  @include to(sm) {
+  @include to(xs) {
     display: block;
     background-color: transparent !important;
     position: absolute;