diff --git a/app/assets/javascripts/static/donate.js b/app/assets/javascripts/static/donate.js index 0a180b39..b1e77e55 100644 --- a/app/assets/javascripts/static/donate.js +++ b/app/assets/javascripts/static/donate.js @@ -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(); } }); })(); diff --git a/app/assets/stylesheets/campaigns/_show.sass b/app/assets/stylesheets/campaigns/_show.sass index 92c43a38..78b8d697 100644 --- a/app/assets/stylesheets/campaigns/_show.sass +++ b/app/assets/stylesheets/campaigns/_show.sass @@ -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 diff --git a/app/assets/stylesheets/partials/_campaign-progress.sass b/app/assets/stylesheets/partials/_campaign-progress.sass index 32ceb65d..24a06de3 100644 --- a/app/assets/stylesheets/partials/_campaign-progress.sass +++ b/app/assets/stylesheets/partials/_campaign-progress.sass @@ -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 diff --git a/app/views/campaigns/show.html.haml b/app/views/campaigns/show.html.haml index 6fb3874b..594f47a4 100644 --- a/app/views/campaigns/show.html.haml +++ b/app/views/campaigns/show.html.haml @@ -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?