ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-21 09:52:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Mobile] Set viewport

Browse Source 
Viewport has been set in
index.html. Then what was
implemented prior to this
(rem-display and browser-manage)
was commented out.
This commit is contained in:
Shivam Dave 2015-07-07 09:08:16 -07:00
parent 0c6a9ca857
commit d8806f14aa
4 changed files with 70 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -23,6 +23,7 @@
<html> <html>
<head lang="en"> <head lang="en">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title> <title></title>
<script type="text/javascript" <script type="text/javascript"
src="platform/framework/lib/require.js" src="platform/framework/lib/require.js"

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

@ -24,7 +24,6 @@
<div class="holder browse-area s-browse-area abs" ng-controller="BrowseController"> <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
<mct-split-pane class='contents abs' anchor='left'> <mct-split-pane class='contents abs' anchor='left'>
<div class='split-pane-component treeview pane browser-manage'> <div class='split-pane-component treeview pane browser-manage'>
<!-- style="min-width: 150px; max-width: 800px; width: 25%;"-->
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
@ -36,7 +35,7 @@
</div> </div>
<mct-splitter></mct-splitter> <mct-splitter></mct-splitter>
<div class='split-pane-component items pane'> <div class='split-pane-component items pane'>
<div class='holder abs' id='content-area'> <div class='holder abs rem-display' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>
</div> </div>

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

@ -467,17 +467,19 @@ mct-container {
.editor { .editor {
position: absolute; } position: absolute; }
/* line 46, ../sass/user-environ/_layout.scss */ /* line 47, ../sass/user-environ/_layout.scss */
.editor { .editor {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; } border-radius: 3px; }
/* line 51, ../sass/user-environ/_layout.scss */ /* line 57, ../sass/user-environ/_layout.scss */
.browser-manage { .browser-manage {
width: 100%; } min-width: 150px;
max-width: 800px;
width: 25%; }
/* line 55, ../sass/user-environ/_layout.scss */ /* line 75, ../sass/user-environ/_layout.scss */
.contents { .contents {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
@ -485,36 +487,36 @@ mct-container {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 63, ../sass/user-environ/_layout.scss */ /* line 83, ../sass/user-environ/_layout.scss */
.contents.nomargin { .contents.nomargin {
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
left: 0px; } left: 0px; }
/* line 72, ../sass/user-environ/_layout.scss */ /* line 92, ../sass/user-environ/_layout.scss */
.bar .icon.major { .bar .icon.major {
margin-right: 5px; } margin-right: 5px; }
/* line 75, ../sass/user-environ/_layout.scss */ /* line 95, ../sass/user-environ/_layout.scss */
.bar.abs, .btn-menu span.bar.l-click-area { .bar.abs, .btn-menu span.bar.l-click-area {
text-wrap: none; text-wrap: none;
white-space: nowrap; } white-space: nowrap; }
/* line 79, ../sass/user-environ/_layout.scss */ /* line 99, ../sass/user-environ/_layout.scss */
.bar.left, .bar.left,
.bar .left { .bar .left {
width: 45% !important; width: 45% !important;
right: auto !important; } right: auto !important; }
/* line 84, ../sass/user-environ/_layout.scss */ /* line 104, ../sass/user-environ/_layout.scss */
.bar.right, .bar.right,
.bar .right { .bar .right {
width: 45% !important; width: 45% !important;
left: auto !important; left: auto !important;
text-align: right; } text-align: right; }
/* line 89, ../sass/user-environ/_layout.scss */ /* line 109, ../sass/user-environ/_layout.scss */
.bar.right .icon.major, .bar.right .icon.major,
.bar .right .icon.major { .bar .right .icon.major {
margin-left: 15px; } margin-left: 15px; }
/* line 96, ../sass/user-environ/_layout.scss */ /* line 116, ../sass/user-environ/_layout.scss */
.user-environ .browse-area, .user-environ .browse-area,
.user-environ .edit-area, .user-environ .edit-area,
.user-environ .editor { .user-environ .editor {
@ -522,23 +524,23 @@ mct-container {
right: 10px; right: 10px;
bottom: 35px; bottom: 35px;
left: 10px; } left: 10px; }
/* line 107, ../sass/user-environ/_layout.scss */ /* line 127, ../sass/user-environ/_layout.scss */
.user-environ .browse-area > .contents, .user-environ .browse-area > .contents,
.user-environ .edit-area > .contents { .user-environ .edit-area > .contents {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 113, ../sass/user-environ/_layout.scss */ /* line 133, ../sass/user-environ/_layout.scss */
.user-environ .edit-area { .user-environ .edit-area {
top: 45px; } top: 45px; }
/* line 116, ../sass/user-environ/_layout.scss */ /* line 136, ../sass/user-environ/_layout.scss */
.user-environ .edit-area .tool-bar { .user-environ .edit-area .tool-bar {
bottom: auto; bottom: auto;
height: 30px; height: 30px;
line-height: 25px; } line-height: 25px; }
/* line 121, ../sass/user-environ/_layout.scss */ /* line 141, ../sass/user-environ/_layout.scss */
.user-environ .edit-area .work-area { .user-environ .edit-area .work-area {
top: 40px; } top: 40px; }
/* line 126, ../sass/user-environ/_layout.scss */ /* line 146, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar { .user-environ .bottom-bar {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -550,20 +552,20 @@ mct-container {
height: auto; height: auto;
top: auto; top: auto;
height: 25px; } height: 25px; }
/* line 131, ../sass/user-environ/_layout.scss */ /* line 151, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar .status-holder { .user-environ .bottom-bar .status-holder {
z-index: 1; } z-index: 1; }
/* line 135, ../sass/user-environ/_layout.scss */ /* line 155, ../sass/user-environ/_layout.scss */
.user-environ .bottom-bar .app-logo { .user-environ .bottom-bar .app-logo {
left: auto; left: auto;
width: 105px; width: 105px;
z-index: 2; } z-index: 2; }
/* line 143, ../sass/user-environ/_layout.scss */ /* line 163, ../sass/user-environ/_layout.scss */
.cols { .cols {
overflow: hidden; overflow: hidden;
*zoom: 1; } *zoom: 1; }
/* line 145, ../sass/user-environ/_layout.scss */ /* line 165, ../sass/user-environ/_layout.scss */
.cols .col { .cols .col {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -574,100 +576,100 @@ mct-container {
margin-left: 1.5%; margin-left: 1.5%;
padding-left: 5px; padding-left: 5px;
position: relative; } position: relative; }
/* line 153, ../sass/user-environ/_layout.scss */ /* line 173, ../sass/user-environ/_layout.scss */
.cols .col:first-child { .cols .col:first-child {
margin-left: 0; margin-left: 0;
padding-left: 0; } padding-left: 0; }
/* line 160, ../sass/user-environ/_layout.scss */ /* line 180, ../sass/user-environ/_layout.scss */
.cols.cols-2 .col-1 { .cols.cols-2 .col-1 {
min-width: 250px; min-width: 250px;
width: 48.5%; } width: 48.5%; }
/* line 166, ../sass/user-environ/_layout.scss */ /* line 186, ../sass/user-environ/_layout.scss */
.cols.cols-2-ff .col-100px { .cols.cols-2-ff .col-100px {
width: 100px; } width: 100px; }
/* line 173, ../sass/user-environ/_layout.scss */ /* line 193, ../sass/user-environ/_layout.scss */
.cols.cols-6 .col-1 { .cols.cols-6 .col-1 {
min-width: 83.33333px; min-width: 83.33333px;
width: 15.16667%; } width: 15.16667%; }
/* line 179, ../sass/user-environ/_layout.scss */ /* line 199, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-1 { .cols.cols-16 .col-1 {
min-width: 31.25px; min-width: 31.25px;
width: 4.75%; } width: 4.75%; }
/* line 182, ../sass/user-environ/_layout.scss */ /* line 202, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-2 { .cols.cols-16 .col-2 {
min-width: 62.5px; min-width: 62.5px;
width: 11%; } width: 11%; }
/* line 185, ../sass/user-environ/_layout.scss */ /* line 205, ../sass/user-environ/_layout.scss */
.cols.cols-16 .col-7 { .cols.cols-16 .col-7 {
min-width: 218.75px; min-width: 218.75px;
width: 42.25%; } width: 42.25%; }
/* line 191, ../sass/user-environ/_layout.scss */ /* line 211, ../sass/user-environ/_layout.scss */
.cols.cols-32 .col-2 { .cols.cols-32 .col-2 {
min-width: 31.25px; min-width: 31.25px;
width: 4.75%; } width: 4.75%; }
/* line 194, ../sass/user-environ/_layout.scss */ /* line 214, ../sass/user-environ/_layout.scss */
.cols.cols-32 .col-15 { .cols.cols-32 .col-15 {
min-width: 234.375px; min-width: 234.375px;
width: 45.375%; } width: 45.375%; }
/* line 198, ../sass/user-environ/_layout.scss */ /* line 218, ../sass/user-environ/_layout.scss */
.cols .l-row { .cols .l-row {
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
padding: 5px 0; } padding: 5px 0; }
/* line 204, ../sass/user-environ/_layout.scss */ /* line 224, ../sass/user-environ/_layout.scss */
.pane { .pane {
position: absolute; } position: absolute; }
/* line 207, ../sass/user-environ/_layout.scss */ /* line 227, ../sass/user-environ/_layout.scss */
.pane.treeview .create-btn-holder { .pane.treeview .create-btn-holder {
bottom: auto; bottom: auto;
top: 0; top: 0;
height: 24px; } height: 24px; }
/* line 210, ../sass/user-environ/_layout.scss */ /* line 230, ../sass/user-environ/_layout.scss */
.pane.treeview .create-btn-holder .wrapper.menu-element { .pane.treeview .create-btn-holder .wrapper.menu-element {
position: absolute; position: absolute;
bottom: 5px; } bottom: 5px; }
/* line 215, ../sass/user-environ/_layout.scss */ /* line 235, ../sass/user-environ/_layout.scss */
.pane.treeview .tree-holder { .pane.treeview .tree-holder {
overflow: auto; overflow: auto;
top: 34px; } top: 34px; }
/* line 222, ../sass/user-environ/_layout.scss */ /* line 242, ../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 .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 .right.abs,
.pane.items .object-browse-bar .btn-menu span.right.l-click-area, .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
.btn-menu .pane.items .object-browse-bar span.right.l-click-area { .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
top: auto; } top: auto; }
/* line 227, ../sass/user-environ/_layout.scss */ /* line 247, ../sass/user-environ/_layout.scss */
.pane.items .object-holder { .pane.items .object-holder {
top: 34px; } top: 34px; }
/* line 232, ../sass/user-environ/_layout.scss */ /* line 252, ../sass/user-environ/_layout.scss */
.pane.edit-main .object-holder { .pane.edit-main .object-holder {
top: 0; } top: 0; }
/* line 238, ../sass/user-environ/_layout.scss */ /* line 258, ../sass/user-environ/_layout.scss */
.pane .object-holder { .pane .object-holder {
overflow: auto; } overflow: auto; }
/* line 246, ../sass/user-environ/_layout.scss */ /* line 266, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 249, ../sass/user-environ/_layout.scss */ /* line 269, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 256, ../sass/user-environ/_layout.scss */ /* line 276, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane { .split-layout.vertical > .pane {
margin-left: 5px; } margin-left: 5px; }
/* line 258, ../sass/user-environ/_layout.scss */ /* line 278, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder { .split-layout.vertical > .pane > .holder {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 262, ../sass/user-environ/_layout.scss */ /* line 282, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child { .split-layout.vertical > .pane:first-child {
margin-left: 0; } margin-left: 0; }
/* line 264, ../sass/user-environ/_layout.scss */ /* line 284, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
right: 5px; } right: 5px; }
/* line 273, ../sass/user-environ/_layout.scss */ /* line 293, ../sass/user-environ/_layout.scss */
.vscroll { .vscroll {
overflow-y: auto; } overflow-y: auto; }

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

@ -43,13 +43,33 @@
position: absolute; position: absolute;
} }
.editor { .editor {
@include border-radius($basicCr * 1.5); @include border-radius($basicCr * 1.5);
} }
$min-name: min-device-width;
$max-name: max-device-width;
$max-small: 769px;
$min-large: 770px;
// style="min-width: 150px; max-width: 800px; width: 25%;" // style="min-width: 150px; max-width: 800px; width: 25%;"
.browser-manage { .browser-manage {
width: 100%; // @media only screen and ($max-name : $max-small) {
// width: 100%;
// }
//
// @media only screen and ($min-name : $min-large) {
min-width: 150px;
max-width: 800px;
width: 25%;
// }
}
.rem-display {
// @media only screen and ($max-name : $max-small) {
// display: none;
// }
} }
.contents { .contents {