[Mobile] Desktop

Cleans up the _layout by making the different
pane sizes device specific. Also adds a new
sass class just for desktop versions.

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'>
+        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
-            <mct-split-pane class='contents abs'>
+            <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'>

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.
  *****************************************************************************/
+@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 {
-  -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%; }
+    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 */
+@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%; } }
+
+@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; }
+    display: none !important; } }
-/* line 41, ../sass/mobile/_layout.scss */
+@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; }
+    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 49, ../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: 300px !important;
+    width: 80% !important;
-  right: auto !important; }
+    right: auto !important; } }
-/* line 56, ../sass/mobile/_layout.scss */
+@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: 300px !important;
+    left: 80% !important;
-  width: auto !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; } }
 
-/* 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 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 */
+@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; }
+    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; } }
 

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -24,42 +24,100 @@
 
 .browse-wrapper,
 .pane-special {
-    @include transition-duration(.2s);
+//    @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 phone {
             @include transition-duration(.2s);
             display: none !important;
         }
+        @include tablet {
+            @include transition-duration(.2s);
+            display: none !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 phone {
             @include transition-duration(.2s);
             display: block !important;
-        width: 300px !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 phone {
             @include transition-duration(.2s);
-        left: 300px !important;
+            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,9 +127,15 @@
 }
 
 .object-header-mobile {
+    @include phone {
         position: relative;
         left: 30px;
     }
+    @include tablet {
+        position: relative;
+        left: 30px;
+    }
+}
 
 .mobile-menu-icon {
     top: $interiorMargin;
@@ -86,6 +150,7 @@
     }       
 }
 
+
 .mobile-hide {
     @include phone {
         display: none;

platform/commonUI/general/res/sass/mobile/_mixins.scss

@@ -29,6 +29,19 @@
     }
 }
 
+@mixin phonePortrait {
+    @media #{$phonePortrait} {
+        @content
+    }
+}
+
+@mixin phoneLandscape {
+    @media #{$phoneLandscape},
+           #{$phoneLandscapeEmu} {
+        @content
+    }
+}
+
 @mixin tablet {
     @media #{$tabletPortrait},
            #{$tabletLandscape},
@@ -37,6 +50,19 @@
     }
 }
 
+@mixin tabletPortrait {
+    @media #{$tabletPortrait} {
+        @content
+    }
+}
+
+@mixin tabletLandscape {
+    @media #{$tabletLandscape},
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
 @mixin desktop {
     @media #{$desktopPortrait},
            #{$desktopLandscape} {