diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 8278e6322f..d36234d47b 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -70,8 +70,9 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ /************************** WINDOW DIMENSIONS FOR RWD */ -/************************** WINDOW CHECKS FOR RWD */ -/************************** WINDOWS FOR RWD */ +/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** DEVICE PARAMETERS FOR MENUS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index dc970e3b00..c1b31b9e51 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -70,8 +70,9 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ /************************** WINDOW DIMENSIONS FOR RWD */ -/************************** WINDOW CHECKS FOR RWD */ -/************************** WINDOWS FOR RWD */ +/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** DEVICE PARAMETERS FOR MENUS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 6af1fbf5da..a5f9d5279e 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -71,8 +71,9 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ /************************** WINDOW DIMENSIONS FOR RWD */ -/************************** WINDOW CHECKS FOR RWD */ -/************************** WINDOWS FOR RWD */ +/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** DEVICE PARAMETERS FOR MENUS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 525193bbdc..08714e39c8 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -70,8 +70,9 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ /************************** WINDOW DIMENSIONS FOR RWD */ -/************************** WINDOW CHECKS FOR RWD */ -/************************** WINDOWS FOR RWD */ +/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ +/************************** DEVICE PARAMETERS FOR MENUS */ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 84354b4e7d..985cae1854 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -33,33 +33,32 @@ $tabMaxH: 1024px; $compMinW: 800px; $compMinH: 1025px; -/************************** WINDOW CHECKS FOR RWD */ +/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ $screenPortrait: "screen and (orientation: portrait)"; $screenLandscape: "screen and (orientation: landscape)"; -$phoWidPorCheck: "(max-width: #{$phoMaxW})"; -$phoHeiPorCheck: "(max-height: #{$phoMaxH})"; - -$phoWidLanCheck: "(max-height: #{$phoMaxW})"; -$phoHeiLanCheck: "(max-width: #{$phoMaxH})"; +$phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})"; +$phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})"; $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})"; $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})"; +$tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}"; $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})"; -/************************** WINDOWS FOR RWD */ -$phoneWidth: "#{$screenPortrait} and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}"; -$phoneHeight: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}"; -$phoneHeightEmu: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}"; +/************************** 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}"; -$tabletWidth: "#{$screenPortrait} and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}"; -$tabletHeight: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}"; -$tabletHeightEmu: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}"; +$tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}"; +$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})"; @@ -67,9 +66,7 @@ $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-heigh $compWidth: "screen and #{$desktopDevicePortrait}"; $compHeight: "screen and #{$desktopDeviceLandscape}"; -$leftPhone: $phoMaxW/2; -$leftTab: $tabMaxW/2; - -$hideRatioPhone: 1; -$hideRatioTab: 1; +/************************** DEVICE PARAMETERS FOR MENUS */ +$phoneSlideMenuWidth: $phoMaxW/2; +$tabletSlideMenuWidth: $tabMaxW/2; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 01f4093fcb..fa8e6ddff1 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -26,11 +26,11 @@ .holder-hide { @include phone { @include transition-duration(.2s); - left: (-1 * $hideRatioPhone) * $leftPhone; + left: (-1) * $phoneSlideMenuWidth; } @include tablet { @include transition-duration(.2s); - left: (-1 * $hideRatioTab) * $leftTab; + left: (-1) * $tabletSlideMenuWidth; } } @@ -49,11 +49,11 @@ position: absolute; @include phone { @include transition-duration(.2s); - left: ($hideRatioPhone) * $leftPhone; + left: $phoneSlideMenuWidth; } @include tablet { @include transition-duration(.2s); - left: ($hideRatioTab) * $leftTab; + left: $tabletSlideMenuWidth; } } @@ -61,20 +61,20 @@ position: absolute; @include transition-duration(.2s); @include phone { - left: $leftPhone; + left: $phoneSlideMenuWidth; } @include tablet { - left: $leftTab; + left: $tabletSlideMenuWidth; } } .object-header-mobile { position: relative; @include phone { - left: $leftPhone/10; + left: $phoneSlideMenuWidth/10; } @include tablet { - left: $leftTab/10; + left: $tabletSlideMenuWidth/10; } } @@ -87,10 +87,10 @@ .browse-manage { @include phone { - width: $leftPhone; + width: $phoneSlideMenuWidth; } @include tablet { - width: $leftTab; + width: $tabletSlideMenuWidth; } @include desktop { min-width: 150px; diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss index f71edf2c8c..c92708fe73 100644 --- a/platform/commonUI/general/res/sass/mobile/_mixins.scss +++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss @@ -22,17 +22,17 @@ // NOTE: Mixins for devices @mixin phone { - @media #{$phoneWidth}, - #{$phoneHeight}, - #{$phoneHeightEmu}{ + @media #{$phonePortrait}, + #{$phoneLandscape}, + #{$phoneLandscapeEmu}{ @content } } @mixin tablet { - @media #{$tabletWidth}, - #{$tabletHeight}, - #{$tabletHeightEmu}{ + @media #{$tabletPortrait}, + #{$tabletLandscape}, + #{$tabletLandscapeEmu}{ @content } }