connect /donate to pledgie via jsonp

This commit is contained in:
Emi Matchu 2011-07-01 14:53:28 -04:00
parent 5ecd5f3ce4
commit 868dd003fd
4 changed files with 235 additions and 30 deletions

View file

@ -1,3 +1,6 @@
@import "compass/css3/gradient"
@import "compass/css3/text-shadow"
body.static-donate
#title
margin-bottom: 0
@ -9,6 +12,9 @@ body.static-donate
#title, h2
float: left
h2
margin-bottom: .25em
.pledgie-link
+awesome-button
+loud-awesome-button-color
@ -19,18 +25,53 @@ body.static-donate
margin-top: .5em
padding: .75em
#campaign-progress-wrapper
+border-radius(8px)
background: #aaa
+linear-gradient(color-stops(#ccc, #aaa))
border: 4px solid $module-border-color
clear: both
margin-bottom: 1.5em
position: relative
visibility: hidden
#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
height: 2.5em
#campaign-progress-label
+text-shadow(#777, -1px, -1px, 0)
color: white
font-size: 150%
left: 0
position: absolute
top: 0
text-align: center
width: 100%
$image-mode-preview-image-width: 300px
$image-mode-preview-image-border-width: 1px
$image-mode-preview-h-padding: 20px
$image-mode-preview-border-width: 1px
$image-mode-preview-right-margin: 20px
$image-mode-preview-outer-width: $image-mode-preview-image-width + $image-mode-preview-right-margin + 2 * ($image-mode-preview-image-border-width + $image-mode-preview-h-padding + $image-mode-preview-border-width)
#image-mode-preview
border: $image-mode-preview-border-width solid $module-border-color
$image-mode-preview-width: $image-mode-preview-image-width + 2 * ($image-mode-preview-image-border-width + $image-mode-preview-h-padding + $image-mode-preview-border-width)
$image-mode-preview-outer-width: $image-mode-preview-width + $image-mode-preview-right-margin
#image-mode-data
clear: both
display: block
float: left
margin: 0 $image-mode-preview-right-margin 0 0
margin-right: $image-mode-preview-right-margin
width: $image-mode-preview-width
#image-mode-preview
border: $image-mode-preview-border-width solid $module-border-color
margin: 0 0 2em 0
padding:
top: $image-mode-preview-h-padding
right: $image-mode-preview-h-padding
@ -47,6 +88,19 @@ body.static-donate
font-size: 250%
text-align: center
#campaign-donors
display: none
margin-right: $image-mode-preview-right-margin
width: $image-mode-preview-width
ol
font-size: 85%
padding-left: 2em
span
color: $soft-text-color
float: right
$image-mode-description-width: $container-width - $image-mode-preview-outer-width
$image-mode-beta-h-padding: 15px
@ -75,7 +129,14 @@ body.static-donate
.pledgie-link
margin: .75em 0
#image-mode-description
#image-mode-description, #image-mode-comments
float: left
width: $image-mode-description-width
&.campaign-loaded
#campaign-progress-wrapper
visibility: visible
#campaign-donors
display: block

View file

@ -2,21 +2,36 @@
= pledgie_link :id => 'pledgie-link-with-title'
%h2 Image Mode is almost here, but we need your help!
%figure#image-mode-preview
#campaign-progress-wrapper
#campaign-progress{:style => 'width: 27%'}
#campaign-progress-label
We have
= surround '$', ',' do
%span.campaign-raised 100
and need
= precede '$' do
%span.campaign-goal 360
to run the upgraded server for a year
%section#image-mode-data
%figure#image-mode-preview
= image_tag 'image_mode_preview.png'
%figcaption
Image Mode ♥
#campaign-donors
%h3 Thank you!
%ol
%article#image-mode-beta
%header Donate $5 or more for early beta access
#image-mode-beta
%header Donate at least $5 for early beta access
= pledgie_link
%p
Include your
= link_to 'Dress to Impress username', login_path_with_return_to
in Special Instructions.
in PayPal's Special Instructions field.
%p We'll email you soon!
%article#image-mode-description
#image-mode-description
:markdown
**Soon, Dress to Impress will be able to both save outfits as images and
even run entirely without Flash**. Image Mode. It's taken months to put
@ -33,8 +48,44 @@
need to do in order to have enough RAM to both convert Flash to image and
also run a website with thousands of users a day.
**As a little treat, those who give at least $5 will get early access
to Image Mode.** Though we're still missing quite a few converted SWFs,
you'll be able to get a feel for what Image Mode will be when it's ready
for prime time, and help make sure it's exactly as simple and powerful as
it needs to be.
**Thank you for your continued support.** Dress to Impress is 100%
user-funded, and we hope to stay that way. Our goal is to raise enough
money to guarantee that we'll be up and running for the next 12 months. I
think we can do it.
know we can do it.
#image-mode-comments
#disqus_thread
:javascript
var disqus_shortname = 'dresstoimpress';
// The following are highly recommended additional parameters. Remove the slashes in front to use.
var disqus_identifier = 'dresstoimpress_donate';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
%a.dsq-brlink{:href => "http://disqus.com"}
blog comments powered by
%span.logo-disqus Disqus
- content_for :javascripts do
= include_javascript_libraries :jquery
= javascript_include_tag 'static/donate'
- content_for :meta do
%meta{:name => 'pledgie-campaign-id', :content => PLEDGIE_CAMPAIGN_ID}

View file

@ -0,0 +1,23 @@
(function () {
var PLEDGIE_CAMPAIGN_ID = $('meta[name=pledgie-campaign-id]').attr('content');
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);
}
$(document.body).addClass('campaign-loaded');
});
})();

View file

@ -2463,20 +2463,24 @@ body.pets-bulk .script-only {
display: none;
}
/* line 2, ../../../app/stylesheets/static/_donate.sass */
/* line 5, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #title {
margin-bottom: 0;
}
/* line 5, ../../../app/stylesheets/static/_donate.sass */
/* line 8, ../../../app/stylesheets/static/_donate.sass */
body.static-donate h2 {
font-style: italic;
font-weight: normal;
}
/* line 9, ../../../app/stylesheets/static/_donate.sass */
/* line 12, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #title, body.static-donate h2 {
float: left;
}
/* line 12, ../../../app/stylesheets/static/_donate.sass */
/* line 15, ../../../app/stylesheets/static/_donate.sass */
body.static-donate h2 {
margin-bottom: 0.25em;
}
/* line 18, ../../../app/stylesheets/static/_donate.sass */
body.static-donate .pledgie-link {
/* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
-moz-border-radius: 5px;
@ -2512,7 +2516,7 @@ body.static-donate .pledgie-link:active {
body.static-donate .pledgie-link:hover {
background-color: #ee4b00;
}
/* line 16, ../../../app/stylesheets/static/_donate.sass */
/* line 22, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #pledgie-link-with-title {
float: right;
font-size: 150%;
@ -2520,30 +2524,88 @@ body.static-donate #pledgie-link-with-title {
padding: 0.75em;
}
/* line 28, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-preview {
border: 1px solid #006600;
body.static-donate #campaign-progress-wrapper {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #aaaaaa;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #cccccc 0%, #aaaaaa 100%);
background-image: linear-gradient(top, #cccccc 0%, #aaaaaa 100%);
border: 4px solid #006600;
clear: both;
margin-bottom: 1.5em;
position: relative;
visibility: hidden;
}
/* line 39, ../../../app/stylesheets/static/_donate.sass */
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%);
background-image: linear-gradient(top, #228822 0%, #006600 100%);
border-right: 1px solid #006600;
}
/* line 44, ../../../app/stylesheets/static/_donate.sass */
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 {
text-shadow: #777777 -1px -1px 0;
color: white;
font-size: 150%;
left: 0;
position: absolute;
top: 0;
text-align: center;
width: 100%;
}
/* line 65, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-data {
clear: both;
display: block;
float: left;
margin: 0 20px 0 0;
margin-right: 20px;
width: 344px;
}
/* line 72, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-preview {
border: 1px solid #006600;
margin: 0 0 2em 0;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 13.333px;
padding-left: 20px;
}
/* line 40, ../../../app/stylesheets/static/_donate.sass */
/* line 81, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-preview img {
border: 1px solid #006600;
margin-bottom: 0.5em;
}
/* line 44, ../../../app/stylesheets/static/_donate.sass */
/* line 85, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-preview figcaption {
display: block;
font-family: Calligraffitti;
font-size: 250%;
text-align: center;
}
/* line 56, ../../../app/stylesheets/static/_donate.sass */
/* line 91, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #campaign-donors {
display: none;
margin-right: 20px;
width: 344px;
}
/* line 96, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #campaign-donors ol {
font-size: 85%;
padding-left: 2em;
}
/* line 100, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #campaign-donors ol span {
color: #448844;
float: right;
}
/* line 110, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-beta {
background: #eeffee;
border: 1px solid #006600;
@ -2556,26 +2618,34 @@ body.static-donate #image-mode-beta {
text-align: center;
width: 404px;
}
/* line 66, ../../../app/stylesheets/static/_donate.sass */
/* line 120, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-beta header {
display: block;
font-weight: bold;
}
/* line 70, ../../../app/stylesheets/static/_donate.sass */
/* line 124, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-beta p {
font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif;
font-size: 75%;
margin: 0;
}
/* line 75, ../../../app/stylesheets/static/_donate.sass */
/* line 129, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-beta .pledgie-link {
margin: 0.75em 0;
}
/* line 78, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-description {
/* line 132, ../../../app/stylesheets/static/_donate.sass */
body.static-donate #image-mode-description, body.static-donate #image-mode-comments {
float: left;
width: 436px;
}
/* line 137, ../../../app/stylesheets/static/_donate.sass */
body.static-donate.campaign-loaded #campaign-progress-wrapper {
visibility: visible;
}
/* line 140, ../../../app/stylesheets/static/_donate.sass */
body.static-donate.campaign-loaded #campaign-donors {
display: block;
}
/* line 1, ../../../app/stylesheets/static/_terms.sass */
body.static-terms {