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

[Mobile] layout adjustment

Browse Source 
Currently mobile css transition does
not work on phone portrait. Added
some not reached css classes used in old
slide menu.
This commit is contained in:
Shivam Dave 2015-08-31 14:13:14 -07:00
parent 46deabafee
commit cb5429979a
2 changed files with 77 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,7 +120,7 @@
* 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.
*****************************************************************************/ *****************************************************************************/
/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -141,38 +141,38 @@ time, mark, audio, video {
font-size: 100%; font-size: 100%;
vertical-align: baseline; } vertical-align: baseline; }
/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html { html {
line-height: 1; } line-height: 1; }
/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul { ol, ul {
list-style: none; } list-style: none; }
/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0; }
/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td { caption, th, td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } vertical-align: middle; }
/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote { q, blockquote {
quotes: none; } quotes: none; }
/* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after { q:before, q:after, blockquote:before, blockquote:after {
content: ""; content: "";
content: none; } content: none; }
/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img { a img {
border: none; } border: none; }
/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ /* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; } display: block; }
@ -822,29 +822,6 @@ mct-container {
bottom: 0; bottom: 0;
left: 0; } left: 0; }
/* line 31, ../sass/mobile/_layout.scss */
.pane.left.treeview {
background-color: #222; }
/* line 35, ../sass/mobile/_layout.scss */
.pane.right-repr {
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
transition-timing-function: ease;
backface-visibility: hidden;
margin-left: 0 !important; }
/* line 39, ../sass/mobile/_layout.scss */
.pane.right-repr #content-area {
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
transition-timing-function: ease;
backface-visibility: hidden;
opacity: 1; }
/* line 45, ../sass/mobile/_layout.scss */ /* line 45, ../sass/mobile/_layout.scss */
.user-environ .browse-area, .user-environ .browse-area,
.user-environ .edit-area, .user-environ .edit-area,
@ -866,15 +843,16 @@ mct-container {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none;
/* line 63, ../sass/mobile/_layout.scss */ background-color: #222; }
/* line 64, ../sass/mobile/_layout.scss */
.pane.left.inactive { .pane.left.inactive {
opacity: 0; opacity: 0;
right: 100% !important; right: 100% !important;
width: auto !important; width: auto !important;
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; } overflow-x: hidden; }
/* line 72, ../sass/mobile/_layout.scss */ /* line 73, ../sass/mobile/_layout.scss */
.pane.left.active { .pane.left.active {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -897,51 +875,72 @@ mct-container {
display: block !important; display: block !important;
right: auto !important; right: auto !important;
width: 40% !important; } width: 40% !important; }
/* line 84, ../sass/mobile/_layout.scss */ /* line 85, ../sass/mobile/_layout.scss */
.pane.left .create-btn.major.inactivePane { .pane.left .create-btn.major.inactivePane {
display: none; } display: none; }
/* line 95, ../sass/mobile/_layout.scss */ /* line 93, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right.leftActive { .split-pane-component.secondary-split.pane.right {
left: 40% !important; } -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
transition-timing-function: ease;
backface-visibility: hidden;
margin-left: 0 !important; }
/* line 98, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right #content-area {
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
transition-timing-function: ease;
backface-visibility: hidden;
opacity: 1; }
/* line 103, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right.leftInactive {
left: 0 !important; }
/* line 108, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right.leftActive {
left: 40% !important; }
/* line 150, ../sass/mobile/_layout.scss */ /* line 163, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 110%; font-size: 110%;
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 10px; } left: 10px; }
/* line 157, ../sass/mobile/_layout.scss */ /* line 170, ../sass/mobile/_layout.scss */
.object-browse-bar { .object-browse-bar {
left: 30px !important; } left: 30px !important; }
/* line 160, ../sass/mobile/_layout.scss */ /* line 173, ../sass/mobile/_layout.scss */
.object-browse-bar .context-available { .object-browse-bar .context-available {
opacity: 1 !important; } opacity: 1 !important; }
/* line 163, ../sass/mobile/_layout.scss */ /* line 176, ../sass/mobile/_layout.scss */
.object-browse-bar .view-switcher { .object-browse-bar .view-switcher {
margin-right: 0 !important; } margin-right: 0 !important; }
/* line 165, ../sass/mobile/_layout.scss */ /* line 178, ../sass/mobile/_layout.scss */
.object-browse-bar .view-switcher .name { .object-browse-bar .view-switcher .name {
display: none; } display: none; }
/* line 172, ../sass/mobile/_layout.scss */ /* line 185, ../sass/mobile/_layout.scss */
.tree-holder { .tree-holder {
overflow-x: hidden !important; } overflow-x: hidden !important; }
/* line 176, ../sass/mobile/_layout.scss */ /* line 189, ../sass/mobile/_layout.scss */
.mobile-disable-select { .mobile-disable-select {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 181, ../sass/mobile/_layout.scss */ /* line 194, ../sass/mobile/_layout.scss */
.mobile-hide, .mobile-hide,
.mobile-hide-important { .mobile-hide-important {
display: none !important; } display: none !important; }
/* line 186, ../sass/mobile/_layout.scss */ /* line 199, ../sass/mobile/_layout.scss */
.mobile-back-hide { .mobile-back-hide {
pointer-events: none; pointer-events: none;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -958,7 +957,7 @@ mct-container {
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
opacity: 0; } opacity: 0; }
/* line 191, ../sass/mobile/_layout.scss */ /* line 204, ../sass/mobile/_layout.scss */
.mobile-back-unhide { .mobile-back-unhide {
pointer-events: all; pointer-events: all;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -975,20 +974,20 @@ mct-container {
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
opacity: 1; } } opacity: 1; } }
@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 203, ../sass/mobile/_layout.scss */ /* line 216, ../sass/mobile/_layout.scss */
.pane.left.active { .pane.left.active {
width: 90% !important; } width: 90% !important; }
/* line 211, ../sass/mobile/_layout.scss */ /* line 224, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right.leftActive { .split-pane-component.secondary-split.pane.right.leftActive {
left: 0 !important; left: 0 !important;
transform: translateX(90%); transform: translateX(90%);
-webkit-transform: translateX(90%); } -webkit-transform: translateX(90%); }
/* line 214, ../sass/mobile/_layout.scss */ /* line 227, ../sass/mobile/_layout.scss */
.split-pane-component.secondary-split.pane.right.leftActive #content-area { .split-pane-component.secondary-split.pane.right.leftActive #content-area {
opacity: 0; } } opacity: 0; } }
@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 236, ../sass/mobile/_layout.scss */ /* line 249, ../sass/mobile/_layout.scss */
.desktop-hide { .desktop-hide {
display: none; } } display: none; } }
/***************************************************************************** /*****************************************************************************

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

@ -28,19 +28,19 @@
top: 0 !important; right: 0; bottom: 0; left: 0; top: 0 !important; right: 0; bottom: 0; left: 0;
} }
.pane.left.treeview { //.pane.left.treeview {
background-color: $colorMobilePaneLeft; // background-color: $colorMobilePaneLeft;
} //}
.pane.right-repr { //.pane.right-repr {
//@include test(); // //@include test();
@include slMenuTransitions; // @include slMenuTransitions;
margin-left: 0 !important; // margin-left: 0 !important;
#content-area { // #content-area {
@include slMenuTransitions; // @include slMenuTransitions;
opacity: 1; // opacity: 1;
} // }
} //}
.user-environ .browse-area, .user-environ .browse-area,
.user-environ .edit-area, .user-environ .edit-area,
@ -58,6 +58,7 @@
// The left pane class // The left pane class
.pane.left { .pane.left {
@include user-select(none); @include user-select(none);
background-color: $colorMobilePaneLeft;
// When the left pane is inactive and closed // When the left pane is inactive and closed
&.inactive { &.inactive {
@ -91,6 +92,18 @@
// (can include inspector and representation) // (can include inspector and representation)
.split-pane-component.secondary-split.pane.right { .split-pane-component.secondary-split.pane.right {
//@include test();
@include slMenuTransitions;
margin-left: 0 !important;
#content-area {
@include slMenuTransitions;
opacity: 1;
}
&.leftInactive {
left: 0 !important;
}
// When the left pane is open or 'active' // When the left pane is open or 'active'
&.leftActive { &.leftActive {
left: $proporMenuWithView !important; left: $proporMenuWithView !important;