Merge branch 'master' into staging

Conflicts: public/javascripts/content.js
codeforamerica · Sep 3, 2015 · 8d90609 · 8d90609
2 parents 04d34bb + 46a0a43
commit 8d90609
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 30 deletions.
diff --git a/public/index.html b/public/index.html
@@ -117,13 +117,11 @@ <h2 class="brick-heading">Most popular pages</h2>
         <li>
           <a href="http://{{ url }}" target="_blank">{{ title }}</a>
           <em>
-          <div class="visitor-types">
-            <div class="device-type mobile"></div>
-            <i class="icon mobile icon-mobile-phone"></i> {{ visits.mobile }}
+          <div class="visitor-types mobile">
+            <i class="icon mobile icon-mobile-phone"></i> {{ numberFormat visits.mobile }}
           </div>
-          <div class="visitor-types">
-            <div class="device-type desktop"></div>
-            <i class="icon desktop icon-desktop"></i> {{ visits.desktop }}
+          <div class="visitor-types desktop">
+            <i class="icon desktop icon-desktop"></i> {{ numberFormat visits.desktop }}
           </div>
           </em>
         </li>

diff --git a/public/javascripts/content.js b/public/javascripts/content.js
@@ -58,10 +58,7 @@
       content.displayResults();
     },
     displayResults: function(){
-      window.templateHelper.renderTemplate(content.el,
-                      'content-results',
-                      { pages: content.pages.slice(0,10) }
-      );
+      window.templateHelper.renderTemplate(content.el, 'content-results', { pages: content.pages.slice(0,10) });
     },
     init: function(){
       content.el = document.getElementById('content');

diff --git a/public/javascripts/helpers/templateHelper.js b/public/javascripts/helpers/templateHelper.js
@@ -4,14 +4,18 @@ window.templateHelper = {
     'mobile': 'icon-mobile-phone',
     'desktop': 'icon-desktop'
   },
+  deviceCategoryClass: function(deviceCategory) {
+    return this.deviceClasses[deviceCategory];
+  },
   compileTemplate: function(sourceHtml) {
     return Handlebars.compile(sourceHtml);
   },
+  numberFormat: function(number) {
+    return number.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').split(".")[0];
+  },
   registerHelpers: function() {
-    var deviceClasses = this.deviceClasses;
-    Handlebars.registerHelper('deviceClass', function(deviceCategory) {
-      return deviceClasses[deviceCategory];
-    });
+    Handlebars.registerHelper('deviceClass', this.deviceCategoryClass);
+    Handlebars.registerHelper('numberFormat', this.numberFormat);
   },
   getTemplate: function(id) {
     var templ = this.templates[id];

diff --git a/public/stylesheets/base.css b/public/stylesheets/base.css
diff --git a/public/stylesheets/base.scss b/public/stylesheets/base.scss
@@ -173,12 +173,8 @@ h2{
         margin-top: 5px;
         .visitor-types {
           float: left;
-          margin: 0 1em 0 0;
-        }
-        .device-type {
-          width: 5px;
-          height: 1em;
-          float: left;
+          color: #fff;
+          padding: 0.3em;
           margin: 0 0.4em 0 0;
           &.mobile {
             background: $mobile-color;
@@ -187,8 +183,11 @@ h2{
             background: $desktop-color;
           }
         }
-        .icon {
-          margin-left: 0.5em;
+        .device-type {
+          width: 5px;
+          height: 1em;
+          float: left;
+          margin: 0 0.4em 0 0;
         }
       }
     }

diff --git a/tests/templateHelperSpec.js b/tests/templateHelperSpec.js
@@ -64,9 +64,28 @@ describe("templateHelper", function() {
   });
   describe("#registerHelpers", function() {
     it("registers helper with Handlebars", function() {
-      mock = sandbox.mock(Handlebars).expects("registerHelper").once();
+      mock = sandbox.mock(Handlebars).expects("registerHelper").twice();
       subject.registerHelpers();
       mock.verify();
     });
   });
+  describe("numberFormat", function() {
+    it("returns string with thousand seperator", function() {
+      expect(subject.numberFormat(5000)).to.eq("5,000");
+    });
+    it("always returns integers", function() {
+      expect(subject.numberFormat(5000.01)).to.eq("5,000");
+    });
+    it("has multiple thousand seperators in big numbers", function() {
+      expect(subject.numberFormat(5000000)).to.eq("5,000,000");
+    });
+  });
+  describe("deviceCategoryClass", function() {
+    it("returns icon-mobile-phone for mobile", function() {
+      expect(subject.deviceCategoryClass("mobile")).to.eq("icon-mobile-phone");
+    });
+    it("returns icon-desktop for desktop", function() {
+      expect(subject.deviceCategoryClass("desktop")).to.eq("icon-desktop");
+    });
+  });
 });