mirror of
https://github.com/nasa/openmct.git
synced 2024-12-30 01:48:51 +00:00
[Mobile] Slide menu
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
parent
ee35976c92
commit
4b5540830b
@ -19,12 +19,18 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
|
||||
<div ng-controller="BrowseController">
|
||||
<div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeClass ? 'holder-show' : 'holder-hide'">
|
||||
<div content="jquery-wrapper" class="abs holder-all browse-mode">
|
||||
<mct-include key="'topbar-browse'"></mct-include>
|
||||
<div class="holder browse-area s-browse-area abs">
|
||||
<mct-split-pane class='contents abs' anchor='left'>
|
||||
<div class='split-pane-component treeview pane browse-manage createtreebtns'>
|
||||
|
||||
<!-- WRAPPER CLASS IS HERE-->
|
||||
<!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
|
||||
<div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'" anchor='left'>
|
||||
<mct-split-pane class='contents abs'>
|
||||
|
||||
<!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
|
||||
<div class='split-pane-component treeview pane pane-special left'>
|
||||
<mct-representation key="'create-button'" mct-object="navigatedObject">
|
||||
</mct-representation>
|
||||
<div class='holder tree-holder abs'>
|
||||
@ -34,17 +40,20 @@
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mct-splitter class="mobile-hide"></mct-splitter>
|
||||
<div class='split-pane-component items pane'>
|
||||
<div class='holder abs hider-check' id='content-area'>
|
||||
|
||||
<!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
|
||||
<div class='split-pane-component items pane pane-special right'>
|
||||
<div class='holder abs' id='content-area'>
|
||||
<mct-representation mct-object="navigatedObject" key="'browse-object'">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
</mct-split-pane>
|
||||
<div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos"
|
||||
ng-click="treeSlide()">m</div>
|
||||
</div>
|
||||
</mct-split-pane>
|
||||
</div>
|
||||
<mct-include key="'bottombar'"></mct-include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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,110 +734,76 @@ 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 */
|
||||
.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 */
|
||||
.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 */
|
||||
.phone-hide {
|
||||
.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 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 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%; } }
|
||||
/* line 99, ../sass/mobile/_layout.scss */
|
||||
.phone-hide {
|
||||
display: none; } }
|
||||
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
|
||||
@ -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;
|
||||
.browse-wrapper,
|
||||
.pane-special {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
right: 0; left: 0;
|
||||
white-space: nowrap;
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
.browse-hidetree {
|
||||
.pane-special.left {
|
||||
// background-color: #FFF;
|
||||
// right: auto;
|
||||
// width: 50px;
|
||||
display: none !important;
|
||||
}
|
||||
@include tablet {
|
||||
@include transition-duration(.2s);
|
||||
left: (-1) * $tabletSlideMenuWidth;
|
||||
|
||||
.pane-special.right {
|
||||
// background-color: #325DE6;
|
||||
width: auto !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.holder-show {
|
||||
@include transition-duration(.2s);
|
||||
@include phone {
|
||||
left: 0px;
|
||||
.browse-showtree {
|
||||
.pane-special.left {
|
||||
display: block !important;
|
||||
// background-color: #FFF;
|
||||
width: 300px !important;
|
||||
right: auto !important;
|
||||
}
|
||||
@include tablet {
|
||||
left: 0px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -249,6 +249,7 @@
|
||||
&.vertical {
|
||||
// Slides left and right
|
||||
>.pane {
|
||||
// @include test();
|
||||
margin-left: $interiorMargin;
|
||||
>.holder {
|
||||
left: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user