Skip to content

Commit

Permalink
new donate form :) new colors and new amount chooser
Browse files Browse the repository at this point in the history
  • Loading branch information
@matchu
matchu committed Jan 5, 2017
1 parent f5fb871 commit 6b81da8
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 44 deletions.
37 changes: 28 additions & 9 deletions app/assets/javascripts/static/donate.js
View file
Expand Up @@ -22,26 +22,45 @@
if (!field('stripe_token').value) {
e.preventDefault();

var amount = Math.floor(parseFloat(field('amount').value) * 100);
var amountChoice =
donationForm.querySelector('input[name=amount]:checked');
if (amountChoice.value === "custom") {
amountChoice = document.getElementById('amount-custom-value');
}

// Start parsing at the first digit in the string, to trim leading dollar
// signs and what have you.
var amountNumberString = (amountChoice.value.match(/[0-9].+/) || [""])[0];
var amount = Math.floor(parseFloat(amountNumberString) * 100);

if (!isNaN(amount)) {
field('amount').value = amountNumberString;
checkout.open({
name: 'Dress to Impress',
description: 'Donation (thank you!)',
amount: amount
amount: amount,
panelLabel: "Donate"
});
}
}
});

var toggle = document.getElementById('success-thanks-toggle-description');
toggle.addEventListener('click', function() {
var desc = document.getElementById('description');
var attr = 'data-show';
if (desc.hasAttribute(attr)) {
desc.removeAttribute(attr);
} else {
desc.setAttribute(attr, true);
if (toggle) {
toggle.addEventListener('click', function() {
var desc = document.getElementById('description');
var attr = 'data-show';
if (desc.hasAttribute(attr)) {
desc.removeAttribute(attr);
} else {
desc.setAttribute(attr, true);
}
});
}

document.getElementById('amount-custom').addEventListener('change', function(e) {
if (e.target.checked) {
document.getElementById('amount-custom-value').focus();
}
});
})();
113 changes: 92 additions & 21 deletions app/assets/stylesheets/campaigns/_show.sass
View file
Expand Up @@ -15,7 +15,10 @@ body.campaigns-show, body.campaigns-current
color: $campaign-text-color

a
color: $campaign-text-color + #222
color: $campaign-text-color + #222 !important

#home-link:hover
background-color: $campaign-background-color

#userbar, #footer
color: $text-color
Expand All @@ -32,52 +35,120 @@ body.campaigns-show, body.campaigns-current
+module
background: $campaign-background-color
border-color: $campaign-border-color
display: flex
flex-direction: row
margin-top: 1em
margin-bottom: 1.5em
padding-bottom: 32px
padding-left: 24px
padding-right: 24px
padding-top: 32px
position: relative

&[data-campaign-theme="hug"]
background:
image: url(image_path("campaigns/hug.gif"))
position: ($container-width - 150px - 8px) -4px
repeat: no-repeat

&[data-campaign-theme="bird"]
// We only use bird theme now. Whatever.
&::after
background:
image: url(image_path("campaigns/bird.gif"))
position: ($container-width - 150px - 8px) -4px
repeat: no-repeat
bottom: 0
content: " "
height: 125px
position: absolute
right: 0
width: 150px

header, div
+inline-block

p
font-family: $main-font
margin: 0

div
font-size: 115%
margin-left: 20px
header, #donation-fields
flex: 1

#donation-form-title
font-size: 125%
font-weight: bold
margin-bottom: .25em
margin-top: 0

p
font-family: $main-font
font-size: 85%
margin-bottom: 0
margin-top: .5em

#donation-fields
margin-left: 20px
padding-top: 7px

#amount-header
font-size: 85%
font-weight: bold

#amount-choices
$amount-choices-border-color: desaturate(lighten($campaign-border-color, 30%), 30%)

display: flex
flex-direction: row
margin-bottom: 1em

li
border: 1px solid $amount-choices-border-color
border-radius: 5px
display: block
flex: 1
list-style: none
overflow: hidden
text-align: center

&:not(:last-of-type)
margin-right: .75em

input[type=radio]
height: 0
margin: 0
padding: 0
opacity: 0
position: absolute
width: 0

label
border: 1px solid transparent
box-sizing: border-box
display: block
padding: .5em .5em
width: 100%

input[type=radio]:checked ~ label
background: $amount-choices-border-color
font-weight: bold

input[type=radio]:focus ~ label
border-color: white
border-radius: 5px

#amount-custom-fields
display: none

input[type=text]
font-family: inherit
font-size: inherit
line-height: 1
padding: 0
text-align: center

#amount-custom:checked ~ #amount-custom-fields
display: block

#amount-custom:checked ~ label[for=amount-custom]
display: none

input[type=text]
border-color: #cce
color: $campaign-text-color
width: 3em

button
+loud-awesome-button-color
#donation-controls
text-align: center

button
+awesome-button-color(#004)
font-size: 120%

#campaign-text[data-campaign-complete]
#description
Expand Down
16 changes: 11 additions & 5 deletions app/assets/stylesheets/partials/_campaign-progress.sass
View file
@@ -1,6 +1,12 @@
$campaign-border-color: #006
$campaign-background-color: #eef
$campaign-text-color: #004
// 2015 campaign blue
// $campaign-border-color: #006
// $campaign-background-color: #eef
// $campaign-text-color: #004
// $campaign-link-color: $campaign-text-color + #222
$campaign-border-color: hsl(33, 100%, 40%)
$campaign-background-color: hsl(33, 100%, 97%)
$campaign-text-color: hsl(33, 100%, 20%)
$campaign-link-color: $campaign-text-color + #222

=campaign-progress
Expand All @@ -17,7 +23,7 @@ $campaign-link-color: $campaign-text-color + #222

.button
+awesome-button
+loud-awesome-button-color
+awesome-button-color(#004)
font-size: 75%
margin-left: 1em
padding: .25em .75em
Expand All @@ -31,7 +37,7 @@ $campaign-link-color: $campaign-text-color + #222
height: 2.5em

.campaign-progress-label
+text-shadow(#777, -1px, -1px, 0)
text-shadow: 1px 1px 0 #888
color: white
font-size: 150%
left: 0
Expand Down
45 changes: 36 additions & 9 deletions app/views/campaigns/show.html.haml
View file
Expand Up @@ -13,18 +13,45 @@
= hidden_field_tag 'donation[stripe_token]'
= hidden_field_tag 'donation[stripe_token_type]'
= hidden_field_tag 'donation[donor_email]'
= hidden_field_tag 'donation[amount]'
%header
-# I'm hardcoding the messaging this year, because I'm abandoning the UI
-# of giant paragraphs, and I don't feel like figuring out how this new
-# design generalizes just yet :P Whatever.
%p#donation-form-title
Thanks for supporting Dress to Impress!
%p#donation-form-subtitle
Securely powered by #{link_to 'Stripe', 'https://stripe.com/'}.
We never, ever see your payment info.
%br
All donations go directly to our hosting costs. Thanks for your help!
%div
= precede '$' do
= text_field_tag 'donation[amount]', '10.00'
%button{:type => 'submit'} Donate now!
%p
From modeling to servers, Dress to Impress is a community effort.
This year, we need to raise $720 to cover our 2016 hosting costs.
%p
As a thank-you gift, for every $5 you give, we'll feature one of your
outfits here and on the homepage. Last year's outfits were pretty great—will this year's be even better? :o
%p
All donations are securely powered by
#{link_to 'Stripe', 'https://stripe.com/'}, and go directly toward our
hosting costs. Thank you for your help!
#donation-fields
#amount-header Amount
#amount-choices
%li
%input#amount-5{type: 'radio', name: 'amount', value: '5.00'}
%label{for: 'amount-5'} $5
%li
%input#amount-10{type: 'radio', name: 'amount', value: '10.00'}
%label{for: 'amount-10'} $10
%li
%input#amount-30{type: 'radio', name: 'amount', value: '20.00', checked: true}
%label{for: 'amount-30'} $20
%li
%input#amount-50{type: 'radio', name: 'amount', value: '50.00'}
%label{for: 'amount-50'} $50
%li
%input#amount-custom{type: 'radio', name: 'amount', value: 'custom'}
%label{for: 'amount-custom'} Other
%label#amount-custom-fields{for: 'amount-custom-value'}
%input#amount-custom-value{type: 'text'}
#donation-controls
%button{type: 'submit'} Donate now!

#campaign-text{'data-campaign-complete' => @campaign.complete?}
- if @campaign.complete? && @campaign.thanks?
Expand Down

0 comments on commit 6b81da8

Please sign in to comment.