Fix breakpoints in scss and js (in await for a more elegant solution)

UI/WebServerResources/scss/app.scss

@@ -1,83 +0,0 @@
-//@import "settings";
-//@import "foundation";
-
-// Or selectively include components
-// @import
-//   "foundation/components/accordion",
-//   "foundation/components/alert-boxes",
-//   "foundation/components/block-grid",
-//   "foundation/components/breadcrumbs",
-//   "foundation/components/button-groups",
-//   "foundation/components/buttons",
-//   "foundation/components/clearing",
-//   "foundation/components/dropdown",
-//   "foundation/components/dropdown-buttons",
-//   "foundation/components/flex-video",
-//   "foundation/components/forms",
-//   "foundation/components/grid",
-//   "foundation/components/inline-lists",
-//   "foundation/components/joyride",
-//   "foundation/components/keystrokes",
-//   "foundation/components/labels",
-//   "foundation/components/magellan",
-//   "foundation/components/orbit",
-//   "foundation/components/pagination",
-//   "foundation/components/panels",
-//   "foundation/components/pricing-tables",
-//   "foundation/components/progress-bars",
-//   "foundation/components/reveal",
-//   "foundation/components/side-nav",
-//   "foundation/components/split-buttons",
-//   "foundation/components/sub-nav",
-//   "foundation/components/switch",
-//   "foundation/components/tables",
-//   "foundation/components/tabs",
-//   "foundation/components/thumbs",
-//   "foundation/components/tooltips",
-//   "foundation/components/top-bar",
-//   "foundation/components/type",
-//   "foundation/components/offcanvas",
-//   "foundation/components/visibility";
-
-// http://docs.angularjs.org/api/ng/directive/ngCloak
-[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
-  display: none !important;
-}
-
-.animate-show {
-  -webkit-transition:all linear 0.5s;
-  transition:all linear 0.5s;
-  line-height:20px;
-  opacity:1;
-  padding:10px;
-  border:1px solid black;
-  background:white;
-}
- 
-.animate-show.ng-hide-add,
-.animate-show.ng-hide-remove {
-  display:block!important;
-}
- 
-.animate-show.ng-hide {
-  line-height:0;
-  opacity:0;
-  padding:0 10px;
-}
-
-.reveal-modal {
-    .close-reveal-modal {
-        &:hover {
-            color: #aaa;
-        }
-    }
-}
-
-
-._selected {
-    //background-color: #ddd !important;
-    //border: 2px solid #ddd !important;
-    /* -webkit-border-radius: 2px; */
-    /*    -moz-border-radius: 2px; */
-    /*         border-radius: 2px; */
-}

UI/WebServerResources/scss/core/typography/typography.scss

@@ -130,7 +130,7 @@
 }
 
 // Google's Material design specs are in 'sp' or 'dp' which are not css units
-// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels'
+// 'dp' is 'density independant pixels' and 'sp' is 'scale-independent pixels'
 // (same as dp, but will be scaled by the user's font size preference)
 // Android gives a 160dpi  base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px'
 // We define a scaling factor in case we need to adjust

UI/WebServerResources/scss/core/variables.scss

@@ -17,9 +17,6 @@ $primary-color: sg-color($sogoBlue, 300) !default;
 //$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
 $foreground-primary-color: rgba($primary-color, 0.87);//override
 
-$bottombar-color: #212121;
-
-
 
 // Layout and grid
 // ------------------------------
@@ -56,6 +53,11 @@ $layout-breakpoint-sm:     600px !default;
 $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
 
+// Redefinitions
+// $layout-breakpoint-sm:     360px;
+$layout-breakpoint-md:     1025px;
+$layout-breakpoint-lg:     1280px;
+
 // App bar variables
 $app-bar-height: $sg-md-grid-pitch;
 

UI/WebServerResources/scss/styles.scss

@@ -57,7 +57,7 @@
 @import 'components/textField/textField';
 @import 'components/toast/toast';
 @import 'components/toolbar/toolbar';
-@import 'components/bottombar/bottombar';
+// @import 'components/bottombar/bottombar';
 @import 'components/tooltip/tooltip';
 @import 'components/whiteframe/whiteframe';
 

UI/WebServerResources/scss/views/ContactsUI.scss

@@ -1,7 +1,8 @@
 /*! ContactUI.scss */
 
 [id ="contactsList"] {
-  flex: 0 0 $listView-width;
+  flex: 0 1 $listView-width;
+  min-width: ($listView-width - ($pitch * 2));
 }
 
 [id = "contactsList"] .sg-md-subheader {
@@ -9,12 +10,14 @@
 }
 // md is overqualifying, we have to do the same to override
 md-content[ui-view="card"] {
+  margin: 0 auto;
   background-color: sg-color($sogoPaper, 200);
 }
 
 // md is overqualifying, we have to do the same to override
 md-card.viewer {
-  width: $detailView-width;
+  flex: 0 2 $detailView-width;
+  min-width: ($detailView-width - ($pitch * 2));
 }
 
 // Contact editor

UI/WebServerResources/scss/views/MailerUI.scss

@@ -4,7 +4,9 @@
 
 }
 [ui-view="message"] {
-  flex: 0 0 $detailView-width;
+  flex: 1 2 $detailView-width;
+  min-width: ($detailView-width - $pitch);
+  max-width: ($detailView-width + $pitch);
   margin: 0 auto;
 }