ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-19 11:17:04 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

[Mobile] Transition/Create Fix

Browse Source 
Fix the create button to work and
also transition well. Added transition mixin
to stay DRY.
This commit is contained in:
Shivam Dave 2015-07-16 13:22:07 -07:00
parent 6e6fbe0d65
commit 15a88967d0
5 changed files with 71 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,16 +31,16 @@
<!-- 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='createBtnPos'>
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
</div>
<div class='holder tree-holder abs'>
<mct-representation key="'tree'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
</div>
<div class='createBtnPos'>
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
</div>
</div>
<mct-splitter class="mobile-splitter"></mct-splitter>

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

@ -754,124 +754,130 @@ mct-container {
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) {
/* line 46, ../sass/mobile/_layout.scss */
/* line 48, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
transition-timing-function: ease;
width: 0px !important;
right: auto !important; }
/* line 52, ../sass/mobile/_layout.scss */
/* line 54, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left .createBtnPos {
overflow-y: 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) {
/* line 59, ../sass/mobile/_layout.scss */
/* line 61, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.right {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
transition-timing-function: ease;
width: auto !important;
left: 0px !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 69, ../sass/mobile/_layout.scss */
/* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
transition-timing-function: ease;
display: block !important;
right: auto !important; }
/* line 75, ../sass/mobile/_layout.scss */
/* line 77, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left .createBtnPos {
height: inherit;
overflow-y: 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) {
/* line 69, ../sass/mobile/_layout.scss */
/* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
width: 80% !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) {
/* line 69, ../sass/mobile/_layout.scss */
/* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
width: 30% !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) {
/* line 69, ../sass/mobile/_layout.scss */
/* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
width: 40% !important; } }
width: 35% !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) {
/* line 69, ../sass/mobile/_layout.scss */
/* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
width: 25% !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 94, ../sass/mobile/_layout.scss */
/* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
transition-timing-function: ease;
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) {
/* line 94, ../sass/mobile/_layout.scss */
/* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 80% !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) {
/* line 94, ../sass/mobile/_layout.scss */
/* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 30% !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) {
/* line 94, ../sass/mobile/_layout.scss */
/* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 40% !important; } }
left: 35% !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) {
/* line 94, ../sass/mobile/_layout.scss */
/* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 25% !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 114, ../sass/mobile/_layout.scss */
/* line 117, ../sass/mobile/_layout.scss */
.mobile-splitter {
display: none; } }
/* line 122, ../sass/mobile/_layout.scss */
/* line 125, ../sass/mobile/_layout.scss */
.button-pos {
position: absolute;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; }
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
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), 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 127, ../sass/mobile/_layout.scss */
/* line 130, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative;
left: 30px; } }
/* line 134, ../sass/mobile/_layout.scss */
/* line 137, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
top: 5px; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 134, ../sass/mobile/_layout.scss */
/* line 137, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
font-size: 125%; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 134, ../sass/mobile/_layout.scss */
/* line 137, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
font-size: 175%; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 134, ../sass/mobile/_layout.scss */
/* line 137, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), 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 148, ../sass/mobile/_layout.scss */
/* line 151, ../sass/mobile/_layout.scss */
.mobile-hide {
display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 154, ../sass/mobile/_layout.scss */
/* line 157, ../sass/mobile/_layout.scss */
.phone-hide {
display: none; } }

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

@ -69,6 +69,6 @@ $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS */
$phoneMenuSizePortrait: 80%;
$phoneMenuSizeLandscape: 30%;
$tabletMenuSizePortrait: 40%;
$tabletMenuSizePortrait: 35%;
$tabletMenuSizeLandscape: 25%;
$desktopMenuSize: 25%;

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

@ -42,10 +42,12 @@
}
}
.browse-hidetree {
.pane-special.left {
@include phoneandtablet {
@include transition-duration(.2s);
@include slMenuTransitions;
width: 0px !important;
right: auto !important;
@ -58,7 +60,7 @@
.pane-special.right {
@include phoneandtablet {
@include transition-duration(.2s);
@include slMenuTransitions;
width: auto !important;
left: 0px !important;
}
@ -68,14 +70,15 @@
.browse-showtree {
.pane-special.left {
@include phoneandtablet {
@include transition-duration(.2s);
@include slMenuTransitions;
display: block !important;
right: auto !important;
.createBtnPos {
height: inherit;
overflow-y: hidden;
overflow-x: hidden;
}
}
}
@include phonePortrait {
width: $phoneMenuSizePortrait !important;
@ -93,8 +96,8 @@
.pane-special.right {
@include phoneandtablet {
@include transition-duration(.2s);
width: auto !important;
@include slMenuTransitions;
width: auto !important;
}
@include phonePortrait {
left: $phoneMenuSizePortrait !important;
@ -121,7 +124,7 @@
.button-pos {
position: absolute;
@include transition-duration(.2s);
@include slMenuTransitions;
}
.object-header-mobile {

5
platform/commonUI/general/res/sass/mobile/_mixins.scss
View File

@ -80,3 +80,8 @@
@content
}
}
@mixin slMenuTransitions {
@include transition-duration(.5s);
transition-timing-function: ease;
}