Skip to content
Browse files

Some minor style cleaning. Add css transitions for showing and hiding…

… settings.
  • Loading branch information...
1 parent d1f2a3a commit bc9a3b9dd23d8e5e32bbfa1252d7a8d0b37dd2f1 @starzonmyarmz starzonmyarmz 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
35 www/css/style.css
@@ -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;
@starzonmyarmz
Collaborator

you may want to replace "all" with "transform" - better performance (maybe?) and better scoping to effects you want transitioned - in case you add other styles to those divs that could possible get transitioned.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ -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
3 www/js/ui.js
@@ -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
5 www/js/ui/flip.js
@@ -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 bc9a3b9

Please sign in to comment.
Something went wrong with that request. Please try again.