mirror of
https://github.com/nasa/openmct.git
synced 2024-12-29 17:38:53 +00:00
[Mobile] Left tree
Attempt to resize left tree menu when changing device. Currently does not move the splitter bar.
This commit is contained in:
Dave
parent
79fb6eabd9
commit
24fae72492
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
<mct-splitter></mct-splitter>
|
||||
<div class='split-pane-component items pane'>
|
||||
<div class='holder abs rem-display' id='content-area'>
|
||||
<div class='holder abs' id='content-area'>
|
||||
<mct-representation mct-object="navigatedObject" key="'browse-object'">
|
||||
</mct-representation>
|
||||
</div>
|
||||
|
||||
@ -474,13 +474,24 @@ mct-container {
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px; }
|
||||
|
||||
/* line 57, ../sass/user-environ/_layout.scss */
|
||||
.browser-manage {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: 25%; }
|
||||
@media screen and (max-width: 514px) {
|
||||
/* line 57, ../sass/user-environ/_layout.scss */
|
||||
.browser-manage {
|
||||
width: 150px; } }
|
||||
@media screen and (min-width: 515px) and (max-width: 800px) {
|
||||
/* line 57, ../sass/user-environ/_layout.scss */
|
||||
.browser-manage {
|
||||
min-width: 150px;
|
||||
max-width: 300px;
|
||||
width: 25%; } }
|
||||
@media screen and (min-width: 801px) {
|
||||
/* line 57, ../sass/user-environ/_layout.scss */
|
||||
.browser-manage {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: 25%; } }
|
||||
|
||||
/* line 75, ../sass/user-environ/_layout.scss */
|
||||
/* line 73, ../sass/user-environ/_layout.scss */
|
||||
.contents {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
@ -488,36 +499,36 @@ mct-container {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; }
|
||||
/* line 83, ../sass/user-environ/_layout.scss */
|
||||
/* line 81, ../sass/user-environ/_layout.scss */
|
||||
.contents.nomargin {
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px; }
|
||||
|
||||
/* line 92, ../sass/user-environ/_layout.scss */
|
||||
/* line 90, ../sass/user-environ/_layout.scss */
|
||||
.bar .icon.major {
|
||||
margin-right: 5px; }
|
||||
/* line 95, ../sass/user-environ/_layout.scss */
|
||||
/* line 93, ../sass/user-environ/_layout.scss */
|
||||
.bar.abs, .btn-menu span.bar.l-click-area {
|
||||
text-wrap: none;
|
||||
white-space: nowrap; }
|
||||
/* line 99, ../sass/user-environ/_layout.scss */
|
||||
/* line 97, ../sass/user-environ/_layout.scss */
|
||||
.bar.left,
|
||||
.bar .left {
|
||||
width: 45% !important;
|
||||
right: auto !important; }
|
||||
/* line 104, ../sass/user-environ/_layout.scss */
|
||||
/* line 102, ../sass/user-environ/_layout.scss */
|
||||
.bar.right,
|
||||
.bar .right {
|
||||
width: 45% !important;
|
||||
left: auto !important;
|
||||
text-align: right; }
|
||||
/* line 109, ../sass/user-environ/_layout.scss */
|
||||
/* line 107, ../sass/user-environ/_layout.scss */
|
||||
.bar.right .icon.major,
|
||||
.bar .right .icon.major {
|
||||
margin-left: 15px; }
|
||||
|
||||
/* line 116, ../sass/user-environ/_layout.scss */
|
||||
/* line 114, ../sass/user-environ/_layout.scss */
|
||||
.user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
@ -525,23 +536,23 @@ mct-container {
|
||||
right: 10px;
|
||||
bottom: 35px;
|
||||
left: 10px; }
|
||||
/* line 127, ../sass/user-environ/_layout.scss */
|
||||
/* line 125, ../sass/user-environ/_layout.scss */
|
||||
.user-environ .browse-area > .contents,
|
||||
.user-environ .edit-area > .contents {
|
||||
left: 0;
|
||||
right: 0; }
|
||||
/* line 133, ../sass/user-environ/_layout.scss */
|
||||
/* line 131, ../sass/user-environ/_layout.scss */
|
||||
.user-environ .edit-area {
|
||||
top: 45px; }
|
||||
/* line 136, ../sass/user-environ/_layout.scss */
|
||||
/* line 134, ../sass/user-environ/_layout.scss */
|
||||
.user-environ .edit-area .tool-bar {
|
||||
bottom: auto;
|
||||
height: 30px;
|
||||
line-height: 25px; }
|
||||
/* line 141, ../sass/user-environ/_layout.scss */
|
||||
/* line 139, ../sass/user-environ/_layout.scss */
|
||||
.user-environ .edit-area .work-area {
|
||||
top: 40px; }
|
||||
/* line 146, ../sass/user-environ/_layout.scss */
|
||||
/* line 144, ../sass/user-environ/_layout.scss */
|
||||
.user-environ .bottom-bar {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
@ -553,20 +564,20 @@ mct-container {
|
||||
height: auto;
|
||||
top: auto;
|
||||
height: 25px; }
|
||||
/* line 151, ../sass/user-environ/_layout.scss */
|
||||
/* line 149, ../sass/user-environ/_layout.scss */
|
||||
.user-environ .bottom-bar .status-holder {
|
||||
z-index: 1; }
|
||||
/* line 155, ../sass/user-environ/_layout.scss */
|
||||
/* line 153, ../sass/user-environ/_layout.scss */
|
||||
.user-environ .bottom-bar .app-logo {
|
||||
left: auto;
|
||||
width: 105px;
|
||||
z-index: 2; }
|
||||
|
||||
/* line 163, ../sass/user-environ/_layout.scss */
|
||||
/* line 161, ../sass/user-environ/_layout.scss */
|
||||
.cols {
|
||||
overflow: hidden;
|
||||
*zoom: 1; }
|
||||
/* line 165, ../sass/user-environ/_layout.scss */
|
||||
/* line 163, ../sass/user-environ/_layout.scss */
|
||||
.cols .col {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -577,100 +588,100 @@ mct-container {
|
||||
margin-left: 1.5%;
|
||||
padding-left: 5px;
|
||||
position: relative; }
|
||||
/* line 173, ../sass/user-environ/_layout.scss */
|
||||
/* line 171, ../sass/user-environ/_layout.scss */
|
||||
.cols .col:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0; }
|
||||
/* line 180, ../sass/user-environ/_layout.scss */
|
||||
/* line 178, ../sass/user-environ/_layout.scss */
|
||||
.cols.cols-2 .col-1 {
|
||||
min-width: 250px;
|
||||
width: 48.5%; }
|
||||
/* line 186, ../sass/user-environ/_layout.scss */
|
||||
/* line 184, ../sass/user-environ/_layout.scss */
|
||||
.cols.cols-2-ff .col-100px {
|
||||
width: 100px; }
|
||||
/* line 193, ../sass/user-environ/_layout.scss */
|
||||
/* line 191, ../sass/user-environ/_layout.scss */
|
||||
.cols.cols-6 .col-1 {
|
||||
min-width: 83.33333px;
|
||||
width: 15.16667%; }
|
||||
/* line 199, ../sass/user-environ/_layout.scss */
|
||||
/* line 197, ../sass/user-environ/_layout.scss */
|
||||
.cols.cols-16 .col-1 {
|
||||
min-width: 31.25px;
|
||||
width: 4.75%; }
|
||||
/* line 202, ../sass/user-environ/_layout.scss */
|
||||
/* line 200, ../sass/user-environ/_layout.scss */
|
||||
.cols.cols-16 .col-2 {
|
||||
min-width: 62.5px;
|
||||
width: 11%; }
|
||||
/* line 205, ../sass/user-environ/_layout.scss */
|
||||
/* line 203, ../sass/user-environ/_layout.scss */
|
||||
.cols.cols-16 .col-7 {
|
||||
min-width: 218.75px;
|
||||
width: 42.25%; }
|
||||
/* line 211, ../sass/user-environ/_layout.scss */
|
||||
/* line 209, ../sass/user-environ/_layout.scss */
|
||||
.cols.cols-32 .col-2 {
|
||||
min-width: 31.25px;
|
||||
width: 4.75%; }
|
||||
/* line 214, ../sass/user-environ/_layout.scss */
|
||||
/* line 212, ../sass/user-environ/_layout.scss */
|
||||
.cols.cols-32 .col-15 {
|
||||
min-width: 234.375px;
|
||||
width: 45.375%; }
|
||||
/* line 218, ../sass/user-environ/_layout.scss */
|
||||
/* line 216, ../sass/user-environ/_layout.scss */
|
||||
.cols .l-row {
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
padding: 5px 0; }
|
||||
|
||||
/* line 224, ../sass/user-environ/_layout.scss */
|
||||
/* line 222, ../sass/user-environ/_layout.scss */
|
||||
.pane {
|
||||
position: absolute; }
|
||||
/* line 227, ../sass/user-environ/_layout.scss */
|
||||
/* line 225, ../sass/user-environ/_layout.scss */
|
||||
.pane.treeview .create-btn-holder {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
height: 24px; }
|
||||
/* line 230, ../sass/user-environ/_layout.scss */
|
||||
/* line 228, ../sass/user-environ/_layout.scss */
|
||||
.pane.treeview .create-btn-holder .wrapper.menu-element {
|
||||
position: absolute;
|
||||
bottom: 5px; }
|
||||
/* line 235, ../sass/user-environ/_layout.scss */
|
||||
/* line 233, ../sass/user-environ/_layout.scss */
|
||||
.pane.treeview .tree-holder {
|
||||
overflow: auto;
|
||||
top: 34px; }
|
||||
/* line 242, ../sass/user-environ/_layout.scss */
|
||||
/* line 240, ../sass/user-environ/_layout.scss */
|
||||
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
|
||||
.pane.items .object-browse-bar .right.abs,
|
||||
.pane.items .object-browse-bar .btn-menu span.right.l-click-area,
|
||||
.btn-menu .pane.items .object-browse-bar span.right.l-click-area {
|
||||
top: auto; }
|
||||
/* line 247, ../sass/user-environ/_layout.scss */
|
||||
/* line 245, ../sass/user-environ/_layout.scss */
|
||||
.pane.items .object-holder {
|
||||
top: 34px; }
|
||||
/* line 252, ../sass/user-environ/_layout.scss */
|
||||
/* line 250, ../sass/user-environ/_layout.scss */
|
||||
.pane.edit-main .object-holder {
|
||||
top: 0; }
|
||||
/* line 258, ../sass/user-environ/_layout.scss */
|
||||
/* line 256, ../sass/user-environ/_layout.scss */
|
||||
.pane .object-holder {
|
||||
overflow: auto; }
|
||||
|
||||
/* line 266, ../sass/user-environ/_layout.scss */
|
||||
/* line 264, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.horizontal > .pane {
|
||||
margin-top: 5px; }
|
||||
/* line 269, ../sass/user-environ/_layout.scss */
|
||||
/* line 267, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.horizontal > .pane:first-child {
|
||||
margin-top: 0; }
|
||||
/* line 276, ../sass/user-environ/_layout.scss */
|
||||
/* line 274, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.vertical > .pane {
|
||||
margin-left: 5px; }
|
||||
/* line 278, ../sass/user-environ/_layout.scss */
|
||||
/* line 276, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.vertical > .pane > .holder {
|
||||
left: 0;
|
||||
right: 0; }
|
||||
/* line 282, ../sass/user-environ/_layout.scss */
|
||||
/* line 280, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.vertical > .pane:first-child {
|
||||
margin-left: 0; }
|
||||
/* line 284, ../sass/user-environ/_layout.scss */
|
||||
/* line 282, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.vertical > .pane:first-child .holder {
|
||||
right: 5px; }
|
||||
|
||||
/* line 293, ../sass/user-environ/_layout.scss */
|
||||
/* line 291, ../sass/user-environ/_layout.scss */
|
||||
.vscroll {
|
||||
overflow-y: auto; }
|
||||
|
||||
|
||||
@ -55,21 +55,17 @@ $min-large: 770px;
|
||||
|
||||
// style="min-width: 150px; max-width: 800px; width: 25%;"
|
||||
.browser-manage {
|
||||
// @media only screen and ($max-name : $max-small) {
|
||||
// width: 100%;
|
||||
// }
|
||||
//
|
||||
// @media only screen and ($min-name : $min-large) {
|
||||
@include phone {
|
||||
width: 150px;
|
||||
}
|
||||
@include tablet {
|
||||
width: 150px;
|
||||
}
|
||||
@include desktop {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: 25%;
|
||||
// }
|
||||
}
|
||||
|
||||
.rem-display {
|
||||
// @media only screen and ($max-name : $max-small) {
|
||||
// display: none;
|
||||
// }
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
<!--
|
||||
Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT Web includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
|
||||
ng-class="{ labeled: parameters.labeled }"
|
||||
title="{{parameters.action.getMetadata().description}}"
|
||||
ng-click="parameters.action.perform()">
|
||||
<span class="ui-symbol icon">
|
||||
{{parameters.action.getMetadata().glyph}}
|
||||
</span>
|
||||
<span class="title-label" ng-if="parameters.labeled">
|
||||
{{parameters.action.getMetadata().name}}
|
||||
</span>
|
||||
</a>
|
||||
Loading…
Reference in New Issue
Block a user