OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

new donate form :) new colors and new amount chooser

Browse source
This commit is contained in:
Matt Dunn-Rankin 2017-01-05 15:47:12 -08:00
parent f5fb8711fc
commit 6b81da82b1
4 changed files with 167 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/assets/javascripts/static/donate.js
View file

@ -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
app/assets/stylesheets/campaigns/_show.sass
View file

@ -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
@ -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

16
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
@ -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
@ -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

45
app/views/campaigns/show.html.haml
View file

@ -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?