From d99b4d75d807051ff5fc4ad250d1c29d413acb96 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 14:07:25 -0700
Subject: [PATCH] [Mobile] Fix

Fixed the desktop version breaking.
CUrrent issue is hte menu is getting cut off.
---
 .../commonUI/browse/res/templates/browse.html | 15 +++----
 .../general/res/css/theme-espresso.css        | 43 ++++++++++---------
 .../general/res/sass/mobile/_layout.scss      |  9 ++--
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index b8ab9845cb..9666fcaafd 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -44,16 +44,15 @@
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
-                
                     <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
-                    <div class='split-pane-component items pane pane-special right'>
-                    <div class='holder abs' id='content-area'>
-                        <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                        </mct-representation>
-                    </div>
-                    <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                        <div class='split-pane-component items pane pane-special right'>
+                            <div class='holder abs' id='content-area'>
+                                <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                                </mct-representation>
+                            </div>
+                        <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                             ng-click="treeSlide()">m</div>                        
-                </div>                     
+                        </div>   
             </mct-split-pane>
         </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 33838faa7f..fc95bd48cb 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -810,7 +810,7 @@ mct-container {
   .browse-showtree .pane-special.left {
     width: 25% !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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s;
@@ -819,65 +819,66 @@ mct-container {
     transition-timing-function: ease;
     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) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 35% !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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !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 117, ../sass/mobile/_layout.scss */
+  /* line 116, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 125, ../sass/mobile/_layout.scss */
-.button-pos {
-  position: absolute;
-  -moz-transition-duration: 0.5s;
-  -o-transition-duration: 0.5s;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  transition-timing-function: ease; }
+@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 124, ../sass/mobile/_layout.scss */
+  .button-pos {
+    position: absolute;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease; } }
 
 @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 130, ../sass/mobile/_layout.scss */
+  /* line 131, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 137, ../sass/mobile/_layout.scss */
+/* line 138, ../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 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../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 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../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 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../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), 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 151, ../sass/mobile/_layout.scss */
+  /* line 152, ../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 157, ../sass/mobile/_layout.scss */
+  /* line 158, ../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 0cb3ac5307..6bdbb40950 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -59,7 +59,7 @@
     }
 
     .pane-special.right {       
-        @include phoneandtablet {
+        @include phoneandtablet {         
             @include slMenuTransitions;
             width: auto !important;
             left: 0px !important;
@@ -93,7 +93,6 @@
             width: $tabletMenuSizeLandscape !important;
         }
     }
-    
     .pane-special.right {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -123,8 +122,10 @@
 
 
 .button-pos {
-    position: absolute;
-    @include slMenuTransitions;
+    @include phoneandtablet {
+        position: absolute;
+        @include slMenuTransitions;
+    }
 }
 
 .object-header-mobile {