From efe90bd2d04ea3b82389db0ebfe74b94d8a18981 2015-03-09 15:46:16
From: Bradley M. Kuhn <bkuhn@ebb.org>
Date: 2015-03-09 15:46:16
Subject: [PATCH] Better animation effects when donate link clicked.

The banner always faded in/out, but now other texts can be designated
with the class 'donate-box-highlight' and those will fade out and fade
back in with bold and slightly larger font.

---

diff --git a/www/conservancy/static/npoacct/index.html b/www/conservancy/static/npoacct/index.html
index 55a6bf55980945c386ca2730cb5114fbe54d16c8..f8a40ee69232760b48d93d56d26dcad5c4c5b8b1 100644
--- a/www/conservancy/static/npoacct/index.html
+++ b/www/conservancy/static/npoacct/index.html
@@ -109,7 +109,7 @@ our $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0
 <div id="progressbar"><span id="fundraiser-percentage">(i.e., {{ fundgoal.percentage_there|floatformat:1 }}%)</span></div>
 <p style="font-size: 75%">(Progress bar updated daily.)</p>
 <a id="donate" style="text-decoration:none"></a>
-<h3>Help us reach our goal:</h3>
+<h3 class="donate-box-highlight">Help us reach our goal:</h3>
 
 <!-- PayPal start -->
 <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
@@ -204,7 +204,7 @@ evbind(document.getElementById('bank-account-form'), 'submit',
 - Balanced end -->
 
 <p>
-Other donation methods:
+  <span class="donate-box-highlight">Other donation methods:</span>
 <div class="toggle-unit">
     <h4 class="toggle-control" data-text="Wire Transfer" 
     data-expanded-text="Wire Transfer:">Wire Transfer</h4>
diff --git a/www/conservancy/static/supporter-page.js b/www/conservancy/static/supporter-page.js
index c2e6d52bfc3fe3a7d7d1b1e549ae75e48f78550f..910c679d9c23d1196cfe8a5fea021884b575e4bc 100644
--- a/www/conservancy/static/supporter-page.js
+++ b/www/conservancy/static/supporter-page.js
@@ -59,10 +59,18 @@ $(document).ready(function() {
       .addClass('clickable')
       .bind('click', function() {
         var $control = $('#donate-box');
+        var $otherTextControl = $('.donate-sidebar');
 
-        $control.toggleClass('expanded');
-        $control.find('.toggle-content').slideUp("slow");
-        $control.find('.toggle-content').slideDown("slow");
+        setTimeout(function() { $control.find('.toggle-content').slideUp(100);
+                                $control.toggleClass('expanded');
+                                $control.find('.toggle-content').slideDown(800).fadeOut(10);
+                                $otherTextControl.find('.donate-box-highlight').fadeOut(100);
+                              }, 300);
+          setTimeout(function() { $control.find('.toggle-content').fadeIn(2000);
+                                  $otherTextControl.find('.donate-box-highlight')
+                                  .css({'font-weight': 'bold', 'font-size' : '110%' });
+                                  $otherTextControl.find('.donate-box-highlight').fadeIn(10000);
+                                }, 500);
     });
     $(".t-shirt-size-selector").hide();
     $('input[name=on0]:radio').change(function() {
diff --git a/www/conservancy/templates/base_compliance.html b/www/conservancy/templates/base_compliance.html
index 0895a769a1c498d7c686734802d1c9695e0060c4..9c79e3314c6340a8accb3796b79c75148f86601e 100644
--- a/www/conservancy/templates/base_compliance.html
+++ b/www/conservancy/templates/base_compliance.html
@@ -19,7 +19,7 @@
 
 <h3>Support GPL Compliance Now!</h3>
 
-<p>Support our GPL compliance work now &amp; <strong>donations count double!</strong></p>
+<p>Support our GPL compliance work now &amp; <span class="donate-box-highlight">donations count double!</span></p>
 
 {% cache 3600 compliancedonation fundgoal.fundraiser_so_far_amount %}
 $<span id="fundraiser-so-far">{{ fundgoal.fundraiser_so_far_amount|floatformat:0|intcomma }}</span>
@@ -27,7 +27,7 @@ of $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|
 <div id="progressbar"><span id="fundraiser-percentage">(i.e., {{ fundgoal.percentage_there|floatformat:1 }}%)</span></div>
 {% endcache %}
 
-<p>Donate now via PayPal:
+<p><span class="donate-box-highlight">Donate now via PayPal:</span>
 </p>
 <!-- PayPal start -->
 <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
@@ -38,8 +38,8 @@ of $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|
 </form>
 <!-- PayPal end -->
 
-<p>Or, <a href="/supporter/#annual"><strong>become a Conservancy
-      Supporter</strong></a> (&mdash; a better option if you're donating more
+<p>Or, <a href="/supporter/#annual"><span class="donate-box-highlight">become a Conservancy
+      Supporter</span></a> (&mdash; a better option if you're donating more
       than $120, since you'll get a t-shirt!).</p>
 </td></tr></table>
 </div>