From dfd08000f15da70d50c7ec5db2b310c15df94b94 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 13:42:07 -0700
Subject: [PATCH] [Mobile] Adjust

Adjusted the tablet amount
that the slide occurs.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 64 ++++++++++++-------
 .../general/res/sass/mobile/_layout.scss      | 34 +++++++---
 3 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 9e47cc58f8..3597b2cd43 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties button-hide ui-symbol mobile-menu-icon" 
+            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeCl ? 'button-show' : 'button-hide'" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4844397666..963fcf0da7 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -732,24 +732,24 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (max-width: 514px) {
-  /* line 26, ../sass/mobile/_layout.scss */
+  /* line 32, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -108px; } }
+    left: -82.8%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 26, ../sass/mobile/_layout.scss */
+  /* line 32, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -150px; } }
+    left: -38.64%; } }
 
 @media screen and (max-width: 800px) {
-  /* line 37, ../sass/mobile/_layout.scss */
+  /* line 43, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -757,7 +757,27 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 44, ../sass/mobile/_layout.scss */
+/* line 50, ../sass/mobile/_layout.scss */
+.button-show {
+  position: absolute; }
+  @media screen and (max-width: 514px) {
+    /* line 50, ../sass/mobile/_layout.scss */
+    .button-show {
+      -moz-transition-duration: 0.2s;
+      -o-transition-duration: 0.2s;
+      -webkit-transition-duration: 0.2s;
+      transition-duration: 0.2s;
+      left: 82.8%; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 50, ../sass/mobile/_layout.scss */
+    .button-show {
+      -moz-transition-duration: 0.2s;
+      -o-transition-duration: 0.2s;
+      -webkit-transition-duration: 0.2s;
+      transition-duration: 0.2s;
+      left: 38.64%; } }
+
+/* line 62, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -765,44 +785,44 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
   @media screen and (max-width: 514px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+    /* line 62, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 108px; } }
+      left: 46%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+    /* line 62, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 150px; } }
+      left: 28%; } }
 
-/* line 55, ../sass/mobile/_layout.scss */
+/* line 73, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (max-width: 514px) {
-    /* line 55, ../sass/mobile/_layout.scss */
+    /* line 73, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 23px; } }
+      left: 4.6%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 55, ../sass/mobile/_layout.scss */
+    /* line 73, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 15px; } }
+      left: 2.8%; } }
 
-/* line 65, ../sass/mobile/_layout.scss */
+/* line 83, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (min-width: 801px) {
-    /* line 65, ../sass/mobile/_layout.scss */
+    /* line 83, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (max-width: 514px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 100px; } }
+    width: 46%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 150px; } }
+    width: 28%; } }
 @media screen and (min-width: 801px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9e5f51a21a..6af0be9d24 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -23,14 +23,20 @@
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 // NOTE: Added to adjust the browse folder tree list view
 
+$leftPhone: 46%;
+$leftTab: 28%;
+
+$hideRatioPhone: 1.8;
+$hideRatioTab: 1.38;
+
 .holder-hide {
     @include phone {
         @include transition-duration(.2s);
-        left: -108px;
+        left: (-1 * $hideRatioPhone) * $leftPhone;
     }
     @include tablet {
         @include transition-duration(.2s);
-        left: -150px;
+        left: (-1 * $hideRatioTab) * $leftTab;
     }     
 }
 
@@ -41,24 +47,36 @@
     }     
 }
 
+.button-show {
+    position: absolute;
+    @include phone {
+        @include transition-duration(.2s);
+        left: ($hideRatioPhone) * $leftPhone;
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: ($hideRatioTab) * $leftTab;
+    }      
+}
+
 .button-hide {
     position: absolute;
     @include transition-duration(.2s);
     @include phone {
-        left: 108px;
+        left: $leftPhone;
     }
     @include tablet {
-        left: 150px;
+        left: $leftTab;
     }     
 }
 
 .object-header-mobile {
     position: relative;
     @include phone {
-        left: 23px;
+        left: $leftPhone/10;
     }
     @include tablet {
-        left: 15px;
+        left: $leftTab/10;
     }
 }
 
@@ -71,10 +89,10 @@
 
 .browse-manage {
     @include phone {
-        width: 100px;
+        width: $leftPhone;
     }
     @include tablet {
-        width: 150px;
+        width: $leftTab;
     }    
     @include desktop {
         min-width: 150px;