dynamic progress bar

app/stylesheets/static/_donate.sass

@@ -25,7 +25,7 @@ body.static-donate
     margin-top: .5em
     padding: .75em
 
-  #campaign-progress-wrapper
+  .campaign-progress-wrapper
     +border-radius(8px)
     background: #aaa
     +linear-gradient(color-stops(#ccc, #aaa))
@@ -36,15 +36,15 @@ body.static-donate
     position: relative
     visibility: hidden
 
-  #campaign-progress
+  .campaign-progress
     background: $module-border-color
     +linear-gradient(color-stops($module-border-color + #222, $module-border-color))
     border-right: 1px solid $module-border-color
 
-  #campaign-progress-wrapper, #campaign-progress
+  .campaign-progress-wrapper, .campaign-progress
     height: 2.5em
 
-  #campaign-progress-label
+  .campaign-progress-label
     +text-shadow(#777, -1px, -1px, 0)
     color: white
     font-size: 150%
@@ -134,7 +134,7 @@ body.static-donate
     width: $image-mode-description-width
 
   &.campaign-loaded
-    #campaign-progress-wrapper
+    .campaign-progress-wrapper
       visibility: visible
 
     #campaign-donors

app/views/static/donate.html.haml

@@ -2,15 +2,15 @@
 = pledgie_link :id => 'pledgie-link-with-title'
 %h2 Image Mode is almost here, but we need your help!
 
-#campaign-progress-wrapper
-  #campaign-progress{:style => 'width: 27%'}
-  #campaign-progress-label
+.campaign-progress-wrapper
+  .campaign-progress
+  .campaign-progress-label
     We have
     = surround '$', ',' do
-      %span.campaign-raised 100
+      %span.campaign-raised
     and need
     = precede '$' do
-      %span.campaign-goal 360
+      %span.campaign-goal
     to run the upgraded server for a year
 
 %section#image-mode-data

public/javascripts/static/donate.js

@@ -3,20 +3,31 @@
 
   var pledgieURL = 'http://pledgie.com/campaigns/' + PLEDGIE_CAMPAIGN_ID + '.json?callback=?';
   $.getJSON(pledgieURL, function (data) {
-    var donorsEl = $('#campaign-donors');
-    var donorsList = donorsEl.children('ol');
     var campaign = data.campaign;
-    var pledges = campaign.pledges;
 
-    var pledge, pledgeEl;
-    for(var i in pledges) {
-      pledge = pledges[i];
-      pledgeEl = $('<li/>');
-      $('<strong/>', {text: pledge.display_name}).appendTo(pledgeEl);
-      $('<span/>', {text: pledge.date}).appendTo(pledgeEl);
-      pledgeEl.appendTo(donorsList);
+    // Write the donors list if we need to
+    var donorsEl = $('#campaign-donors');
+    if(donorsEl.length) {
+      var donorsList = donorsEl.children('ol');
+      var pledges = campaign.pledges;
+
+      var pledge, pledgeEl;
+      for(var i in pledges) {
+        pledge = pledges[i];
+        pledgeEl = $('<li/>');
+        $('<strong/>', {text: pledge.display_name}).appendTo(pledgeEl);
+        $('<span/>', {text: pledge.date}).appendTo(pledgeEl);
+        pledgeEl.appendTo(donorsList);
+      }
     }
 
+    // Set campaign progress data
+    $('span.campaign-raised').text(campaign.amount_raised);
+    $('span.campaign-goal').text(campaign.goal);
+
+    var campaign_percent = campaign.amount_raised / campaign.goal * 100;
+    $('div.campaign-progress').css('width', campaign_percent + '%');
+
     $(document.body).addClass('campaign-loaded');
   });
 })();

public/stylesheets/compiled/screen.css

@@ -2524,7 +2524,7 @@ body.static-donate #pledgie-link-with-title {
   padding: 0.75em;
 }
 /* line 28, ../../../app/stylesheets/static/_donate.sass */
-body.static-donate #campaign-progress-wrapper {
+body.static-donate .campaign-progress-wrapper {
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   background: #aaaaaa;
@@ -2538,7 +2538,7 @@ body.static-donate #campaign-progress-wrapper {
   visibility: hidden;
 }
 /* line 39, ../../../app/stylesheets/static/_donate.sass */
-body.static-donate #campaign-progress {
+body.static-donate .campaign-progress {
   background: #006600;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #228822), color-stop(100%, #006600));
   background-image: -moz-linear-gradient(top, #228822 0%, #006600 100%);
@@ -2546,11 +2546,11 @@ body.static-donate #campaign-progress {
   border-right: 1px solid #006600;
 }
 /* line 44, ../../../app/stylesheets/static/_donate.sass */
-body.static-donate #campaign-progress-wrapper, body.static-donate #campaign-progress {
+body.static-donate .campaign-progress-wrapper, body.static-donate .campaign-progress {
   height: 2.5em;
 }
 /* line 47, ../../../app/stylesheets/static/_donate.sass */
-body.static-donate #campaign-progress-label {
+body.static-donate .campaign-progress-label {
   text-shadow: #777777 -1px -1px 0;
   color: white;
   font-size: 150%;
@@ -2639,7 +2639,7 @@ body.static-donate #image-mode-description, body.static-donate #image-mode-comme
   width: 436px;
 }
 /* line 137, ../../../app/stylesheets/static/_donate.sass */
-body.static-donate.campaign-loaded #campaign-progress-wrapper {
+body.static-donate.campaign-loaded .campaign-progress-wrapper {
   visibility: visible;
 }
 /* line 140, ../../../app/stylesheets/static/_donate.sass */