[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/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
     }
 }