mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 17:33:23 +00:00
[Mobile] Transitions
Made transitions properly work for create button.
This commit is contained in:
Shivam Dave
parent
180e5f14ae
commit
6e6fbe0d65
@ -31,8 +31,10 @@
|
||||
|
||||
<!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
|
||||
<div class='split-pane-component treeview pane pane-special left desktop-browse'>
|
||||
<mct-representation key="'create-button'" mct-object="navigatedObject" class="createBtnPos">
|
||||
</mct-representation>
|
||||
<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"
|
||||
|
||||
@ -747,14 +747,14 @@ mct-container {
|
||||
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) {
|
||||
/* line 43, ../sass/mobile/_layout.scss */
|
||||
/* line 37, ../sass/mobile/_layout.scss */
|
||||
.desktop-browse {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
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 52, ../sass/mobile/_layout.scss */
|
||||
/* line 46, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .pane-special.left {
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
@ -762,11 +762,12 @@ mct-container {
|
||||
transition-duration: 0.2s;
|
||||
width: 0px !important;
|
||||
right: auto !important; }
|
||||
/* line 58, ../sass/mobile/_layout.scss */
|
||||
/* line 52, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .pane-special.left .createBtnPos {
|
||||
display: none; } }
|
||||
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 64, ../sass/mobile/_layout.scss */
|
||||
/* line 59, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .pane-special.right {
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
@ -776,28 +777,32 @@ mct-container {
|
||||
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 74, ../sass/mobile/_layout.scss */
|
||||
/* line 69, ../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;
|
||||
display: block !important;
|
||||
right: auto !important; } }
|
||||
right: auto !important; }
|
||||
/* line 75, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .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) {
|
||||
/* line 74, ../sass/mobile/_layout.scss */
|
||||
/* line 69, ../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 74, ../sass/mobile/_layout.scss */
|
||||
/* line 69, ../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 74, ../sass/mobile/_layout.scss */
|
||||
/* line 69, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
width: 40% !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 74, ../sass/mobile/_layout.scss */
|
||||
/* line 69, ../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) {
|
||||
|
||||
@ -67,5 +67,8 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
|
||||
$desktopLandscape: "screen and #{$desktopLanscapeCheck}";
|
||||
|
||||
/************************** DEVICE PARAMETERS FOR MENUS */
|
||||
$phoneSlideMenuWidth: $phoMaxW/2;
|
||||
$tabletSlideMenuWidth: $tabMaxW/2;
|
||||
$phoneMenuSizePortrait: 80%;
|
||||
$phoneMenuSizeLandscape: 30%;
|
||||
$tabletMenuSizePortrait: 40%;
|
||||
$tabletMenuSizeLandscape: 25%;
|
||||
$desktopMenuSize: 25%;
|
||||
@ -33,12 +33,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
$phoneMenuSizePortrait: 80%;
|
||||
$phoneMenuSizeLandscape: 30%;
|
||||
$tabletMenuSizePortrait: 40%;
|
||||
$tabletMenuSizeLandscape: 25%;
|
||||
$desktopMenuSize: 25%;
|
||||
|
||||
|
||||
.desktop-browse {
|
||||
@include desktop {
|
||||
@ -56,7 +50,8 @@ $desktopMenuSize: 25%;
|
||||
right: auto !important;
|
||||
|
||||
.createBtnPos {
|
||||
display: none;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -76,6 +71,11 @@ $desktopMenuSize: 25%;
|
||||
@include transition-duration(.2s);
|
||||
display: block !important;
|
||||
right: auto !important;
|
||||
|
||||
.createBtnPos {
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
@include phonePortrait {
|
||||
width: $phoneMenuSizePortrait !important;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user