alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Mobile] Constants

Browse Source 
Re-edited media query constants
to be cleaner and consistent.
This commit is contained in:
Shivam Dave
2015-07-13 13:11:27 -07:00
parent b00eee00fc
commit 7d09df9a85
6 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/general/res/css/forms.css
View File

@@ -70,8 +70,8 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government

4
platform/commonUI/general/res/css/items.css
View File

@@ -70,8 +70,8 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government

4
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -71,8 +71,8 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government

4
platform/commonUI/general/res/css/tree.css
View File

@@ -70,8 +70,8 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government

19
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

@@ -33,10 +33,13 @@ $tabMaxH: 1024px;
$compMinW: 800px; $compMinW: 800px;
$compMinH: 1025px; $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)"; $screenPortrait: "screen and (orientation: portrait)";
$screenLandscape: "screen and (orientation: landscape)"; $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})"; $phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
$phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$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})"; $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
$tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}"; $tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})"; $desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})"; $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}"; $phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
$phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}"; $phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
$phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}"; $phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
@@ -60,13 +63,9 @@ $tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDe
$tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}"; $tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
$tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}"; $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
$desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})"; $desktopPortrait: "screen and #{$desktopPortraitCheck}";
$desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})"; $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
$compWidth: "screen and #{$desktopDevicePortrait}";
$compHeight: "screen and #{$desktopDeviceLandscape}";
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS */
$phoneSlideMenuWidth: $phoMaxW/2; $phoneSlideMenuWidth: $phoMaxW/2;
$tabletSlideMenuWidth: $tabMaxW/2; $tabletSlideMenuWidth: $tabMaxW/2;

11
platform/commonUI/general/res/sass/mobile/_mixins.scss
View File

@@ -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 { @mixin desktop {
@media #{$compWidth}, @media #{$desktopPortrait},
#{$compHeight} { #{$desktopLandscape} {
@content @content
} }
} }