From 6e6fbe0d65e7b563feb6f39bc440721cb49f9517 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 12:54:10 -0700
Subject: [PATCH] [Mobile] Transitions

Made transitions properly work for
create button.
---
 .../commonUI/browse/res/templates/browse.html |  6 +++--
 .../general/res/css/theme-espresso.css        | 27 +++++++++++--------
 .../general/res/sass/mobile/_constants.scss   |  7 +++--
 .../general/res/sass/mobile/_layout.scss      | 14 +++++-----
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 5428086f20..12755dd3f1 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,8 +31,10 @@
             
                 <!-- 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" class="createBtnPos">
-                    </mct-representation>
+                     <div class='createBtnPos'>
+                        <mct-representation key="'create-button'" mct-object="navigatedObject">
+                        </mct-representation>
+                    </div>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c28a7e46a8..6fb970f646 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -747,14 +747,14 @@ 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 43, ../sass/mobile/_layout.scss */
+  /* line 37, ../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 52, ../sass/mobile/_layout.scss */
+  /* line 46, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -762,11 +762,12 @@ mct-container {
     transition-duration: 0.2s;
     width: 0px !important;
     right: auto !important; }
-    /* line 58, ../sass/mobile/_layout.scss */
+    /* line 52, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane-special.left .createBtnPos {
-      display: none; } }
+      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 64, ../sass/mobile/_layout.scss */
+  /* line 59, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -776,28 +777,32 @@ mct-container {
     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), 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 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../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;
-    right: auto !important; } }
+    right: auto !important; }
+    /* line 75, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane-special.left .createBtnPos {
+      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) {
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 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 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 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 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 40% !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 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .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) {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 564e8169f5..1c10f59395 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -67,5 +67,8 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS */
-$phoneSlideMenuWidth: $phoMaxW/2;
-$tabletSlideMenuWidth: $tabMaxW/2;
+$phoneMenuSizePortrait: 80%;
+$phoneMenuSizeLandscape: 30%;
+$tabletMenuSizePortrait: 40%;
+$tabletMenuSizeLandscape: 25%;
+$desktopMenuSize: 25%;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index fcd7b667b5..a59713c236 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -33,12 +33,6 @@
     }
 }
 
-$phoneMenuSizePortrait: 80%;
-$phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 40%;
-$tabletMenuSizeLandscape: 25%;
-$desktopMenuSize: 25%;
-
 
 .desktop-browse {
     @include desktop {
@@ -56,7 +50,8 @@ $desktopMenuSize: 25%;
             right: auto !important;
             
             .createBtnPos {
-                display: none;
+                overflow-y: hidden;
+                overflow-x: hidden;
             }            
         }
     }
@@ -76,6 +71,11 @@ $desktopMenuSize: 25%;
             @include transition-duration(.2s);
             display: block !important;
             right: auto !important;
+            
+            .createBtnPos {
+                overflow-y: hidden;
+                overflow-x: hidden;
+            }                
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;