[Mobile] IN PROGRESS: Menu hide/show fixes; font-size tweaking

open #74
Changed .right-repr to use translateX in phone portrait mode;
font-size tweaking;
Refactored css organization in mobile/_layout.scss;

platform/commonUI/general/res/sass/_main.scss

@@ -48,7 +48,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-@import "mobile/controls/menus";
+//@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";

platform/commonUI/general/res/sass/_mixins.scss

@@ -368,6 +368,7 @@
 }
 
 @mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+    @inlude box-sizing(border-box);
     border: 1px dotted rgba($c, $a);
 }
 

platform/commonUI/general/res/sass/mobile/_constants.scss

@@ -81,7 +81,7 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 19px;
+$phoneRepSizePortrait: 10%;
 $phoneRepSizeLandscape: 60%;
 $tabletRepSizePortrait: 500px;
 $tabletRepSizeLandscape: 70%;

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -149,7 +149,9 @@
         // On both phones and tablets, the width of
         // the right pane is specified
         @include phonePortrait {
-            width: $phoneRepSizePortrait !important;
+            //width: $phoneRepSizePortrait !important;
+            left: 0 !important;
+            transform: translateX(100% - $phoneRepSizePortrait);
         }
         @include phoneLandscape {
             width: $phoneRepSizeLandscape !important;
@@ -165,24 +167,48 @@
     }
 }
 
-.mobile-menu-icon {
-    position: absolute;
-    top: $bodyMargin; left: $bodyMargin;
-}
+@include phoneandtablet {
+    .mobile-menu-icon {
+        font-size: 110%;
+        position: absolute;
+        top: $bodyMargin + 2;
+        left: $bodyMargin;
+    }
 
-// Object header must be moved
-// over to make space for the 
-// hamburger icon
-.object-header {
-    @include phoneandtablet {
-        position: relative;
-        left: 44px;        
-        .label {
-            .context-available {
-                opacity: 1 !important;
-            }
+    .object-browse-bar {
+        //@include test();
+        display: block !important;
+        //font-size: 0.95em;
+        left: 35px !important;
+        .context-available {
+            opacity: 1 !important;
         }
     }
+
+    .tree-holder {
+        overflow-x: hidden !important;
+    }
+
+    .mobile-disable-select {
+        @include user-select(none);
+    }
+
+    // Hides objects on phone and tablet
+    .mobile-hide,
+    .mobile-hide-important {
+        display: none !important;
+    }
+
+    .mobile-back-hide {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+    .mobile-back-unhide {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
+    }
 }
 
 .desktop-hide {
@@ -191,18 +217,7 @@
     }
 }
 
-// Hides objects on phone and tablet
-.mobile-hide {
-    @include phoneandtablet {
-        display: none;
-    }
-}
-
-.mobile-important-hide {
-    @include phoneandtablet {
-        display: none !important;
-    }
-}
+/*
 
 .mobile-back-hide {
     @include phoneandtablet {
@@ -212,6 +227,7 @@
     }
 }
 
+
 // Hides objects on phone and tablet
 .mobile-back-unhide {
     @include phoneandtablet {
@@ -221,6 +237,7 @@
     }
 }
 
+
 // Hides objects only on the phone
 .phone-hide {
     @include phone {
@@ -230,11 +247,16 @@
 
 .tree-holder {
     @include phoneandtablet {
-        overflow-x: hidden !important;
+        .tree-holder {
+            overflow-x: hidden !important;
+        }
     }
 }
 .mobile-disable-select {
     @include phoneandtablet {
-        @include user-select(none);
+        .mobile-disable-select {
+            @include user-select(none);
+        }
     }
 }
+*/

platform/commonUI/general/res/sass/mobile/_tree.scss

@@ -20,10 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-
-ul.tree {
-    // Only applies to phones and tablets
-    @include phoneandtablet {
+@include phoneandtablet {
+    ul.tree {
         //@include menuUlReset();
         li {
             //border-top: 1px solid $colorInteriorBorder; // TEMP
@@ -39,7 +37,7 @@ ul.tree {
                     right: 0px;
                     width: $mobileTreeRightArrowW;
                     text-align: center;
-                }                   
+                }
 
                 .label {
                     // Designates the starting left margin
@@ -47,13 +45,14 @@ ul.tree {
                     // Also adds right space for selection button
                     left: 0;
                     right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-                    font-size: 1.2em;
+                    font-size: 1.1em;
+                    //font-size: 1.2em; // CH CO
                     .type-icon {
                         @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
                     }
                     .title-label {
                     }
-                }             
+                }
             }
         }
 

platform/commonUI/general/res/sass/mobile/controls/_menus.scss

@@ -30,5 +30,5 @@
     }
     @include desktop {
         display: none;
-    }       
+    }
 }

platform/commonUI/general/res/sass/user-environ/_object-browse.scss

@@ -21,6 +21,7 @@
  *****************************************************************************/
 .object-browse-bar {
     @include absPosDefault();
+    @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
     white-space: nowrap;