From 6b81da82b12d974c697a2c790cd32a79f182c185 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Thu, 5 Jan 2017 15:47:12 -0800
Subject: [PATCH] new donate form :) new colors and new amount chooser

---
 app/assets/javascripts/static/donate.js       |  37 ++++--
 app/assets/stylesheets/campaigns/_show.sass   | 113 ++++++++++++++----
 .../partials/_campaign-progress.sass          |  16 ++-
 app/views/campaigns/show.html.haml            |  45 +++++--
 4 files changed, 167 insertions(+), 44 deletions(-)

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?