Changeset - efe90bd2d04e
[Not reviewed]
0 3 0
Bradley Kuhn (bkuhn) - 7 years ago 2015-03-09 15:46:16
bkuhn@ebb.org
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.
3 files changed with 17 insertions and 9 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/npoacct/index.html
Show inline comments
...
 
@@ -110,5 +110,5 @@ our $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0
 
<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 -->
...
 
@@ -205,5 +205,5 @@ evbind(document.getElementById('bank-account-form'), 'submit',
 

	
 
<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" 
www/conservancy/static/supporter-page.js
Show inline comments
...
 
@@ -60,8 +60,16 @@ $(document).ready(function() {
 
      .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();
www/conservancy/templates/base_compliance.html
Show inline comments
...
 
@@ -20,5 +20,5 @@
 
<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 %}
...
 
@@ -28,5 +28,5 @@ of $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|
 
{% endcache %}
 

	
 
<p>Donate now via PayPal:
 
<p><span class="donate-box-highlight">Donate now via PayPal:</span>
 
</p>
 
<!-- PayPal start -->
...
 
@@ -39,6 +39,6 @@ of $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|
 
<!-- 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>
0 comments (0 inline, 0 general)