From 7d09df9a852b2631d73ca9fd30ef5bdd4c2df057 Mon Sep 17 00:00:00 2001 From: Shivam Dave Date: Mon, 13 Jul 2015 13:11:27 -0700 Subject: [PATCH] [Mobile] Constants Re-edited media query constants to be cleaner and consistent. --- platform/commonUI/general/res/css/forms.css | 4 ++-- platform/commonUI/general/res/css/items.css | 4 ++-- .../general/res/css/theme-espresso.css | 4 ++-- platform/commonUI/general/res/css/tree.css | 4 ++-- .../general/res/sass/mobile/_constants.scss | 19 +++++++++---------- .../general/res/sass/mobile/_mixins.scss | 11 ++--------- 6 files changed, 19 insertions(+), 27 deletions(-) diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index d36234d47b..2630143bbf 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -70,8 +70,8 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ /************************** WINDOW DIMENSIONS FOR RWD */ -/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** DEVICE PARAMETERS FOR MENUS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index c1b31b9e51..0706514394 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -70,8 +70,8 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ /************************** WINDOW DIMENSIONS FOR RWD */ -/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** DEVICE PARAMETERS FOR MENUS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index a5f9d5279e..9c73cba594 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -71,8 +71,8 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ /************************** WINDOW DIMENSIONS FOR RWD */ -/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** DEVICE PARAMETERS FOR MENUS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 08714e39c8..b9e4f360ba 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -70,8 +70,8 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ /************************** WINDOW DIMENSIONS FOR RWD */ -/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** DEVICE PARAMETERS FOR MENUS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 985cae1854..564e8169f5 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -33,10 +33,13 @@ $tabMaxH: 1024px; $compMinW: 800px; $compMinH: 1025px; -/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ $screenPortrait: "screen and (orientation: portrait)"; $screenLandscape: "screen and (orientation: landscape)"; +$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})"; +$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})"; + $phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})"; $phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})"; @@ -48,10 +51,10 @@ $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})"; $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})"; $tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}"; -$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})"; -$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})"; +$desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})"; +$desktopLanscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})"; -/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ $phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}"; $phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}"; $phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}"; @@ -60,13 +63,9 @@ $tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDe $tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}"; $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}"; -$desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})"; -$desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})"; - -$compWidth: "screen and #{$desktopDevicePortrait}"; -$compHeight: "screen and #{$desktopDeviceLandscape}"; +$desktopPortrait: "screen and #{$desktopPortraitCheck}"; +$desktopLandscape: "screen and #{$desktopLanscapeCheck}"; /************************** DEVICE PARAMETERS FOR MENUS */ - $phoneSlideMenuWidth: $phoMaxW/2; $tabletSlideMenuWidth: $tabMaxW/2; diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss index c92708fe73..b1e868add5 100644 --- a/platform/commonUI/general/res/sass/mobile/_mixins.scss +++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss @@ -37,16 +37,9 @@ } } -//@mixin phoneandtablet { -// @media screen and (max-width: $tabMaxW) and (orientation: portrait), -// screen and (max-width: $tabMaxH) and (orientation: landscape) { -// @content -// } -//} - @mixin desktop { - @media #{$compWidth}, - #{$compHeight} { + @media #{$desktopPortrait}, + #{$desktopLandscape} { @content } }