From e9314898d2316a742db668b3559d7f23cf935c5a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 11:50:55 -0700
Subject: [PATCH] [Mobile] Portrait & Landsc.

Specifies amounts based on phone and tablet's
orientation. Not tested for the actual device,
but emulator. Also currently makes the create
button appear/disappear instead of smoothly sliding.
---
 .../commonUI/browse/res/templates/browse.html |   2 +-
 .../general/res/css/theme-espresso.css        | 132 ++++++++++--------
 .../general/res/sass/mobile/_layout.scss      |  82 ++++++-----
 .../general/res/sass/mobile/_mixins.scss      |  11 ++
 4 files changed, 132 insertions(+), 95 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 0d6ee32bac..5428086f20 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,7 +31,7 @@
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
                 <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
-                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    <mct-representation key="'create-button'" mct-object="navigatedObject" class="createBtnPos">
                     </mct-representation>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index d503687f0f..9325a2c927 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -749,6 +749,10 @@ mct-container {
   /* line 25, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .pane-special {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     position: absolute;
     left: 0;
     top: 0;
@@ -758,39 +762,26 @@ mct-container {
     height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 49, ../sass/mobile/_layout.scss */
+  /* line 51, ../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) {
-  /* line 58, ../sass/mobile/_layout.scss */
+@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 60, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    display: none !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), 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 58, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: none !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) {
-  /* line 69, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    width: auto !important;
-    left: 0px !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), 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 69, ../sass/mobile/_layout.scss */
+    width: 0px !important;
+    right: auto !important; }
+    /* line 66, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane-special.left .createBtnPos {
+      display: 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 72, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -799,8 +790,8 @@ mct-container {
     width: auto !important;
     left: 0px !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) {
-  /* line 84, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -809,18 +800,38 @@ mct-container {
     display: block !important;
     width: 80% !important;
     right: auto !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), 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 84, ../sass/mobile/_layout.scss */
+@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 82, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     display: block !important;
-    width: 60% !important;
+    width: 30% !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), 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 99, ../sass/mobile/_layout.scss */
+@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 82, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 30% !important;
+    right: auto !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 82, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 25% !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) {
+  /* line 109, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -828,26 +839,40 @@ mct-container {
     transition-duration: 0.2s;
     left: 80% !important;
     width: auto !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), 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 99, ../sass/mobile/_layout.scss */
+@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 109, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: 60% !important;
+    left: 30% !important;
+    width: auto !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 109, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 30% !important;
+    width: auto !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 109, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 25% !important;
     width: 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), 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 113, ../sass/mobile/_layout.scss */
-  .mobile-splitter {
-    display: none; } }
-@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), 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 113, ../sass/mobile/_layout.scss */
+@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 133, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 124, ../sass/mobile/_layout.scss */
+/* line 141, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -855,44 +880,35 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
 
-@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) {
-  /* line 129, ../sass/mobile/_layout.scss */
-  .object-header-mobile {
-    position: relative;
-    left: 30px; } }
-@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), 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 129, ../sass/mobile/_layout.scss */
+@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 146, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 140, ../sass/mobile/_layout.scss */
+/* line 153, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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) {
-    /* line 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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), 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 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: 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) {
-  /* line 154, ../sass/mobile/_layout.scss */
-  .mobile-hide {
-    display: none; } }
-@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), 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 154, ../sass/mobile/_layout.scss */
+@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 167, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: 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) {
-  /* line 163, ../sass/mobile/_layout.scss */
+  /* line 173, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index e36e825ca0..d5364ae6b2 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,7 +24,6 @@
 
 .browse-wrapper,
 .pane-special {
-//    @include transition-duration(.2s);
     @include phone {
         position: absolute;
         left: 0; top: 0;
@@ -33,6 +32,7 @@
         height: 100%;
     }
     @include tablet {
+        @include transition-duration(.2s);
         position: absolute;
         left: 0; top: 0;
         right: 0; left: 0;
@@ -41,8 +41,10 @@
     }
 }
 
-$phoneMenuSize: 80%;
-$tabletMenuSize: 60%;
+$phoneMenuSizePortrait: 80%;
+$phoneMenuSizeLandscape: 30%;
+$tabletMenuSizePortrait: 40%;
+$tabletMenuSizeLandscape: 25%;
 $desktopMenuSize: 25%;
 
 
@@ -56,23 +58,19 @@ $desktopMenuSize: 25%;
 
 .browse-hidetree {
     .pane-special.left {
-        @include phone {
+        @include phoneandtablet {
             @include transition-duration(.2s);
-            display: none !important;
-        }
-        @include tablet {
-            @include transition-duration(.2s);
-            display: none !important;
+            width: 0px !important;
+            right: auto !important;
+            
+            .createBtnPos {
+                display: none;
+            }            
         }
     }
 
     .pane-special.right {       
-        @include phone {
-            @include transition-duration(.2s);
-            width: auto !important;
-            left: 0px !important;
-        }
-        @include tablet {
+        @include phoneandtablet {
             @include transition-duration(.2s);
             width: auto !important;
             left: 0px !important;
@@ -82,39 +80,58 @@ $desktopMenuSize: 25%;
 
 .browse-showtree {
     .pane-special.left {      
-        @include phone {
+        @include phonePortrait {
             @include transition-duration(.2s);
             display: block !important;
-            width: $phoneMenuSize !important;
+            width: $phoneMenuSizePortrait !important;
             right: auto !important;
         }
-        @include tablet {
+        @include phoneLandscape {
             @include transition-duration(.2s);
             display: block !important;
-            width: $tabletMenuSize !important;
+            width: $phoneMenuSizeLandscape !important;
+            right: auto !important;
+        }
+        @include tabletPortrait {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSizePortrait !important;
+            right: auto !important;
+        }
+        @include tabletLandscape {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSizeLandscape !important;
             right: auto !important;
         }
     }
     
     .pane-special.right {
-        @include phone {
+        @include phonePortrait {
             @include transition-duration(.2s);
-            left: $phoneMenuSize !important;
+            left: $phoneMenuSizePortrait !important;
             width: auto !important;
         }
-        @include tablet {
+        @include phoneLandscape {
             @include transition-duration(.2s);
-            left: $tabletMenuSize !important;
+            left: $phoneMenuSizeLandscape !important;
+            width: auto !important;
+        }
+        @include tabletPortrait {
+            @include transition-duration(.2s);
+            left: $tabletMenuSizePortrait !important;
+            width: auto !important;
+        }
+        @include tabletLandscape {
+            @include transition-duration(.2s);
+            left: $tabletMenuSizeLandscape !important;
             width: auto !important;
         }
     }
 }
 
 .mobile-splitter {
-    @include phone {
-        display: none;
-    }
-    @include tablet {
+    @include phoneandtablet {
         display: none;
     }
 }
@@ -127,11 +144,7 @@ $desktopMenuSize: 25%;
 }
 
 .object-header-mobile {
-    @include phone {
-        position: relative;
-        left: 30px;
-    }
-    @include tablet {
+    @include phoneandtablet {
         position: relative;
         left: 30px;
     }
@@ -152,10 +165,7 @@ $desktopMenuSize: 25%;
 
 
 .mobile-hide {
-    @include phone {
-        display: none;
-    }
-    @include tablet {
+    @include phoneandtablet {
         display: none;
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 319a3683ca..85d4a78b7a 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -63,6 +63,17 @@
     }
 }
 
+@mixin phoneandtablet {
+    @media #{$phonePortrait},
+           #{$phoneLandscape},
+           #{$phoneLandscapeEmu},
+           #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu}{
+        @content
+    }
+}
+
 @mixin desktop {
     @media #{$desktopPortrait},
            #{$desktopLandscape} {