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

[Mobile] Clean-Up

Browse Source 
Removed unnecessary classes. Also added
comments and adjusted menu sizes.
This commit is contained in:
Shivam Dave
2015-07-20 09:39:06 -07:00
parent 6e406fd060
commit ce6d74390e
11 changed files with 139 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
platform/commonUI/browse/res/templates/browse.html
View File

@@ -23,14 +23,9 @@
<div ng-controller="BrowseController"> <div ng-controller="BrowseController">
<div content="jquery-wrapper" class="abs holder-all browse-mode"> <div content="jquery-wrapper" class="abs holder-all browse-mode">
<mct-include key="'topbar-browse'"></mct-include> <mct-include key="'topbar-browse'"></mct-include>
<!-- 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'"> <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs' anchor='left'> <mct-split-pane class='contents abs' anchor='left'>
<div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
<!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
<div class='split-pane-component treeview pane pane-special left desktop-browse'>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
<mct-representation key="'tree'" <mct-representation key="'tree'"
mct-object="domainObject" mct-object="domainObject"
@@ -41,9 +36,8 @@
</mct-representation> </mct-representation>
</div> </div>
<mct-splitter class="mobile-splitter"></mct-splitter> <mct-splitter class="mobile-hide"></mct-splitter>
<!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example--> <div class='split-pane-component items pane mobile-pane right-repr'>
<div class='split-pane-component items pane pane-special right'>
<div class='holder abs' id='content-area'> <div class='holder abs' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>

2
platform/commonUI/browse/res/templates/create/create-button.html
View File

@@ -23,7 +23,7 @@
<div class="btn btn-menu create-btn major" ng-click="createController.toggle()"> <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
Create Create
</div> </div>
<div class="menu dropdown super-menu mobile-super-menu" ng-show="createController.isActive()"> <div class="menu dropdown super-menu" ng-show="createController.isActive()">
<mct-representation mct-object="domainObject" key="'create-menu'"> <mct-representation mct-object="domainObject" key="'create-menu'">
</mct-representation> </mct-representation>
</div> </div>

6
platform/commonUI/browse/res/templates/create/create-menu.html
View File

@@ -20,11 +20,11 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="contents" ng-controller="CreateMenuController"> <div class="contents" ng-controller="CreateMenuController">
<div class="pane left menu-items mobile-super-menu"> <div class="pane left menu-items">
<ul> <ul>
<li ng-repeat="createAction in createActions"> <li ng-repeat="createAction in createActions">
<a class="mobile-super-menu-text" <a
ng-click="createAction.perform()" ng-click="createAction.perform()"
ng-mouseover="representation.activeMetadata = createAction.getMetadata()" ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
ng-mouseleave="representation.activeMetadata = undefined"> ng-mouseleave="representation.activeMetadata = undefined">
@@ -37,7 +37,7 @@
</ul> </ul>
</div> </div>
<div class="pane right menu-item-description mobile-right-create"> <div class="pane right menu-item-description">
<div class="desc-area ui-symbol icon type-icon"> <div class="desc-area ui-symbol icon type-icon">
{{representation.activeMetadata.glyph}} {{representation.activeMetadata.glyph}}
</div> </div>

2
platform/commonUI/general/res/css/forms.css
View File

@@ -72,7 +72,7 @@
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

16
platform/commonUI/general/res/css/items.css
View File

@@ -72,7 +72,7 @@
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@@ -351,25 +351,21 @@
* at runtime from the About dialog for additional information. * 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) { @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 24, ../sass/mobile/_item.scss */ /* line 28, ../sass/mobile/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 100%; width: 100%;
height: 50px; } } height: 50px; } }
@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) { @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 24, ../sass/mobile/_item.scss */ /* line 28, ../sass/mobile/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 100%; width: 100%;
height: 100px; } } height: 100px; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 24, ../sass/mobile/_item.scss */ /* line 28, ../sass/mobile/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 200px; width: 200px;
height: 200px; } } height: 200px; } }
@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) { @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), 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 49, ../sass/mobile/_item.scss */ /* line 52, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .icon {
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 49, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .icon { .items-holder .item.grid-item .icon {
display: none; } } display: none; } }

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

@@ -73,7 +73,7 @@
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@@ -737,7 +737,7 @@ mct-container {
@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), 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) { @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), 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 25, ../sass/mobile/_layout.scss */ /* line 25, ../sass/mobile/_layout.scss */
.browse-wrapper, .browse-wrapper,
.pane-special { .mobile-pane {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -747,15 +747,15 @@ mct-container {
height: 100%; } } height: 100%; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 37, ../sass/mobile/_layout.scss */ /* line 38, ../sass/mobile/_layout.scss */
.desktop-browse { .desktop-browse {
min-width: 150px; min-width: 150px;
max-width: 800px; max-width: 800px;
width: 25%; } } width: 25%; } }
@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), 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) { @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), 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 48, ../sass/mobile/_layout.scss */ /* line 50, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left { .browse-hidetree .mobile-pane.left-menu {
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
@@ -779,8 +779,8 @@ mct-container {
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; } } overflow-x: hidden; } }
@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), 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) { @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), 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 60, ../sass/mobile/_layout.scss */ /* line 62, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.right { .browse-hidetree .mobile-pane.right-repr {
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
@@ -790,8 +790,8 @@ mct-container {
width: 100% !important; } } width: 100% !important; } }
@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), 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) { @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), 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 70, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left { .browse-showtree .mobile-pane.left-menu {
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
@@ -813,24 +813,24 @@ mct-container {
display: block !important; display: block !important;
width: auto !important; } } width: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 70, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left { .browse-showtree .mobile-pane.left-menu {
right: 19px !important; } } right: 19px !important; } }
@media 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) { @media 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 70, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left { .browse-showtree .mobile-pane.left-menu {
right: 66% !important; } } right: 66% !important; } }
@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) { @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) {
/* line 70, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left { .browse-showtree .mobile-pane.left-menu {
right: 600px !important; } } right: 500px !important; } }
@media 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) { @media 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 70, ../sass/mobile/_layout.scss */ /* line 77, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left { .browse-showtree .mobile-pane.left-menu {
right: 78% !important; } } right: 78% !important; } }
@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), 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) { @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), 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 91, ../sass/mobile/_layout.scss */ /* line 98, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-showtree .mobile-pane.right-repr {
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
@@ -838,29 +838,24 @@ mct-container {
transition-timing-function: ease; transition-timing-function: ease;
left: auto !important; } } left: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 91, ../sass/mobile/_layout.scss */ /* line 98, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-showtree .mobile-pane.right-repr {
width: 19px !important; } } width: 19px !important; } }
@media 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) { @media 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 91, ../sass/mobile/_layout.scss */ /* line 98, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-showtree .mobile-pane.right-repr {
width: 66% !important; } } width: 66% !important; } }
@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) { @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) {
/* line 91, ../sass/mobile/_layout.scss */ /* line 98, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-showtree .mobile-pane.right-repr {
width: 600px !important; } } width: 500px !important; } }
@media 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) { @media 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 91, ../sass/mobile/_layout.scss */ /* line 98, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-showtree .mobile-pane.right-repr {
width: 78% !important; } } width: 78% !important; } }
@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), 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) { @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), 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 111, ../sass/mobile/_layout.scss */ /* line 119, ../sass/mobile/_layout.scss */
.mobile-splitter {
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), 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 117, ../sass/mobile/_layout.scss */
.button-pos { .button-pos {
position: absolute; position: absolute;
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
@@ -870,23 +865,23 @@ mct-container {
transition-timing-function: ease; } } transition-timing-function: ease; } }
@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) { @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 124, ../sass/mobile/_layout.scss */ /* line 129, ../sass/mobile/_layout.scss */
.object-header-mobile { .object-header-mobile {
position: relative; position: relative;
left: 30px; } } left: 30px; } }
@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) { @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 124, ../sass/mobile/_layout.scss */ /* line 129, ../sass/mobile/_layout.scss */
.object-header-mobile { .object-header-mobile {
position: relative; position: relative;
left: 35px; } } left: 35px; } }
@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), 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) { @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), 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 135, ../sass/mobile/_layout.scss */ /* line 141, ../sass/mobile/_layout.scss */
.mobile-hide { .mobile-hide {
display: none; } } 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) { @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 141, ../sass/mobile/_layout.scss */ /* line 148, ../sass/mobile/_layout.scss */
.phone-hide { .phone-hide {
display: none; } } display: none; } }
@@ -2892,39 +2887,43 @@ label.checkbox.custom {
right: 0; right: 0;
width: auto; } width: auto; }
/* line 2, ../sass/mobile/controls/_menus.scss */ /*****************************************************************************
* 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.
*****************************************************************************/
/* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {
display: inline-block; } display: inline-block; }
@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) { @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 2, ../sass/mobile/controls/_menus.scss */ /* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 25px; } } font-size: 25px; } }
@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) { @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 2, ../sass/mobile/controls/_menus.scss */ /* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 29px; } } font-size: 29px; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 2, ../sass/mobile/controls/_menus.scss */ /* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {
display: none; } } 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), 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 15, ../sass/mobile/controls/_menus.scss */
.mobile-super-menu {
border-right: 0px !important;
padding-right: 0px !important; } }
/* line 22, ../sass/mobile/controls/_menus.scss */
.mobile-super-menu-text {
overflow-x: hidden !important;
text-overflow: ellipsis !important; }
@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), 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 27, ../sass/mobile/controls/_menus.scss */
.mobile-right-create {
width: 0px !important;
padding: 0px !important; } }
/* line 1, ../sass/controls/_time-controller.scss */ /* line 1, ../sass/controls/_time-controller.scss */
.l-time-controller { .l-time-controller {
position: relative; position: relative;

2
platform/commonUI/general/res/css/tree.css
View File

@@ -72,7 +72,7 @@
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space

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

@@ -66,9 +66,9 @@ $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mo
$desktopPortrait: "screen and #{$desktopPortraitCheck}"; $desktopPortrait: "screen and #{$desktopPortraitCheck}";
$desktopLandscape: "screen and #{$desktopLanscapeCheck}"; $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS */ /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
$phoneMenuSizePortrait: 19px; $phoneRepSizePortrait: 19px;
$phoneMenuSizeLandscape: 66%; $phoneRepSizeLandscape: 66%;
$tabletMenuSizePortrait: 600px; $tabletRepSizePortrait: 500px;
$tabletMenuSizeLandscape: 78%; $tabletRepSizeLandscape: 78%;
$desktopMenuSize: 25%; $desktopMenuSize: 25%;

10
platform/commonUI/general/res/sass/mobile/_item.scss
View File

@@ -19,10 +19,13 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
// Sets the size of the items in the folder
// representation. Instead of a grid,
// a list is used.
.items-holder { .items-holder {
.item { .item {
&.grid-item { &.grid-item {
// NOTE: Sets grid item width
$dWid: $ueBrowseGridItemLg; $dWid: $ueBrowseGridItemLg;
$dHei: $ueBrowseGridItemLg; $dHei: $ueBrowseGridItemLg;
@include phone { @include phone {
@@ -47,10 +50,7 @@
} }
.icon { .icon {
@include phone { @include phoneandtablet {
display: none;
}
@include tablet {
display: none; display: none;
} }
} }

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

@@ -20,8 +20,10 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
// Wrapper of the entire 2 panes, only enacted on
// phone and tablet. Also for the panes
.browse-wrapper, .browse-wrapper,
.pane-special { .mobile-pane {
@include phoneandtablet { @include phoneandtablet {
position: absolute; position: absolute;
left: 0; top: 0; left: 0; top: 0;
@@ -31,7 +33,8 @@
} }
} }
// Default views of the panels
// if in desktop browser
.desktop-browse { .desktop-browse {
@include desktop { @include desktop {
min-width: 150px; min-width: 150px;
@@ -40,10 +43,11 @@
} }
} }
// When the tree is hidden, these are the
// classes used for the left menu and the
// right representation.
.browse-hidetree { .browse-hidetree {
.pane-special.left { .mobile-pane.left-menu {
@include phoneandtablet { @include phoneandtablet {
@include slMenuTransitions; @include slMenuTransitions;
@include trans-prop-nice(opacity, .35s); @include trans-prop-nice(opacity, .35s);
@@ -55,7 +59,7 @@
} }
} }
.pane-special.right { .mobile-pane.right-repr {
@include phoneandtablet { @include phoneandtablet {
@include slMenuTransitions; @include slMenuTransitions;
left: auto !important; left: auto !important;
@@ -64,8 +68,13 @@
} }
} }
// When the tree is shown, these are
// the classes used for the left menu
// and the right menu (for each device &
// orientation combination, separate
// parameters are used)
.browse-showtree { .browse-showtree {
.pane-special.left { .mobile-pane.left-menu {
@include phoneandtablet { @include phoneandtablet {
@include slMenuTransitions; @include slMenuTransitions;
@include trans-prop-nice(opacity, .4s); @include trans-prop-nice(opacity, .4s);
@@ -74,44 +83,39 @@
width: auto !important; width: auto !important;
} }
@include phonePortrait { @include phonePortrait {
right: $phoneMenuSizePortrait !important; right: $phoneRepSizePortrait !important;
} }
@include phoneLandscape { @include phoneLandscape {
right: $phoneMenuSizeLandscape !important; right: $phoneRepSizeLandscape !important;
} }
@include tabletPortrait { @include tabletPortrait {
right: $tabletMenuSizePortrait !important; right: $tabletRepSizePortrait !important;
} }
@include tabletLandscape { @include tabletLandscape {
right: $tabletMenuSizeLandscape !important; right: $tabletRepSizeLandscape !important;
} }
} }
.pane-special.right { .mobile-pane.right-repr {
@include phoneandtablet { @include phoneandtablet {
@include slMenuTransitions; @include slMenuTransitions;
left: auto !important; left: auto !important;
} }
@include phonePortrait { @include phonePortrait {
width: $phoneMenuSizePortrait !important; width: $phoneRepSizePortrait !important;
} }
@include phoneLandscape { @include phoneLandscape {
width: $phoneMenuSizeLandscape !important; width: $phoneRepSizeLandscape !important;
} }
@include tabletPortrait { @include tabletPortrait {
width: $tabletMenuSizePortrait !important; width: $tabletRepSizePortrait !important;
} }
@include tabletLandscape { @include tabletLandscape {
width: $tabletMenuSizeLandscape !important; width: $tabletRepSizeLandscape !important;
} }
} }
} }
.mobile-splitter { // Button position is set as absolute with transitions
@include phoneandtablet {
display: none;
}
}
.button-pos { .button-pos {
@include phoneandtablet { @include phoneandtablet {
position: absolute; position: absolute;
@@ -119,6 +123,9 @@
} }
} }
// Object header must be moved
// over to make space for the
// hamburger icon
.object-header-mobile { .object-header-mobile {
@include phone { @include phone {
position: relative; position: relative;
@@ -130,12 +137,14 @@
} }
} }
// Hides objects on phone and tablet
.mobile-hide { .mobile-hide {
@include phoneandtablet { @include phoneandtablet {
display: none; display: none;
} }
} }
// Hides objects only on the phone
.phone-hide { .phone-hide {
@include phone { @include phone {
display: none; display: none;

42
platform/commonUI/general/res/sass/mobile/controls/_menus.scss
View File

@@ -1,4 +1,27 @@
/*****************************************************************************
* 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.
*****************************************************************************/
// Mobile hamburger icon is
// sized according to the device
.mobile-menu-icon { .mobile-menu-icon {
display: inline-block; display: inline-block;
@include phone { @include phone {
@@ -11,22 +34,3 @@
display: none; display: none;
} }
} }
.mobile-super-menu {
@include phoneandtablet {
border-right: 0px !important;
padding-right: 0px !important;
}
}
.mobile-super-menu-text {
overflow-x: hidden !important;
text-overflow: ellipsis !important;
}
.mobile-right-create {
@include phoneandtablet {
width: 0px !important;
padding: 0px !important;
}
}