Permalink
Browse files

Merge pull request #6 from smith/mobile-settings-transition

settings slide transition
  • Loading branch information...
2 parents d1f2a3a + bc9a3b9 commit 7f57f31773319202b5ca1d4231f6577502fa489d @smith committed Dec 17, 2012
Showing with 36 additions and 7 deletions.
  1. +33 −2 www/css/style.css
  2. +1 −2 www/js/ui.js
  3. +2 −3 www/js/ui/flip.js
View
@@ -1,4 +1,8 @@
* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
@@ -11,6 +15,7 @@ body {
color: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
+ overflow-x: hidden;
}
a { color: white; text-decoration: none; }
@@ -22,13 +27,39 @@ table { width: 100%; margin-top: 18px 0; }
tr:last-child td { border-bottom: none; }
td { width: 33%; border-bottom: 1px solid #666; padding: 4px; white-space: nowrap; }
+#front,
+#back {
+ position: absolute;
+ height: 100%;
+ top: 0;
+ -webkit-transition: all .25s ease;
+ -moz-transition: all .25s ease;
+ -ms-transition: all .25s ease;
+ -o-transition: all .25s ease;
+ transition: all .25s ease;
+ width: 100%;
+}
+
#front {
background: black;
+ left: 0;
padding: 3px;
- position: relative;
height: 100%;
}
+#back {
+ left: 100%;
+}
+
+.settings-visible #front,
+.settings-visible #back {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0);
+ -o-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+}
+
#front header {
height: 63px;
position: relative;
@@ -66,7 +97,7 @@ td { width: 33%; border-bottom: 1px solid #666; padding: 4px; white-space: nowra
}
/* Back */
-#back { display: none; background: #aaaaaa; height: 100%; }
+#back { background: #aaaaaa; height: 100%; }
/*#back-scroll-wrap { height: 100%; }*/
#back-scroll-wrap div { margin: 10px; }
View
@@ -43,7 +43,7 @@ function (require, exports, $, scrolling, team, flip, pref, spinner) {
conferencesSelect.blur();
teamsSelect.blur();
spinner.toggle(front);
- return flip.perform(front, back, event);
+ return flip.perform(event);
}
function doneClick(event) {
@@ -101,7 +101,6 @@ function (require, exports, $, scrolling, team, flip, pref, spinner) {
});
spinner.toggle(front);
- back.hide();
// Scrolling for content
scrolling.start();
};
View
@@ -1,9 +1,8 @@
// Provides an abstraction for flipping over
define(["jquery"], function ($) {
return {
- perform: function (front, back, event) {
- front.toggle();
- back.toggle();
+ perform: function (event) {
+ $('body').toggleClass('settings-visible');
return false;
}
};

0 comments on commit 7f57f31

Please sign in to comment.