[Mobile] More consistent

More consistent when moving from
landscape to portrait and
vice-versa on devices. However
still encountering issue with
the browser being resized.

platform/commonUI/general/res/css/items.css

@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-width: 801px) {
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 51, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar .item-main {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 51, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar .item-main {
     display: none; } }

platform/commonUI/general/res/css/theme-espresso.css

@@ -731,24 +731,32 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -82.8%; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+    left: -257px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -38.64%; } }
+    left: -400px; } }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  /* line 37, ../sass/mobile/_layout.scss */
+  .holder-show {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -757,77 +765,72 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 44, ../sass/mobile/_layout.scss */
+/* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 82.8%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+      left: 257px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 38.64%; } }
+      left: 400px; } }
 
-/* line 56, ../sass/mobile/_layout.scss */
+/* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) {
-    /* line 56, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 46%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 56, ../sass/mobile/_layout.scss */
+      left: 257px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 28%; } }
+      left: 400px; } }
 
-/* line 67, ../sass/mobile/_layout.scss */
+/* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) {
-    /* line 67, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 4.6%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 67, ../sass/mobile/_layout.scss */
+      left: 25.7px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 2.8%; } }
+      left: 40px; } }
 
-/* line 77, ../sass/mobile/_layout.scss */
+/* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-width: 801px) {
-    /* line 77, ../sass/mobile/_layout.scss */
+  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+    /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 800px) {
-  /* line 84, ../sass/mobile/_layout.scss */
-  .exclude-mobile {
-    display: none; } }
-
-@media screen and (max-width: 514px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 46%; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+    width: 257px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 28%; } }
-@media screen and (min-width: 801px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+    width: 400px; } }
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;

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

@@ -22,19 +22,39 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoMaxH: 740px;
-    
-$tabMinW: 515px;
-$tabMinH: 741px;
+$phoWidPorCheck: "(max-width: #{$phoMaxW})";
+$phoWidLanCheck: "(max-height: #{$phoMaxW})";
 
+$phoMaxH: 740px;
+$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
+$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+
+$tabMinW: 515px;
 $tabMaxW: 800px;
-$tabMaxH: 1280px;
+$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
+$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
+
+$tabMinH: 741px;
+$tabMaxH: 1024px;
+$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+
+$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+
+$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
+
+$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
 $compMinW: 801px;
+$compMinH: 1025px;
 
-$leftPhone: 46%;
-$leftTab: 28%;
+$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
-$hideRatioPhone: 1.8;
-$hideRatioTab: 1.38;
+$leftPhone: $phoMaxW/2;
+$leftTab: $tabMaxW/2;
+
+$hideRatioPhone: 1;
+$hideRatioTab: 1;
 

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

@@ -35,10 +35,14 @@
 }
 
 .holder-show {
-    @include phoneandtablet {
+    @include phone {
         @include transition-duration(.2s);
         left: 0px;
-    }     
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: 0px;
+    }         
 }
 
 .button-show {
@@ -81,13 +85,6 @@
     }       
 }
 
-.exclude-mobile {
-    @include phoneandtablet {
-        display: none;
-    }       
-}
-
-
 .browse-manage {
     @include phone {
         width: $leftPhone;

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

@@ -22,25 +22,31 @@
 
 // NOTE: Mixins for devices
 @mixin phone {
-    @media screen and (max-width: $phoMaxW) {
+    @media #{$phoneWidth},
+           #{$phoneHeight} {
         @content
     }
 }
 
 @mixin tablet {
-    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
+    @media #{$tabletWidth},
+           #{$tabletHeight} {
         @content
     }
 }
 
-@mixin phoneandtablet {
-    @media screen and (max-width: $tabMaxW) {
-        @content
-    }
-}
+//@mixin phoneandtablet {
+//    @media screen and (max-width: $tabMaxW) and (orientation: portrait),
+//           screen and (max-width: $tabMaxH) and (orientation: landscape) {
+//        @content
+//    }
+//}
 
 @mixin desktop {
-    @media screen and (min-width: $compMinW) {
+    @media screen and (min-width: $compMinW) and (orientation: portrait),
+           screen and (min-device-width: $compMinW) and (orientation: portrait),
+           screen and (min-width: $compMinH) and (orientation: landscape),
+           screen and (min-device-width: $compMinH) and (orientation: landscape) {
         @content
     }
 }