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

[Mobile] Added transistions

Browse Source 
Transistions added, however still using
document.getElementById.
This commit is contained in:
Dave 2015-07-08 15:57:08 -07:00
parent 07ef4dfe8a
commit cdcaedc8dd
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -734,23 +734,31 @@ mct-container {
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
/* line 26, ../sass/mobile/_layout.scss */ /* line 26, ../sass/mobile/_layout.scss */
.holder-hide { .holder-hide {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: -150px; } } left: -150px; } }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
/* line 32, ../sass/mobile/_layout.scss */ /* line 33, ../sass/mobile/_layout.scss */
.holder-show { .holder-show {
left: -150px; } } -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: 0px; } }
@media screen and (max-width: 514px) { @media screen and (max-width: 514px) {
/* line 38, ../sass/mobile/_layout.scss */ /* line 40, ../sass/mobile/_layout.scss */
.browse-manage { .browse-manage {
width: 100px; } } width: 100px; } }
@media screen and (min-width: 515px) and (max-width: 800px) { @media screen and (min-width: 515px) and (max-width: 800px) {
/* line 38, ../sass/mobile/_layout.scss */ /* line 40, ../sass/mobile/_layout.scss */
.browse-manage { .browse-manage {
width: 150px; } } width: 150px; } }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
/* line 38, ../sass/mobile/_layout.scss */ /* line 40, ../sass/mobile/_layout.scss */
.browse-manage { .browse-manage {
min-width: 150px; min-width: 150px;
max-width: 800px; max-width: 800px;

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

@ -25,12 +25,14 @@
.holder-hide { .holder-hide {
@include phoneandtablet { @include phoneandtablet {
@include transition-duration(.2s);
left: -150px; left: -150px;
} }
} }
.holder-show { .holder-show {
@include phoneandtablet { @include phoneandtablet {
@include transition-duration(.2s);
left: 0px; left: 0px;
} }
} }

4
platform/commonUI/general/src/controllers/TreeMenuController.js
View File

@ -34,7 +34,11 @@ define(
document.getElementById("myElement").className = document.getElementById("myElement").className =
document.getElementById("myElement") document.getElementById("myElement")
.className.replace(/(?:^|\s)holder-hide(?!\S)/g, ''); .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
document.getElementById("myElement").className += " holder-show";
} else { } else {
document.getElementById("myElement").className =
document.getElementById("myElement")
.className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
document.getElementById("myElement").className += " holder-hide"; document.getElementById("myElement").className += " holder-hide";
} }