[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/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);
+        }
     }
 }
+*/