From d3ae4b729f7d9c740b0d0f7bcbdd73a73362d2cc Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 10 Jul 2015 10:56:48 -0700 Subject: [PATCH] [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 | 10 +-- .../general/res/css/theme-espresso.css | 87 ++++++++++--------- .../general/res/sass/mobile/_constants.scss | 38 ++++++-- .../general/res/sass/mobile/_layout.scss | 15 ++-- .../general/res/sass/mobile/_mixins.scss | 22 +++-- 5 files changed, 99 insertions(+), 73 deletions(-) diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 5f5a1a5e04..27a32a1368 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/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; } } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index a76e6e9a28..1778fb4848 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/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; diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index f30a6db9c4..2f5ddc08e3 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/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; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 66917440a1..01f4093fcb 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/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; diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss index 97de07f14a..f23b8bc1d6 100644 --- a/platform/commonUI/general/res/sass/mobile/_mixins.scss +++ b/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 } }