dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

dynamic progress bar

Browse source
This commit is contained in:
Emi Matchu 2011-07-01 15:18:05 -04:00
parent 69ca36e75a
commit 2077ea8984
4 changed files with 36 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/stylesheets/static/_donate.sass
View file

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

10
app/views/static/donate.html.haml
View file

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

15
public/javascripts/static/donate.js
View file

@ -3,9 +3,12 @@
var pledgieURL = 'http://pledgie.com/campaigns/' + PLEDGIE_CAMPAIGN_ID + '.json?callback=?'; var pledgieURL = 'http://pledgie.com/campaigns/' + PLEDGIE_CAMPAIGN_ID + '.json?callback=?';
$.getJSON(pledgieURL, function (data) { $.getJSON(pledgieURL, function (data) {
var donorsEl = $('#campaign-donors');
var donorsList = donorsEl.children('ol');
var campaign = data.campaign; var campaign = data.campaign;
// 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 pledges = campaign.pledges;
var pledge, pledgeEl; var pledge, pledgeEl;
@ -16,6 +19,14 @@
$('<span/>', {text: pledge.date}).appendTo(pledgeEl); $('<span/>', {text: pledge.date}).appendTo(pledgeEl);
pledgeEl.appendTo(donorsList); 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'); $(document.body).addClass('campaign-loaded');
}); });

10
public/stylesheets/compiled/screen.css
View file

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