ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-01 12:22:42 +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) {
/* line 26, ../sass/mobile/_layout.scss */
.holder-hide {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: -150px; } }
@media screen and (max-width: 800px) {
/* line 32, ../sass/mobile/_layout.scss */
/* line 33, ../sass/mobile/_layout.scss */
.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) {
/* line 38, ../sass/mobile/_layout.scss */
/* line 40, ../sass/mobile/_layout.scss */
.browse-manage {
width: 100px; } }
@media screen and (min-width: 515px) and (max-width: 800px) {
/* line 38, ../sass/mobile/_layout.scss */
/* line 40, ../sass/mobile/_layout.scss */
.browse-manage {
width: 150px; } }
@media screen and (min-width: 801px) {
/* line 38, ../sass/mobile/_layout.scss */
/* line 40, ../sass/mobile/_layout.scss */
.browse-manage {
min-width: 150px;
max-width: 800px;

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

@ -25,12 +25,14 @@
.holder-hide {
@include phoneandtablet {
@include transition-duration(.2s);
left: -150px;
}
}
.holder-show {
@include phoneandtablet {
@include transition-duration(.2s);
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.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
document.getElementById("myElement").className += " holder-show";
} else {
document.getElementById("myElement").className =
document.getElementById("myElement")
.className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
document.getElementById("myElement").className += " holder-hide";
}