Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better animation effects when donate link clicked.

Browse source 
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.
This commit is contained in:
Bradley M. Kuhn 2015-03-09 08:46:16 -07:00
parent b571c7fdeb
commit efe90bd2d0
3 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
www/conservancy/static/npoacct/index.html
View file

@ -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> <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> <p style="font-size: 75%">(Progress bar updated daily.)</p>
<a id="donate" style="text-decoration:none"></a> <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 --> <!-- PayPal start -->
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <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 --> - Balanced end -->
<p> <p>
Other donation methods: <span class="donate-box-highlight">Other donation methods:</span>
<div class="toggle-unit"> <div class="toggle-unit">
<h4 class="toggle-control" data-text="Wire Transfer" <h4 class="toggle-control" data-text="Wire Transfer"
data-expanded-text="Wire Transfer:">Wire Transfer</h4> data-expanded-text="Wire Transfer:">Wire Transfer</h4>

12
www/conservancy/static/supporter-page.js
View file

@ -59,10 +59,18 @@ $(document).ready(function() {
.addClass('clickable') .addClass('clickable')
.bind('click', function() { .bind('click', function() {
var $control = $('#donate-box'); var $control = $('#donate-box');
var $otherTextControl = $('.donate-sidebar');
setTimeout(function() { $control.find('.toggle-content').slideUp(100);
$control.toggleClass('expanded'); $control.toggleClass('expanded');
$control.find('.toggle-content').slideUp("slow"); $control.find('.toggle-content').slideDown(800).fadeOut(10);
$control.find('.toggle-content').slideDown("slow"); $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(); $(".t-shirt-size-selector").hide();
$('input[name=on0]:radio').change(function() { $('input[name=on0]:radio').change(function() {

8
www/conservancy/templates/base_compliance.html
View file

@ -19,7 +19,7 @@
<h3>Support GPL Compliance Now!</h3> <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 %} {% cache 3600 compliancedonation fundgoal.fundraiser_so_far_amount %}
$<span id="fundraiser-so-far">{{ fundgoal.fundraiser_so_far_amount|floatformat:0|intcomma }}</span> $<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> <div id="progressbar"><span id="fundraiser-percentage">(i.e., {{ fundgoal.percentage_there|floatformat:1 }}%)</span></div>
{% endcache %} {% endcache %}
<p>Donate now via PayPal: <p><span class="donate-box-highlight">Donate now via PayPal:</span>
</p> </p>
<!-- PayPal start --> <!-- PayPal start -->
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <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> </form>
<!-- PayPal end --> <!-- PayPal end -->
<p>Or, <a href="/supporter/#annual"><strong>become a Conservancy <p>Or, <a href="/supporter/#annual"><span class="donate-box-highlight">become a Conservancy
Supporter</strong></a> (&mdash; a better option if you're donating more Supporter</span></a> (&mdash; a better option if you're donating more
than $120, since you'll get a t-shirt!).</p> than $120, since you'll get a t-shirt!).</p>
</td></tr></table> </td></tr></table>
</div> </div>