(css) Improve display on mobile devices

UI/Templates/UIxPageFrame.wox

@@ -20,7 +20,7 @@
         <meta name="author" content="Inverse inc." />
         <meta name="robots" content="stop" />
         <meta name="build" var:content="buildDate" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
         <link href="mailto:support@inverse.ca" rev="made" />
         <link rel="shortcut icon" var:href="siteFavicon" type="image/x-icon" />
         <link type="text/css" rel="stylesheet" rsrc:href="css/styles.css" />
@@ -115,6 +115,7 @@
             <var:string value="productLocalizableStrings" const:escapeHTML="NO" />
           </script>
 
+          <!-- JAVASCRIPT IMPORTS -->
           <script type="text/javascript" rsrc:src="js/vendor/lodash.min.js"><!-- space --></script>
           <script type="text/javascript" rsrc:src="js/vendor/angular.min.js"><!-- space --></script>
           <script type="text/javascript" rsrc:src="js/vendor/angular-animate.min.js"><!-- space --></script>

UI/Templates/UIxTopnavToolbarTemplate.wox

@@ -5,7 +5,7 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
 
-  <div class="md-toolbar-tools sg-toolbar-group-1" layout="row">
+  <div class="sg-toolbar-group-1" layout="row">
     <md-button ng-click="toggleLeft()"
                class="md-icon-button"
                label:aria-label="Toggle Menu"

UI/WebServerResources/scss/views/_view.scss

@@ -12,28 +12,33 @@
   max-height: 100%;
 }
 
-body.popup {
+body {
-  .viewer {
+  @include to(xs) {
-    width: 100%;
+    overflow: hidden;
   }
-  .view-detail {
+
-    max-width: 100%;
+  &.popup {
-    @include from(sm) {
+    .viewer {
-      height: 100%;
-      position: absolute;
       width: 100%;
-      .sg-face, .sg-back {
+    }
-        > md-card {
+    .view-detail {
-          height: 100%;
+      max-width: 100%;
-          md-card-content {
+      @include from(sm) {
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        .sg-face, .sg-back {
+          > md-card {
             height: 100%;
+            md-card-content {
+              height: 100%;
+            }
           }
         }
       }
     }
   }
 }
-
 // We make intensive use of the list/detail view pattern, here are some base
 // definitions for this
 // ----------------------------------------------------------------------------
@@ -76,6 +81,10 @@ $detailView-width: grid-step(8) !global;
     }
   }
 
+  @include to(xs) {
+    width: 100%;
+    min-width: 100%;
+  }
   @include at(sm){
     @include flex-col(sm, 6, 1, 1);
     min-width: ($pitch * 3);
@@ -83,10 +92,6 @@ $detailView-width: grid-step(8) !global;
   @include from(md) {
     @include flex-col(md, 6, 1, 0);
   }
-  @include to(xs) {
-    width: 100%;
-    min-width: 100%;
-  }
 }
 
 .view-detail {
@@ -97,14 +102,65 @@ $detailView-width: grid-step(8) !global;
     overflow: hidden;
   }
 
+  // On small screens, the view slides from the right and takes all screen place.
+  // Expected Display Steps:
+  //  1. The class sg-close is used when there's no selection
+  //  2. An list item is selected (ui-router state changes):
+  //   a. sg-close is removed from view-detail
+  //   b. view-detail (transparent) slides over view-list
+  //   c. viewer is inserted into the DOM and slides inside view-detail
+  //  3. An list item is closed (ui-router state changes):
+  //   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(xs) {
+    background-color: transparent !important;
+    position: absolute;
+    //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;
+    //transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
+    &.sg-close {
+      display: none;
+      transform: translateX(100%);
+    }
+    &.ng-leave {
+      display: block;
+      transform: translateX(0);
+      &.ng-leave-active {
+        transform: translateX(100%);
+      }
+    }
+    &.ng-enter {
+      display: block;
+      transform: translateX(100%);
+      &.ng-enter-active {
+        transform: translateX(0);
+      }
+    }
+    .viewer {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      overflow-x: hidden;
+    }
+    md-card {
+      height: 100%;
+      margin: 0;
+    }
+  }
+
   @include at(sm) {
     @include flex-col(sm, 10);
     margin: 0;
   }
-  @include from(md) {
-    flex: 1 1 auto;
-    margin: 0;
-  }
 
   // No animation on medium to large screens
   @include from(sm) {
@@ -141,53 +197,9 @@ $detailView-width: grid-step(8) !global;
     }
   }
 
-  // On small screens, the view slides from the right and takes all screen place.
+  @include from(md) {
-  // Expected Display Steps:
+    flex: 1 1 auto;
-  //  1. The class sg-close is used when there's no selection
+    margin: 0;
-  //  2. An list item is selected (ui-router state changes):
-  //   a. sg-close is removed from view-detail
-  //   b. view-detail (transparent) slides over view-list
-  //   c. viewer is inserted into the DOM and slides inside view-detail
-  //  3. An list item is closed (ui-router state changes):
-  //   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(xs) {
-    display: block;
-    background-color: transparent !important;
-    position: absolute;
-    //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 {
-      transform: translateX(100%);
-    }
-    &.ng-leave.ng-leave-active {
-      transform: translateX(100%);
-    }
-    &.ng-enter {
-      transform: translateX(100%);
-      &.ng-enter-active {
-        transform: translateX(0);
-      }
-    }
-    .viewer {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      overflow-x: hidden;
-    }
-    md-card {
-      height: 100%;
-      margin: 0;
-    }
   }
 
   // Flippable view card, used to show raw source of cards and messages