ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-06 18:48:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Mobile] Redefine

Browse Source 
Renames variables to be clearer.
Breaks up constants into parts to be
cleaners and straightforward. Also
removed the ratio.
This commit is contained in:
Shivam Dave 2015-07-13 13:02:57 -07:00
parent c0d83f9395
commit b00eee00fc
7 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,8 +70,9 @@
* 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 RWD */ /************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** WINDOWS FOR RWD */ /************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

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

@ -70,8 +70,9 @@
* 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 RWD */ /************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** WINDOWS FOR RWD */ /************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

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

@ -71,8 +71,9 @@
* 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 RWD */ /************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** WINDOWS FOR RWD */ /************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

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

@ -70,8 +70,9 @@
* 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 RWD */ /************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** WINDOWS FOR RWD */ /************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

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

@ -33,33 +33,32 @@ $tabMaxH: 1024px;
$compMinW: 800px; $compMinW: 800px;
$compMinH: 1025px; $compMinH: 1025px;
/************************** WINDOW CHECKS FOR RWD */ /************************** 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)";
$phoWidPorCheck: "(max-width: #{$phoMaxW})"; $phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
$phoHeiPorCheck: "(max-height: #{$phoMaxH})"; $phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
$phoWidLanCheck: "(max-height: #{$phoMaxW})";
$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})"; $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})"; $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
$tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}";
$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})"; $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}";
$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})"; $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})"; $mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
/************************** WINDOWS FOR RWD */ /************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
$phoneWidth: "#{$screenPortrait} and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}"; $phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
$phoneHeight: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}"; $phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
$phoneHeightEmu: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}"; $phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
$tabletWidth: "#{$screenPortrait} and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}"; $tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}";
$tabletHeight: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}"; $tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
$tabletHeightEmu: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}"; $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
$desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})"; $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
$desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})"; $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}"; $compWidth: "screen and #{$desktopDevicePortrait}";
$compHeight: "screen and #{$desktopDeviceLandscape}"; $compHeight: "screen and #{$desktopDeviceLandscape}";
$leftPhone: $phoMaxW/2; /************************** DEVICE PARAMETERS FOR MENUS */
$leftTab: $tabMaxW/2;
$hideRatioPhone: 1;
$hideRatioTab: 1;
$phoneSlideMenuWidth: $phoMaxW/2;
$tabletSlideMenuWidth: $tabMaxW/2;

20
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -26,11 +26,11 @@
.holder-hide { .holder-hide {
@include phone { @include phone {
@include transition-duration(.2s); @include transition-duration(.2s);
left: (-1 * $hideRatioPhone) * $leftPhone; left: (-1) * $phoneSlideMenuWidth;
} }
@include tablet { @include tablet {
@include transition-duration(.2s); @include transition-duration(.2s);
left: (-1 * $hideRatioTab) * $leftTab; left: (-1) * $tabletSlideMenuWidth;
} }
} }
@ -49,11 +49,11 @@
position: absolute; position: absolute;
@include phone { @include phone {
@include transition-duration(.2s); @include transition-duration(.2s);
left: ($hideRatioPhone) * $leftPhone; left: $phoneSlideMenuWidth;
} }
@include tablet { @include tablet {
@include transition-duration(.2s); @include transition-duration(.2s);
left: ($hideRatioTab) * $leftTab; left: $tabletSlideMenuWidth;
} }
} }
@ -61,20 +61,20 @@
position: absolute; position: absolute;
@include transition-duration(.2s); @include transition-duration(.2s);
@include phone { @include phone {
left: $leftPhone; left: $phoneSlideMenuWidth;
} }
@include tablet { @include tablet {
left: $leftTab; left: $tabletSlideMenuWidth;
} }
} }
.object-header-mobile { .object-header-mobile {
position: relative; position: relative;
@include phone { @include phone {
left: $leftPhone/10; left: $phoneSlideMenuWidth/10;
} }
@include tablet { @include tablet {
left: $leftTab/10; left: $tabletSlideMenuWidth/10;
} }
} }
@ -87,10 +87,10 @@
.browse-manage { .browse-manage {
@include phone { @include phone {
width: $leftPhone; width: $phoneSlideMenuWidth;
} }
@include tablet { @include tablet {
width: $leftTab; width: $tabletSlideMenuWidth;
} }
@include desktop { @include desktop {
min-width: 150px; min-width: 150px;

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

@ -22,17 +22,17 @@
// NOTE: Mixins for devices // NOTE: Mixins for devices
@mixin phone { @mixin phone {
@media #{$phoneWidth}, @media #{$phonePortrait},
#{$phoneHeight}, #{$phoneLandscape},
#{$phoneHeightEmu}{ #{$phoneLandscapeEmu}{
@content @content
} }
} }
@mixin tablet { @mixin tablet {
@media #{$tabletWidth}, @media #{$tabletPortrait},
#{$tabletHeight}, #{$tabletLandscape},
#{$tabletHeightEmu}{ #{$tabletLandscapeEmu}{
@content @content
} }
} }