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

[Mobile] Desktop

Browse Source 
Cleans up the _layout by making the different
pane sizes device specific. Also adds a new
sass class just for desktop versions.
This commit is contained in:
Shivam Dave
2015-07-16 10:44:20 -07:00
parent a9dd1f9828
commit ce75d19480
4 changed files with 247 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,42 +24,100 @@
.browse-wrapper,
.pane-special {
@include transition-duration(.2s);
position: absolute;
left: 0; top: 0;
right: 0; left: 0;
white-space: nowrap;
height: 100%;
// @include transition-duration(.2s);
@include phone {
position: absolute;
left: 0; top: 0;
right: 0; left: 0;
white-space: nowrap;
height: 100%;
}
@include tablet {
position: absolute;
left: 0; top: 0;
right: 0; left: 0;
white-space: nowrap;
height: 100%;
}
}
$phoneMenuSize: 80%;
$tabletMenuSize: 60%;
$desktopMenuSize: 25%;
.desktop-browse {
@include desktop {
min-width: 150px;
max-width: 800px;
width: $desktopMenuSize;
}
}
.browse-hidetree {
.pane-special.left {
@include transition-duration(.2s);
display: none !important;
@include phone {
@include transition-duration(.2s);
display: none !important;
}
@include tablet {
@include transition-duration(.2s);
display: none !important;
}
}
.pane-special.right {
@include transition-duration(.2s);
width: auto !important;
left: 0px !important;
.pane-special.right {
@include phone {
@include transition-duration(.2s);
width: auto !important;
left: 0px !important;
}
@include tablet {
@include transition-duration(.2s);
width: auto !important;
left: 0px !important;
}
}
}
.browse-showtree {
.pane-special.left {
@include transition-duration(.2s);
display: block !important;
width: 300px !important;
right: auto !important;
.pane-special.left {
@include phone {
@include transition-duration(.2s);
display: block !important;
width: $phoneMenuSize !important;
right: auto !important;
}
@include tablet {
@include transition-duration(.2s);
display: block !important;
width: $tabletMenuSize !important;
right: auto !important;
}
}
.pane-special.right {
@include transition-duration(.2s);
left: 300px !important;
width: auto !important;
@include phone {
@include transition-duration(.2s);
left: $phoneMenuSize !important;
width: auto !important;
}
@include tablet {
@include transition-duration(.2s);
left: $tabletMenuSize !important;
width: auto !important;
}
}
}
.mobile-splitter {
@include phone {
display: none;
}
@include tablet {
display: none;
}
}
@@ -69,8 +127,14 @@
}
.object-header-mobile {
position: relative;
left: 30px;
@include phone {
position: relative;
left: 30px;
}
@include tablet {
position: relative;
left: 30px;
}
}
.mobile-menu-icon {
@@ -86,6 +150,7 @@
}
}
.mobile-hide {
@include phone {
display: none;

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

@@ -24,7 +24,20 @@
@mixin phone {
@media #{$phonePortrait},
#{$phoneLandscape},
#{$phoneLandscapeEmu}{
#{$phoneLandscapeEmu} {
@content
}
}
@mixin phonePortrait {
@media #{$phonePortrait} {
@content
}
}
@mixin phoneLandscape {
@media #{$phoneLandscape},
#{$phoneLandscapeEmu} {
@content
}
}
@@ -32,7 +45,20 @@
@mixin tablet {
@media #{$tabletPortrait},
#{$tabletLandscape},
#{$tabletLandscapeEmu}{
#{$tabletLandscapeEmu} {
@content
}
}
@mixin tabletPortrait {
@media #{$tabletPortrait} {
@content
}
}
@mixin tabletLandscape {
@media #{$tabletLandscape},
#{$tabletLandscapeEmu} {
@content
}
}