From 85c7a36e25cf69483d800b8577d8af219731a907 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 15:21:17 -0700
Subject: [PATCH] [Mobile] Cleaned up

Set the width of the create menu
text/components to fit the menu
however it gets cuttoff sometimes.
Next steps are to Clean up screen,
change the create menu to fit the left side,
and fix bottom space.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../res/templates/create/create-menu.html     |  2 +-
 .../general/res/css/theme-espresso.css        | 40 +++++++++----------
 .../general/res/sass/mobile/_layout.scss      |  2 +-
 .../general/res/sass/mobile/_mixins.scss      |  2 +-
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 9666fcaafd..d476921eaf 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -40,7 +40,7 @@
                      <div class='createBtnPos'>
                         <mct-representation key="'create-button'" mct-object="navigatedObject">
                         </mct-representation>
-                    </div>                    
+                    </div>                
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
diff --git a/platform/commonUI/browse/res/templates/create/create-menu.html b/platform/commonUI/browse/res/templates/create/create-menu.html
index 3386d2d266..1af6c5cd31 100644
--- a/platform/commonUI/browse/res/templates/create/create-menu.html
+++ b/platform/commonUI/browse/res/templates/create/create-menu.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items">
+    <div class="pane left menu-items pane-special left">
         <ul>
 
             <li ng-repeat="createAction in createActions">
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index fc95bd48cb..ebf5cef519 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -756,10 +756,10 @@ mct-container {
 @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 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     width: 0px !important;
     right: auto !important; }
@@ -770,10 +770,10 @@ mct-container {
 @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 61, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     width: auto !important;
     left: 0px !important; } }
@@ -781,10 +781,10 @@ mct-container {
 @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 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     display: block !important;
     right: auto !important; }
@@ -812,10 +812,10 @@ mct-container {
 @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 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     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) {
@@ -844,10 +844,10 @@ mct-container {
   /* 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;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     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) {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 6bdbb40950..93f35661ba 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -78,7 +78,7 @@
                 height: inherit;
                 overflow-y: hidden;
                 overflow-x: hidden;
-            }         
+            }
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 764fdfd098..b6c1cf93e9 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -82,6 +82,6 @@
 }
 
 @mixin slMenuTransitions {
-    @include transition-duration(.5s);
+    @include transition-duration(.2s);
     transition-timing-function: ease;
 }