Merge pull request #3623 from FreeCodeCamp/clementine

Improve step view and add better gifs

client/commonFramework.js

@@ -863,15 +863,15 @@ common.init.push((function() {
     var nextStep = getNextStep($(stepClass));
     $(this)
       .parent()
-      .addClass('animated fadeOutLeft')
-      .delay(700)
+      .addClass('animated fadeOutLeft fast-animation')
+      .delay(250)
       .queue(function(next) {
         $(this).addClass('hidden');
         if (nextStep) {
           $(nextStep)
             .removeClass('hidden')
-            .addClass('animated slideInRight')
-            .delay(1000)
+            .addClass('animated slideInRight fast-animation')
+            .delay(500)
             .queue(function(next) {
               $(this).removeClass('slideInRight');
               next();

seed/challenges/front-end-development-certificate.json

@@ -14,7 +14,7 @@
       ],
       "description": [
         [
-          "http://i.imgur.com/luMkKst.jpg",
+          "http://i.imgur.com/syJxavV.jpg",
           "An image of our Front End Development Certificate",
           "This challenge will give you your verified Front End Development Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate Bonfires, and all our basic and intermediate Ziplines. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
           ""

seed/challenges/full-stack-development-certificate.json

@@ -15,7 +15,7 @@
       ],
       "description": [
         [
-          "http://i.imgur.com/qXublEe.jpg",
+          "http://i.imgur.com/sKYQhdG.jpg",
           "An image of our Full Stack Development Certificate",
           "This challenge will give you your verified Full Stack Development Certificate. Before we issue your certificate, we must verify that you have completed all of Bonfires, Ziplines and Basejumps. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
           ""

seed/challenges/gear-up-for-success.json

@@ -8,7 +8,7 @@
       "challengeSeed": [],
       "description": [
         [
-          "http://i.imgur.com/nmSiMy1.gif",
+          "http://i.imgur.com/YNwsMXM.gif",
           "A gif showing how you can access our Camper News page and click the \"upvote\" button to upvote a story.",
           "Click the \"News\" button in your upper right hand corner. You can browse links on Camper News and upvote ones that you enjoy.",
           ""
@@ -34,7 +34,7 @@
       "challengeSeed": [],
       "description": [
         [
-          "http://i.imgur.com/DoOqkNW.gif",
+          "http://i.imgur.com/4GO4zcI.gif",
           "A gif showing how you can click the \"Wiki\" button in your upper-right corner to access the wiki.",
           "Try this: Click the \"Wiki\" button in your upper right hand corner. Our community has contributed lots of useful information to this searchable wiki.",
           ""
@@ -86,10 +86,10 @@
       "challengeSeed": [],
       "description": [
         [
-          "http://i.imgur.com/P7qfJXt.gif",
+          "http://i.imgur.com/Og1ifsn.gif",
           "A gif showing how you can commit to a goal for your Free Code Camp studies and pledge a monthly donation to a nonprofit to give you external motivation to reach that goal.",
           "You can set a goal and pledge to donate to a nonprofit each month until you achieve that goal. give you external motivation in your quest to learn to code, as well as the opportunity to help nonprofits right away. Choose your goal, choose a monthly donation. When you click \"commit\", the nonprofit's donate page will open in a new tab. You can change your committment or stop it at any time.",
-          "http://freecodecamp.com/commit"
+          "/commit"
         ]
       ],
       "type": "Waypoint",

seed/challenges/getting-started.json

@@ -32,7 +32,7 @@
           ""
         ],
         [
-          "http://i.imgur.com/q4IjuCL.jpg",
+          "http://i.imgur.com/sKYQhdG.jpg",
           "a screenshot of our Front End Development Certificate",
           "About half way through our curriculum, you'll earn a verified Front End Development Certificate. If you can finish our entire curriculum, you'll earn a verified Full Stack Development Certificate.",
           ""

server/views/coursewares/showStep.jade

@@ -2,14 +2,13 @@ extends ../layout-wide
 block content
     .row
         .col-md-8.col-md-offset-2
-            .jumbotron
                 for step, index in description
                     .thumbnail.challenge-step(class=index !== 0 ? 'hidden': '')
                         img.gif-block.img-center.img-responsive.thumbnail(src='#{step[0]}' alt='#{step[1]}')
                         .caption
                             p.large-p= step[2]
                         if step[3]
-                            a.btn.btn-block.btn-primary.challenge-step-btn-action(id='#{index}' href='#{step[3]}' target='_blank') Go To Link
+                            a.btn.btn-block.btn-primary.challenge-step-btn-action(id='#{index}' href='#{step[3]}' target='_blank') Open link in new tab
                         if index + 1 === description.length
                             .btn.btn-block.btn-primary.challenge-step-btn-finish(id='last' class=step[3] ? 'disabled' : '') Finish challenge
                         else
@@ -27,7 +26,7 @@ block content
                       .spacer
                       .row
                       if (user)
-                          #challenge-step-btn-submit.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge (ctrl + enter)
+                          #challenge-step-btn-submit.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge
                       else
                           a.btn.btn-lg.btn-primary.btn-block(href='/challenges/next-challenge?id=' + challengeId) Go to my next challenge
     script(src=rev('/js', 'commonFramework.js'))