Proof of concept for the try page with animations between challenges

adamfortuna · adamfortuna · commit 71fe5724ce84 · 2015-06-08T14:30:09.000-04:00
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ This app authenticates with GitHub, so you'll need to create a GitHub Applicatio
 Run the application with `$ npm start`. You can also set the environment variables at start time. Here's an example:
 
 ```bash
-$ GH_CLIENT_ID=myid GH_CLIENT_SECRET=mysecret npm start
+$ GH_CLIENT_ID=myid GH_CLIENT_SECRET=mysecret DATABASE_URL=pg://localhost:5432/javascriptcom npm start
 ```
 
 For debugging all the things, run `DEBUG=* npm start`.
diff --git a/client/stylesheets/application.sass b/client/stylesheets/application.sass
@@ -78,14 +78,22 @@
 // removes classes during various phases. If this doesn't work we can
 // do something different, but ng-animate is pretty crazy flexible in the timing
 // in code of where these happen if we need to tweak things.
+.course-challenge
+  top: 30px
+  position: absolute
+  visibility: hidden
+
+  &.is-active
+    visibility: visible
+
 .animate--fade.ng-enter,
 .animate--fade.ng-leave
-  // transition: all 1s ease-in-out
+  transition: all 1s ease-in-out
 .animate--fade.ng-enter,
 .animate--fade.ng-leave.ng-leave-active
   display: none
-  // opacity: 0
+  opacity: 0
 .animate--fade.ng-leave,
 .animate--fade.ng-enter.ng-enter-active
   display: block
-  // opacity: 1
+  opacity: 1
diff --git a/public/templates/course.html b/public/templates/course.html
@@ -23,7 +23,7 @@
           </nav>
 
           <div ng-if='ctrl.challenges.length'>
-            <js-challenge ng-repeat='challenge in ::ctrl.challenges' challenge='challenge' ng-if='challenge.active' class='animate--fade'></js-challenge>
+            <js-challenge ng-repeat='challenge in ::ctrl.challenges' challenge='challenge' class='animate--fade'></js-challenge>
 
             <div ng-if='ctrl.onWrapupPage()' class='animate--fade'>
               <div class="g">
