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

[Mobile] Slide menu

Browse Source 
Rouch menu using important to
overwrite splitter setting of
amounts. Also has default values
for now for all devices.
This commit is contained in:
Shivam Dave
2015-07-15 16:49:16 -07:00
parent ee35976c92
commit 4b5540830b
4 changed files with 99 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -698,18 +698,18 @@ mct-container {
/* line 251, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane {
margin-left: 5px; }
/* line 253, ../sass/user-environ/_layout.scss */
/* line 254, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder {
left: 0;
right: 0; }
/* line 257, ../sass/user-environ/_layout.scss */
/* line 258, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child {
margin-left: 0; }
/* line 259, ../sass/user-environ/_layout.scss */
/* line 260, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder {
right: 5px; }
/* line 268, ../sass/user-environ/_layout.scss */
/* line 269, ../sass/user-environ/_layout.scss */
.vscroll {
overflow-y: auto; }
@@ -734,111 +734,77 @@ mct-container {
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 26, ../sass/mobile/_layout.scss */
.holder-hide {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: -257px; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 26, ../sass/mobile/_layout.scss */
.holder-hide {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: -399.5px; } }
/* line 25, ../sass/mobile/_layout.scss */
.browse-wrapper,
.pane-special {
position: absolute;
left: 0;
top: 0;
right: 0;
left: 0;
white-space: nowrap;
height: 100%; }
/* line 37, ../sass/mobile/_layout.scss */
.holder-show {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 37, ../sass/mobile/_layout.scss */
.holder-show {
left: 0px; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 37, ../sass/mobile/_layout.scss */
.holder-show {
left: 0px; } }
/* line 36, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left {
display: none !important; }
/* line 43, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.right {
width: auto !important;
left: 0px !important; }
/* line 47, ../sass/mobile/_layout.scss */
/* line 51, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
display: block !important;
width: 300px !important;
right: auto !important; }
/* line 58, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 300px !important;
width: auto !important; }
/* line 68, ../sass/mobile/_layout.scss */
.button-pos {
position: absolute;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 47, ../sass/mobile/_layout.scss */
.button-pos {
left: 257px; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 47, ../sass/mobile/_layout.scss */
.button-pos {
left: 399.5px; } }
/* line 58, ../sass/mobile/_layout.scss */
/* line 73, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 58, ../sass/mobile/_layout.scss */
.object-header-mobile {
left: 25.7px; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 58, ../sass/mobile/_layout.scss */
.object-header-mobile {
left: 39.95px; } }
/* line 68, ../sass/mobile/_layout.scss */
/* line 77, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
top: 5px; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 68, ../sass/mobile/_layout.scss */
/* line 77, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
font-size: 125%; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 68, ../sass/mobile/_layout.scss */
/* line 77, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
font-size: 175%; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 68, ../sass/mobile/_layout.scss */
/* line 77, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 81, ../sass/mobile/_layout.scss */
/* line 90, ../sass/mobile/_layout.scss */
.mobile-hide {
display: none; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 81, ../sass/mobile/_layout.scss */
/* line 90, ../sass/mobile/_layout.scss */
.mobile-hide {
display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 90, ../sass/mobile/_layout.scss */
/* line 99, ../sass/mobile/_layout.scss */
.phone-hide {
display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 96, ../sass/mobile/_layout.scss */
.browse-manage {
width: 257px; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 96, ../sass/mobile/_layout.scss */
.browse-manage {
width: 399.5px; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 96, ../sass/mobile/_layout.scss */
.browse-manage {
min-width: 150px;
max-width: 800px;
width: 25%; } }
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space

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

@@ -20,49 +20,58 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
// style="min-width: 150px; max-width: 800px; width: 25%;"
// NOTE: Added to adjust the browse folder tree list view
// NOTE: Added to adjust the browse folder left list view
.holder-hide {
@include phone {
@include transition-duration(.2s);
left: (-1) * $phoneSlideMenuWidth;
}
@include tablet {
@include transition-duration(.2s);
left: (-1) * $tabletSlideMenuWidth;
}
.browse-wrapper,
.pane-special {
position: absolute;
left: 0; top: 0;
right: 0; left: 0;
white-space: nowrap;
height: 100%;
// overflow: hidden;
}
.holder-show {
@include transition-duration(.2s);
@include phone {
left: 0px;
.browse-hidetree {
.pane-special.left {
// background-color: #FFF;
// right: auto;
// width: 50px;
display: none !important;
}
@include tablet {
left: 0px;
}
.pane-special.right {
// background-color: #325DE6;
width: auto !important;
left: 0px !important;
}
}
.browse-showtree {
.pane-special.left {
display: block !important;
// background-color: #FFF;
width: 300px !important;
right: auto !important;
}
.pane-special.right {
// background-color: #325DE6;
left: 300px !important;
width: auto !important;
}
}
.button-pos {
position: absolute;
@include transition-duration(.2s);
@include phone {
left: $phoneSlideMenuWidth;
}
@include tablet {
left: $tabletSlideMenuWidth;
}
@include transition-duration(.2s);
}
.object-header-mobile {
position: relative;
@include phone {
left: $phoneSlideMenuWidth/10;
}
@include tablet {
left: $tabletSlideMenuWidth/10;
}
}
.mobile-menu-icon {
@@ -92,17 +101,3 @@
display: none;
}
}
.browse-manage {
@include phone {
width: $phoneSlideMenuWidth;
}
@include tablet {
width: $tabletSlideMenuWidth;
}
@include desktop {
min-width: 150px;
max-width: 800px;
width: 25%;
}
}

1
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@@ -249,6 +249,7 @@
&.vertical {
// Slides left and right
>.pane {
// @include test();
margin-left: $interiorMargin;
>.holder {
left: 0;