[Mobile] IN PROGRESS: Significant refactor in mobile/_layout.scss

open #74
Made view-switcher visible when browsing via mobile;
Fixed class in browse.html markup from left-menu to left;
Moved object-browse-bar, top-bar classes from _controls into _layout;
Renamed and simplified menu widths in mobile _constants;
Really significant refactor of mobiles/_layout;
Tweaks in user-environ/_layout;
TO-DO: figure out why object-browse-bar flex styles not
working in mobile;

platform/commonUI/browse/res/templates/browse-object.html

@@ -26,15 +26,16 @@
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-        <!-- Temporarily, on mobile, the button bar is hidden-->
+        <div class="btn-bar right">
-        <div class="btn-bar right mobile-hide">
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
                                 ng-model="representation">
             </mct-representation>
+            <!-- Temporarily, on mobile, the action buttons are hidden-->
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
-                                parameters="{ category: 'view-control' }">
+                                parameters="{ category: 'view-control' }"
+                                class="mobile-hide">
             </mct-representation>
         </div>
     </div>

platform/commonUI/browse/res/templates/browse.html

@@ -24,7 +24,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
+            <div class='split-pane-component treeview pane mobile-pane left desktop-browse'>
                 <div class="holder abs l-mobile">
                     <div class='tree-holder abs mobile-tree-holder'>
                         <mct-representation key="'tree'"

platform/commonUI/general/res/css/theme-espresso.css

@@ -563,10 +563,10 @@ mct-container {
 /* line 88, ../sass/user-environ/_layout.scss */
 .bar.l-flex {
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: row nowrap; }
-  align-items: stretch; }
+  /* line 91, ../sass/user-environ/_layout.scss */
-  /* line 92, ../sass/user-environ/_layout.scss */
   .bar.l-flex .left {
+    background-color: rgba(0, 128, 0, 0.2);
     flex: 1 1 auto; }
 
 /* line 99, ../sass/user-environ/_layout.scss */
@@ -673,68 +673,65 @@ mct-container {
 /* line 209, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
-  max-width: 50%; }
+  max-width: 800px;
+  width: 25%; }
 
-/* line 218, ../sass/user-environ/_layout.scss */
+/* line 222, ../sass/user-environ/_layout.scss */
-.edit-mode .split-layout .split-pane-component.pane.right {
+.edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
-  min-width: 150px;
-  max-width: 50%; }
-  /* line 221, ../sass/user-environ/_layout.scss */
-  .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
   min-height: 50px;
   max-height: 80%; }
 
-/* line 229, ../sass/user-environ/_layout.scss */
+/* line 230, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 232, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 235, ../sass/user-environ/_layout.scss */
+    /* line 236, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+  /* line 241, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 34px;
     padding-right: 5px; }
-  /* line 248, ../sass/user-environ/_layout.scss */
+  /* line 249, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 259, ../sass/user-environ/_layout.scss */
+  /* line 260, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 263, ../sass/user-environ/_layout.scss */
+  /* line 264, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 271, ../sass/user-environ/_layout.scss */
+/* line 272, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 274, ../sass/user-environ/_layout.scss */
+  /* line 275, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 281, ../sass/user-environ/_layout.scss */
+/* line 282, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 284, ../sass/user-environ/_layout.scss */
+  /* line 285, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 288, ../sass/user-environ/_layout.scss */
+  /* line 289, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 290, ../sass/user-environ/_layout.scss */
+    /* line 291, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 299, ../sass/user-environ/_layout.scss */
+/* line 300, ../sass/user-environ/_layout.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
@@ -748,12 +745,12 @@ mct-container {
   line-height: 200%;
   vertical-align: top; }
 
-/* line 316, ../sass/user-environ/_layout.scss */
+/* line 317, ../sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 321, ../sass/user-environ/_layout.scss */
+/* line 322, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -786,86 +783,59 @@ mct-container {
     top: 0 !important;
     right: 0;
     bottom: 0;
-    left: 0; } }
+    left: 0; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 32, ../sass/mobile/_layout.scss */
-  /* line 35, ../sass/mobile/_layout.scss */
+  .mobile-pane.right-repr {
-  .user-environ .browse-area,
-  .user-environ .edit-area,
-  .user-environ .editor {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 25px; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 44, ../sass/mobile/_layout.scss */
-  .holder.l-mobile {
-    top: 10px !important;
-    right: 10px !important;
-    bottom: 10px !important;
-    left: 10px !important; } }
-
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 56, ../sass/mobile/_layout.scss */
-  .desktop-browse {
-    min-width: 150px;
-    max-width: 800px;
-    width: 25%; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 67, ../sass/mobile/_layout.scss */
-  .browse-hidetree {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 78, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 0;
-    right: 100% !important;
-    width: auto !important;
-    overflow-y: hidden;
-    overflow-x: hidden; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 91, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
     backface-visibility: hidden;
-    left: auto !important;
+    margin-left: 0 !important; }
-    width: 100% !important; } }
 
-/* line 100, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
-.mobile-tree-holder {
+  .user-environ .browse-area,
-  top: 30px; }
+  .user-environ .edit-area,
+  .user-environ .editor {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 25px; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 44, ../sass/mobile/_layout.scss */
-  /* line 109, ../sass/mobile/_layout.scss */
+  .holder.l-mobile {
+    top: 10px !important;
+    right: 10px !important;
+    bottom: 10px !important;
+    left: 10px !important; }
+
+  /* line 54, ../sass/mobile/_layout.scss */
+  .browse-hidetree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
+    /* line 58, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.left {
+      opacity: 0;
+      right: 100% !important;
+      width: auto !important;
+      overflow-y: hidden;
+      overflow-x: hidden; }
+    /* line 67, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.right-repr {
+      left: 0 !important; }
+
+  /* line 74, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: none; } }
+    user-select: none; }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 83, ../sass/mobile/_layout.scss */
-  /* line 120, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left {
-  .browse-showtree .mobile-pane.left-menu {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
       -webkit-transition-property: opacity;
@@ -885,84 +855,43 @@ mct-container {
       background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
       opacity: 1;
       display: block !important;
-    width: auto !important; } }
+      right: auto !important;
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+      width: 40% !important; }
-  /* line 120, ../sass/mobile/_layout.scss */
+    /* line 93, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 10% !important; } }
-@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 60% !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 500px !important; } }
-@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 70% !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 144, ../sass/mobile/_layout.scss */
     .browse-showtree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
+      left: 40% !important; }
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-    left: auto !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    left: 0 !important;
-    transform: translateX(90%); } }
-@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 60% !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 500px !important; } }
-@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 70% !important; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 103, ../sass/mobile/_layout.scss */
-  /* line 171, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 178, ../sass/mobile/_layout.scss */
+  /* line 113, ../sass/mobile/_layout.scss */
-  .object-browse-bar {
-    display: block !important;
-    left: 35px !important; }
-    /* line 183, ../sass/mobile/_layout.scss */
   .object-browse-bar .context-available {
     opacity: 1 !important; }
+  /* line 116, ../sass/mobile/_layout.scss */
+  .object-browse-bar .view-switcher {
+    margin-right: 0 !important; }
 
-  /* line 188, ../sass/mobile/_layout.scss */
+  /* line 121, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 192, ../sass/mobile/_layout.scss */
+  /* line 125, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 197, ../sass/mobile/_layout.scss */
+  /* line 130, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 202, ../sass/mobile/_layout.scss */
+  /* line 135, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -979,7 +908,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 207, ../sass/mobile/_layout.scss */
+  /* line 140, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -995,54 +924,18 @@ mct-container {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 1; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 149, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left {
+    width: 90% !important; }
+  /* line 152, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    left: 0 !important;
+    transform: translateX(90%); } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 214, ../sass/mobile/_layout.scss */
+  /* line 160, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
-
-/*
-
-.mobile-back-hide {
-    @include phoneandtablet {
-        pointer-events: none;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 0;
-    }
-}
-
-
-// Hides objects on phone and tablet
-.mobile-back-unhide {
-    @include phoneandtablet {
-        pointer-events: all;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 1;
-    }
-}
-
-
-// Hides objects only on the phone
-.phone-hide {
-    @include phone {
-        display: none;
-    }
-}
-
-.tree-holder {
-    @include phoneandtablet {
-        .tree-holder {
-            overflow-x: hidden !important;
-        }
-    }
-}
-.mobile-disable-select {
-    @include phoneandtablet {
-        .mobile-disable-select {
-            @include user-select(none);
-        }
-    }
-}
-*/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -2401,7 +2294,8 @@ a.l-btn span {
 	}
 }
 */
-/*.object-browse-bar .btn,
+/* line 177, ../sass/controls/_controls.scss */
+.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -2409,12 +2303,11 @@ a.l-btn span {
 .top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
-	$h: $btnToolbarH;
   display: inline-block;
-	font-size: $h * $btnFontSizeToH;
+  font-size: 11.25px;
   line-height: 200%;
-	vertical-align: top;
+  vertical-align: top; }
-}*/
+
 /* line 192, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -174,7 +174,7 @@
 }
 */
 
-/*.object-browse-bar .btn,
+.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -187,7 +187,7 @@
 	font-size: $h * $btnFontSizeToH;
 	line-height: 200%;
 	vertical-align: top;
-}*/
+}
 
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);

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

@@ -81,8 +81,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 10%;
+$proporMenuOnly: 90%;
-$phoneRepSizeLandscape: 60%;
+$proporMenuWithView: 40%;
-$tabletRepSizePortrait: 500px;
-$tabletRepSizeLandscape: 70%;
-$desktopMenuSize: 25%;

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

@@ -20,154 +20,86 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Wrapper of the entire 2 panes, only enacted on
+@include phoneandtablet {
-// phone and tablet. Also for the panes
+    // Wrapper of the entire 2 panes, only enacted on
-
+    // phone and tablet. Also for the panes
-.browse-wrapper,
+    .browse-wrapper,
-.mobile-pane {
+    .mobile-pane {
-    @include phoneandtablet {
         position: absolute;
         top: 0 !important; right: 0; bottom: 0; left: 0;
-        //white-space: nowrap; // CH CO
     }
-}
 
-.user-environ .browse-area,
+    .mobile-pane.right-repr {
-.user-environ .edit-area,
+        //@include test();
-.user-environ .editor {
+        @include slMenuTransitions;
-    @include phoneandtablet {
+        margin-left: 0 !important;
-        //@include test(red);
+    }
+
+    .user-environ .browse-area,
+    .user-environ .edit-area,
+    .user-environ .editor {
         top: 0; left: 0; right: 0; bottom: $ueFooterH;
     }
-}
 
-.holder.l-mobile {
+    .holder.l-mobile {
-    @include phoneandtablet {
-        //@include test();
         top: $bodyMargin !important;
         right: $bodyMargin !important;
         bottom: $bodyMargin !important;
         left: $bodyMargin !important;
     }
-}
 
-// Default views of the panels
+    // When the tree is hidden, these are the
-// if in desktop browser
+    // classes used for the left menu and the
-.desktop-browse {
+    // right representation.
-    @include desktop {
+    .browse-hidetree {
-        min-width: 150px;
-        max-width: 800px;
-        width: $desktopMenuSize;
-    }
-}
-
-// When the tree is hidden, these are the
-// classes used for the left menu and the
-// right representation.
-.browse-hidetree {
-    // NOTE: DISABLED SELECTION
-    // Selection disabled in both panes
-    // causing cut/copy/paste menu to
-    // not appear. Should me moved in
-    // future to properly work
-    @include phoneandtablet {
         @include user-select(none);
-    }
         // Sets the left tree menu when the tree
         // is hidden.
-    .mobile-pane.left-menu {
+        .mobile-pane.left {
-        @include phoneandtablet {
-            @include trans-prop-nice(opacity, .4s);
             opacity: 0;
             right: 100% !important;
             width: auto !important;
             overflow-y: hidden;
             overflow-x: hidden;
         }
-    }
-
         // Sets the right represenation when
         // the tree is hidden.
         .mobile-pane.right-repr {
-        @include phoneandtablet {
+            //@include slMenuTransitions;
-            @include slMenuTransitions;
+            left: 0 !important;
-            left: auto !important;
+            //width: 100% !important;
-            width: 100% !important;
         }
     }
-}
 
-.mobile-tree-holder {
+    .browse-showtree {
-    top: 30px;
-}
-
-// When the tree is shown, these are
-// the classes used for the left menu
-// and the right menu (for each device &
-// orientation combination, separate
-// parameters are used)
-.browse-showtree {
         // NOTE: DISABLED SELECTION
         // Selection disabled in both panes
         // causing cut/copy/paste menu to
         // not appear. Should me moved in
         // future to properly work
-    @include phoneandtablet {
         @include user-select(none);
-    }
+
-    // Sets the left tree menu when the tree
+        // Sets the left tree menu when the tree is shown.
-    // is shown.
+        .mobile-pane.left {
-    .mobile-pane.left-menu {
-        @include phoneandtablet {
             @include trans-prop-nice(opacity, .4s);
             @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
             display: block !important;
-            width: auto !important;
+            //width: auto !important; // CH CO
-        }
+            right: auto !important;
-        // On both phones and tablets, the amount of
+            width: $proporMenuWithView !important;
-        // space allowed for the right pane is specified
-        @include phonePortrait {
-            right: $phoneRepSizePortrait !important;
-        }
-        @include phoneLandscape {
-            right: $phoneRepSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            right: $tabletRepSizePortrait !important;
-        }
-        @include tabletLandscape {
-            right: $tabletRepSizeLandscape !important;
-        }
         }
         // Sets the right representation when the tree is shown.
         .mobile-pane.right-repr {
-        @include phoneandtablet {
+            //@include slMenuTransitions; CH MOVED
-            @include slMenuTransitions;
+            left: $proporMenuWithView !important;
-            left: auto !important;
+            //width: auto !important;
-        }
+
-        // On both phones and tablets, the width of
+            //left: 0 !important;
-        // the right pane is specified
+            //transform: translateX($proporMenuWithView);
-        @include phonePortrait {
+        }
-            //width: $phoneRepSizePortrait !important;
+    }
-            left: 0 !important;
-            transform: translateX(100% - $phoneRepSizePortrait);
-        }
-        @include phoneLandscape {
-            width: $phoneRepSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            //@include test(green);
-            width: $tabletRepSizePortrait !important;
-        }
-        @include tabletLandscape {
-            //@include test(orange);
-            width: $tabletRepSizeLandscape !important;
-        }
-    }
-}
 
-@include phoneandtablet {
     .mobile-menu-icon {
         font-size: 110%;
         position: absolute;
@@ -177,12 +109,13 @@
 
     .object-browse-bar {
         //@include test();
-        display: block !important;
+        //left: 35px !important; // TEMP
-        //font-size: 0.95em;
-        left: 35px !important;
         .context-available {
             opacity: 1 !important;
         }
+        .view-switcher {
+            margin-right: 0 !important;
+        }
     }
 
     .tree-holder {
@@ -211,52 +144,20 @@
     }
 }
 
-.desktop-hide {
+@include phonePortrait {
-    @include desktop {
+    .browse-showtree {
+        .mobile-pane.left {
+            width: $proporMenuOnly !important;
+        }
+        .mobile-pane.right-repr {
+            left: 0 !important;
+            transform: translateX($proporMenuOnly);
+        }
+    }
+}
+
+@include desktop {
+    .desktop-hide {
         display: none;
     }
 }
-
-/*
-
-.mobile-back-hide {
-    @include phoneandtablet {
-        pointer-events: none;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 0;
-    }
-}
-
-
-// Hides objects on phone and tablet
-.mobile-back-unhide {
-    @include phoneandtablet {
-        pointer-events: all;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 1;
-    }
-}
-
-
-// Hides objects only on the phone
-.phone-hide {
-    @include phone {
-        display: none;
-    }
-}
-
-.tree-holder {
-    @include phoneandtablet {
-        .tree-holder {
-            overflow-x: hidden !important;
-        }
-    }
-}
-.mobile-disable-select {
-    @include phoneandtablet {
-        .mobile-disable-select {
-            @include user-select(none);
-        }
-    }
-}
-*/

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -88,8 +88,8 @@
     &.l-flex {
         display: flex;
         flex-flow: row nowrap;
-        align-items: stretch;
         .left {
+            @include test(green);
             flex: 1 1 auto;
         }
     }
@@ -208,7 +208,8 @@
     .split-layout {
         .split-pane-component.pane.left {
             min-width: 150px;
-            max-width: 50%;
+            max-width: 800px;
+            width: $ueBrowseLeftPaneW;
         }
     }
 }
@@ -216,8 +217,8 @@
 .edit-mode {
     .split-layout {
         .split-pane-component.pane.right {
-            min-width: 150px;
+            //min-width: 150px;
-            max-width: 50%;
+            //max-width: 50%;
             .split-pane-component.pane.bottom {
                 min-height: 50px;
                 max-height: 80%;