From ce75d194805c551936a7caf4c090a367a5b679d5 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 10:44:20 -0700
Subject: [PATCH] [Mobile] Desktop

Cleans up the _layout by making the different
pane sizes device specific. Also adds a new
sass class just for desktop versions.
---
 .../commonUI/browse/res/templates/browse.html |   8 +-
 .../general/res/css/theme-espresso.css        | 186 ++++++++++++------
 .../general/res/sass/mobile/_layout.scss      | 109 +++++++---
 .../general/res/sass/mobile/_mixins.scss      |  30 ++-
 4 files changed, 247 insertions(+), 86 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 1cecf97b3f..0d6ee32bac 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -26,11 +26,11 @@
         
         <!-- WRAPPER CLASS IS HERE-->
         <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
-        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'"  anchor='left'>
-            <mct-split-pane class='contents abs'>
+        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
+            <mct-split-pane class='contents abs' anchor='left'>
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
-                <div class='split-pane-component treeview pane pane-special left'>  
+                <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
                     <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
                     <div class='holder tree-holder abs'>
@@ -41,7 +41,7 @@
                     </div>
                 </div>
                 
-                <mct-splitter class="mobile-hide"></mct-splitter>
+                <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'>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 368ef6274c..d503687f0f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -734,56 +734,120 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* 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;
-  right: 0;
-  left: 0;
-  white-space: nowrap;
-  height: 100%; }
+@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 25, ../sass/mobile/_layout.scss */
+  .browse-wrapper,
+  .pane-special {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    left: 0;
+    white-space: nowrap;
+    height: 100%; } }
+@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 25, ../sass/mobile/_layout.scss */
+  .browse-wrapper,
+  .pane-special {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    left: 0;
+    white-space: nowrap;
+    height: 100%; } }
 
-/* line 36, ../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; }
-/* line 41, ../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 (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 */
+  .desktop-browse {
+    min-width: 150px;
+    max-width: 800px;
+    width: 25%; } }
 
-/* line 49, ../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: 300px !important;
-  right: auto !important; }
-/* line 56, ../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: 300px !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 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 (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 */
+  .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; } }
 
-/* line 66, ../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) {
+  /* line 84, ../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: 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 */
+  .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;
+    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 */
+  .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: 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 */
+  .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;
+    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 */
+  .mobile-splitter {
+    display: none; } }
+
+/* line 124, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -791,38 +855,44 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
 
-/* line 71, ../sass/mobile/_layout.scss */
-.object-header-mobile {
-  position: relative;
-  left: 30px; }
+@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 */
+  .object-header-mobile {
+    position: relative;
+    left: 30px; } }
 
-/* line 76, ../sass/mobile/_layout.scss */
+/* line 140, ../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 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../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 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../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 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../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 89, ../sass/mobile/_layout.scss */
+  /* 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 89, ../sass/mobile/_layout.scss */
+  /* line 154, ../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 98, ../sass/mobile/_layout.scss */
+  /* line 163, ../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 aa0a012faa..e36e825ca0 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,42 +24,100 @@
 
 .browse-wrapper,
 .pane-special {
-    @include transition-duration(.2s);
-    position: absolute;
-    left: 0; top: 0;
-    right: 0; left: 0;
-    white-space: nowrap;
-    height: 100%;
+//    @include transition-duration(.2s);
+    @include phone {
+        position: absolute;
+        left: 0; top: 0;
+        right: 0; left: 0;
+        white-space: nowrap;
+        height: 100%;
+    }
+    @include tablet {
+        position: absolute;
+        left: 0; top: 0;
+        right: 0; left: 0;
+        white-space: nowrap;
+        height: 100%;        
+    }
+}
+
+$phoneMenuSize: 80%;
+$tabletMenuSize: 60%;
+$desktopMenuSize: 25%;
+
+
+.desktop-browse {
+    @include desktop {
+        min-width: 150px;
+        max-width: 800px;
+        width: $desktopMenuSize;   
+    }   
 }
 
 .browse-hidetree {
     .pane-special.left {
-        @include transition-duration(.2s);
-        display: none !important;
+        @include phone {
+            @include transition-duration(.2s);
+            display: none !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            display: none !important;
+        }
     }
 
-    .pane-special.right {
-        @include transition-duration(.2s);
-        width: auto !important;
-        left: 0px !important;
+    .pane-special.right {       
+        @include phone {
+            @include transition-duration(.2s);
+            width: auto !important;
+            left: 0px !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            width: auto !important;
+            left: 0px !important;
+        }
     }    
 }
 
 .browse-showtree {
-    .pane-special.left {
-        @include transition-duration(.2s);
-        display: block !important;
-        width: 300px !important;
-        right: auto !important;
+    .pane-special.left {      
+        @include phone {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $phoneMenuSize !important;
+            right: auto !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSize !important;
+            right: auto !important;
+        }
     }
     
     .pane-special.right {
-        @include transition-duration(.2s);
-        left: 300px !important;
-        width: auto !important;
+        @include phone {
+            @include transition-duration(.2s);
+            left: $phoneMenuSize !important;
+            width: auto !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            left: $tabletMenuSize !important;
+            width: auto !important;
+        }
     }
 }
 
+.mobile-splitter {
+    @include phone {
+        display: none;
+    }
+    @include tablet {
+        display: none;
+    }
+}
 
 
 
@@ -69,8 +127,14 @@
 }
 
 .object-header-mobile {
-    position: relative;
-    left: 30px;
+    @include phone {
+        position: relative;
+        left: 30px;
+    }
+    @include tablet {
+        position: relative;
+        left: 30px;
+    }
 }
 
 .mobile-menu-icon {
@@ -86,6 +150,7 @@
     }       
 }
 
+
 .mobile-hide {
     @include phone {
         display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index b1e868add5..319a3683ca 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -24,7 +24,20 @@
 @mixin phone {
     @media #{$phonePortrait},
            #{$phoneLandscape},
-           #{$phoneLandscapeEmu}{
+           #{$phoneLandscapeEmu} {
+        @content
+    }
+}
+
+@mixin phonePortrait {
+    @media #{$phonePortrait} {
+        @content
+    }
+}
+
+@mixin phoneLandscape {
+    @media #{$phoneLandscape},
+           #{$phoneLandscapeEmu} {
         @content
     }
 }
@@ -32,7 +45,20 @@
 @mixin tablet {
     @media #{$tabletPortrait},
            #{$tabletLandscape},
-           #{$tabletLandscapeEmu}{
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
+@mixin tabletPortrait {
+    @media #{$tabletPortrait} {
+        @content
+    }
+}
+
+@mixin tabletLandscape {
+    @media #{$tabletLandscape},
+           #{$tabletLandscapeEmu} {
         @content
     }
 }