refactor learn-to-code view to look more visual and have fewer components

controllers/resources.js

@@ -142,12 +142,7 @@ module.exports = {
         var timeDiff = Math.abs(date2.getTime() - date1.getTime());
         var daysRunning = Math.ceil(timeDiff / (1000 * 3600 * 24));
         var announcements = resources.announcements;
-        User.count({'points': {'$gt': 2}}, function (err, c3) {
+        User.count({}, function (err, c3) {
-            if (err) {
-                debug('User err: ', err);
-                next(err);
-            }
-            User.count({'points': {'$gt': 9}}, function (err, c10) {
             if (err) {
                 debug('User err: ', err);
                 next(err);
@@ -161,13 +156,11 @@ module.exports = {
                     title: 'About Free Code Camp and Our Team of Volunteers',
                     daysRunning: daysRunning,
                     c3: c3,
-                        c10: c10,
                     all: all,
                     announcements: announcements
                 });
             });
         });
-        });
     },
 
     randomPhrase: function() {

public/css/main.less

@@ -700,8 +700,8 @@ iframe.iphone {
   line-height: 150%;
 }
 
-.github-button-container {
+.github-and-twitter-button-text {
-  padding-top: 5px;
+  padding-top: 10px;
 }
 
 //uncomment this to see the dimensions of all elements outlined in red

views/partials/faq.jade

@@ -36,23 +36,23 @@
                         table.table
                             thead
                                 th Time budgeted
-                                th Hours per week
+                                th.hidden-xs Hours per week
                                 th Weeks to complete
                             tr.info
                                 td Weekends
-                                td 10 hours/week
+                                td.hidden-xs 10 hours/week
                                 td 100 weeks (2 years)
                             tr.success
                                 td Nights and Weekends
-                                td 20 hours/week
+                                td.hidden-xs 20 hours/week
                                 td 50 weeks (1 year)
                             tr.warning
                                 td Full time
-                                td 40 hours/week
+                                td.hidden-xs 40 hours/week
                                 td 25 weeks (6 months)
                             tr.danger
                                 td Traditional Bootcamp Pacing
-                                td 80 hours/week
+                                td.hidden-xs 80 hours/week
                                 td 12 weeks (3 months)
                     h2 Why does Free Code Camp use JavaScript instead of Ruby or Python?
                     ul

views/partials/github.jade

@@ -7,7 +7,7 @@ script.
         }).done(
                 function(data) {
                     var github = document.createElement('div');
-                    $(github).html('<div class="row"><div class="col-xs-6 text-right">Open Issues:</div><div class="col-xs-6 text-left">' + data.issues + ' <a href="https://github.com/freecodecamp/freecodecamp/issues">(create one)</a></div></div><div class="row"><div class="col-xs-6 text-right">Open Pull Requests:</div><div class="col-xs-6 text-left">' + data.pulls + ' <a href="https://github.com/freecodecamp/freecodecamp/pulls">(create one)</a></div></div>').prependTo($('#github'))
+                    $(github).html('<div class="row"><div class="col-xs-6 text-right">Open GitHub Issues:</div><div class="col-xs-6 text-left">' + data.issues + ' <a href="https://github.com/freecodecamp/freecodecamp/issues">(create one)</a></div></div><div class="row"><div class="col-xs-6 text-right">Open Pull Requests:</div><div class="col-xs-6 text-left">' + data.pulls + ' <a href="https://github.com/freecodecamp/freecodecamp/pulls">(create one)</a></div></div>').prependTo($('#github'))
                 }
         );
     })();

views/partials/stats.jade

@@ -1,26 +0,0 @@
-h2.stats-text
-    .row
-        .col-xs-6.text-right Days since we launched:
-        .col-xs-6.text-left= daysRunning
-    .row
-        .col-xs-6.text-right Nonprofit Projects:
-        .col-xs-6.text-left
-            include ../partials/trello
-    include ../partials/github
-    .row
-        .col-xs-6.text-right Campers with at least...
-        .col-xs-4
-    .row
-        .col-xs-6.text-right 3 Points:
-        .col-xs-6.text-left= c3
-    .row
-        .col-xs-6.text-right 10 Points:
-        .col-xs-6.text-left= c10
-    .row
-        .col-xs-6.text-right All 54 Points:
-        .col-xs-6.text-left= all
-    .row
-        .col-xs-6.text-right Star our project here:
-        .col-xs-6.text-left.github-button-container
-            html.
-                <iframe src="http://ghbtns.com/github-btn.html?user=freecodecamp&repo=freecodecamp&type=watch&count=true&size=large" height="30" width="170" frameborder="0" scrolling="0" style="width:170px; height: 30px;" allowTransparency="true"></iframe>

views/resources/learn-to-code.jade

@@ -5,12 +5,47 @@ block content
     .text-center
         a.btn.btn-cta.signup-btn.next-challenge-button(href="/challenges") Take me to my next challenge
     br
+    .row
+        .col-xs-12.col-sm-12.col-md-4
+            .panel.panel-info
+                .panel-heading.landing-panel-heading.text-center Get Connected
+                .panel-body
+                    img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-chatroom.jpg")
+                    h3
+                        .row
+                            .col-xs-9.text-right Campers doing challenges:
+                            .col-xs-3.text-left= c3
+                        .row
+                            .col-xs-9.text-right Campers coding for nonprofits:
+                            .col-xs-3.text-left= all
+        .col-xs-12.col-sm-12.col-md-4
+            .panel.panel-info
+                .panel-heading.landing-panel-heading.text-center Learn JavaScript
+                .panel-body
+                    img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-github.jpg")
+                    h3
+                        include ../partials/github
+        .col-xs-12.col-sm-12.col-md-4
+            .panel.panel-info
+                .panel-heading.landing-panel-heading.text-center Help Nonprofits
+                .panel-body
+                    img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-trello.jpg")
+                    h3
+                        .row
+                            .col-xs-6.text-right Days since we launched:
+                            .col-xs-6.text-left= daysRunning
+                        .row
+                            .col-xs-6.text-right Nonprofit Projects:
+                            .col-xs-6.text-left
+                                include ../partials/trello
+
+    br
     script.
         var challengeName = 'Learn to code'
     .row
         .col-xs-12.col-sm-12.col-md-6
             .panel.panel-info
-                .panel-heading.landing-panel-heading.text-center Announcements
+                .panel-heading.landing-panel-heading.text-center News
                 .panel-body
                     .landing-panel-body.text-center
                         for announcement in announcements
@@ -19,22 +54,7 @@ block content
                                     a(href=announcement[1])= announcement[0]
                                 else
                                     = announcement[0]
-            include ../partials/faq
-        .col-xs-12.col-sm-12.col-md-6
-            .panel.panel-info
-                .panel-heading.landing-panel-heading.text-center Statistics
-                .panel-body
-                    .landing-panel-body
-                        include ../partials/stats
-            .panel.panel-info
-                .panel-heading.landing-panel-heading.text-center Blog
-                .panel-body
-                    .landing-panel-body.text-center
                         include ../partials/blogger
-            .panel.panel-info
-                .panel-heading.landing-panel-heading.text-center Tweets
-                .panel-body
-                    .landing-panel-body.text-center
                         a.twitter-timeline(data-dnt='true', href='https://twitter.com/FreeCodeCamp', data-widget-id='560847186548621312') Tweets by @FreeCodeCamp
                         script.
                             !function (d, s, id) {
@@ -46,7 +66,9 @@ block content
                                     fjs.parentNode.insertBefore(js, fjs);
                                 }
                             }(document, "script", "twitter-wjs");
-                        .text-center
+                        h3
+                            .col-xs-12 Follow us on Twitter here:
+                            .col-xs-12.github-and-twitter-button-text
                                 html.
                                     <a class="twitter-follow-button"
                                       href="https://twitter.com/freecodecamp"
@@ -55,4 +77,10 @@ block content
                                     Follow @FreeCodeCamp
                                     </a>
                                     <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
+                            .col-xs-12.github-and-twitter-button-text Star us on GitHub here:
+                            .col-xs-12.github-and-twitter-button-text
+                                html.
+                                    <iframe src="http://ghbtns.com/github-btn.html?user=freecodecamp&repo=freecodecamp&type=watch&count=true&size=large" height="30" width="170" frameborder="0" scrolling="0" style="width:170px; height: 30px;" allowTransparency="true"></iframe>
             include ../partials/about
+        .col-xs-12.col-sm-12.col-md-6
+            include ../partials/faq