beautify learn-to-code

controllers/resources.js

@@ -148,6 +148,9 @@ module.exports = {
         var timeDiff = Math.abs(date2.getTime() - date1.getTime());
         var daysRunning = Math.ceil(timeDiff / (1000 * 3600 * 24));
         var announcements = resources.announcements;
+        function numberWithCommas(x) {
+            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
         User.count({}, function (err, c3) {
             if (err) {
                 debug('User err: ', err);
@@ -158,10 +161,11 @@ module.exports = {
                     debug('User err: ', err);
                     next(err);
                 }
+
                 res.render('resources/learn-to-code', {
                     title: 'About Free Code Camp and Our Team of Volunteers',
                     daysRunning: daysRunning,
-                    c3: c3,
+                    c3: numberWithCommas(c3),
                     all: all,
                     announcements: announcements
                 });

public/css/main.less

@@ -739,6 +739,10 @@ iframe.iphone {
   margin-left: -5px;
 }
 
+.tight-h3 {
+  line-height: 0.5em;
+}
+
 //uncomment this to see the dimensions of all elements outlined in red
 //* {
 //  border-color: red;

views/partials/blogger.jade

@@ -9,7 +9,7 @@ script.
                 var props = Object.keys(data);
                 for (var i = 0; i < props.length; i+=2) {
                     var blogger = document.createElement('div');
-                    $(blogger).html('<h2><a href=' + data[props[i+1]] + '>' + data[props[i]] + '</a></h2></div>').prependTo($('#blog'))
+                    $(blogger).html('<h2><a href=' + data[props[i+1]] + '>' + data[props[i]] + '</a></h2></div>').appendTo($('#blog'))
                 }
             }
         );

views/partials/footer.jade

@@ -7,7 +7,6 @@
         a.ion-social-facebook(href="http://facebook.com/freecodecamp", target='_blank')  Facebook  
         a.ion-information-circled(href="/learn-to-code")  About  
         a.ion-locked(href="/privacy")  Privacy  
-        a(href="#" onclick="TogetherJS(this); return false;")  
     .col-xs-12.visible-xs.visible-sm
         a.ion-speakerphone(href='http://blog.freecodecamp.com', target='_blank')
             span.sr-only Free Code Camp's Blog

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 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'))
+                    $(github).html('<h3 class="tight-h3">' + data.issues + ' GitHub issues are open. <a href="https://github.com/freecodecamp/freecodecamp/issues">(create one)</a></h3><h3 class="tight-h3">' + data.pulls + ' pull requests are open. <a href="https://github.com/freecodecamp/freecodecamp/pulls">(create one)</a></div></div>').prependTo($('#github'))
                 }
         );
     })();

views/partials/navbar.jade

@@ -19,8 +19,6 @@
             a(href='http://forum.freecodecamp.com' target='_blank') Forum
         li
             a(href='/bonfires') Bonfires
-        //li
-        //    a(href="#" onclick="TogetherJS(this); return false;") Pair
         if !user
             li      
             li

views/partials/trello.jade

@@ -7,7 +7,7 @@ script.
         }).done(
             function(data) {
                 var trello = document.createElement('div');
-                $(trello).html(data.trello + ' <a href="https://trello.com/b/BA3xVpz9/nonprofit-projects">(view them)</a></h2></div>').prependTo($('#trello'))
+                $(trello).html('<h3 class="tight-h3"> We help ' + data.trello + ' nonprofits. <a href="https://trello.com/b/BA3xVpz9/nonprofit-projects">(view them)</a></h3>').prependTo($('#trello'))
             }
         );
     })();

views/resources/learn-to-code.jade

@@ -12,35 +12,24 @@ block content
         .col-xs-12.col-sm-12.col-md-4
             .panel.panel-info
                 .panel-heading.landing-panel-heading.text-center Get Connected
-                .panel-body
+                .panel-body.text-center.tight-h3
                     img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-chatroom.jpg" alt="A screen shot from Free Code Camp's main chat room")
-                    h3
+                    h3.tight-h3 #{c3} campers are doing challenges.
-                        .row
+                    h3.tight-h3 #{all} campers are coding for nonprofits.
-                            .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
+                .panel-body.text-center.tight-h3
                     img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-github.jpg" alt="A screen shot of a GitHub commit graph showing a streak of 33 consecutive days of contributions")
-                    h3
+                    include ../partials/github
-                        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
+                .panel-body.text-center
                     img.img-responsive.img-center(src="https://s3.amazonaws.com/freecodecamp/about-trello.jpg" alt="a screen shot of Free Code Camp's nonprofit project Trello board showing several active projects")
-                    h3
+                    h3.tight-h3 We launched #{daysRunning} days ago.
-                        .row
+                    include ../partials/trello
-                            .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.