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

[Frontend] Fixing bad breakpoints for tablet vs. desktop

Browse Source 
open #169
This commit is contained in:
Charles Hacskaylo
2015-11-30 15:57:45 -08:00
parent 3fd4304de1
commit da8fb99e82
3 changed files with 136 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,29 +36,29 @@ $mobileTreeRightArrowW: 30px;
/************************** DEVICE WIDTHS */
// IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
$phoMaxW: 514px;
$tabMinW: 515px;
$tabMaxW: 1280px;
$desktopMinW: 1281px;
$phoMaxW: 767px;
$tabMinW: 768px;
$tabMaxW: 1024px;
$desktopMinW: 1280px;
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
$screenPortrait: "screen and (orientation: portrait)";
$screenLandscape: "screen and (orientation: landscape)";
$screenPortrait: "(orientation: portrait)";
$screenLandscape: "(orientation: landscape)";
$mobileDevice: "(max-device-width: #{$tabMaxW})";
//$mobileDevice: "(max-device-width: #{$tabMaxW})";
$phoneCheck: "(max-device-width: #{$phoMaxW})";
$tabletCheck: $mobileDevice;
$desktopCheck: "(min-device-width: #{$desktopMinW})";
$tabletCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
$desktopCheck: "(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)";
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
$phonePortrait: "#{$screenPortrait} and #{$phoneCheck} and #{$mobileDevice}";
$phoneLandscape: "#{$screenLandscape} and #{$phoneCheck} and #{$mobileDevice}";
$phonePortrait: "only screen and #{$screenPortrait} and #{$phoneCheck}";
$phoneLandscape: "only screen and #{$screenLandscape} and #{$phoneCheck}";
$tabletPortrait: "#{$screenPortrait} and #{$tabletCheck} and #{$mobileDevice}";
$tabletLandscape: "#{$screenLandscape} and #{$tabletCheck} and #{$mobileDevice}";
$tabletPortrait: "only screen and #{$screenPortrait} and #{$tabletCheck}";
$tabletLandscape: "only screen and #{$screenLandscape} and #{$tabletCheck}";
$desktop: "screen and #{$desktopCheck}";
$desktop: "only screen and #{$desktopCheck}";
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
$proporMenuOnly: 90%;