EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

display submit buttons as loading gifs for transactions that might take a while

pull/1/head
Andromeda Yelton 2012-11-27 13:32:25 -05:00
parent 0b9827424f
commit 1cd50d716f
6 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/templates/fund_the_pledge.html
View File

@ -7,6 +7,7 @@
<link type="text/css" rel="stylesheet" href="/static/css/campaign.css" />
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" />
{% include "stripe_stuff.html" %}
<script type="text/javascript" src="/static/js/loader-gif.js"></script>
<script type="application/x-javascript">
var $j = jQuery.noConflict();
@ -73,7 +74,7 @@ $j(document).ready(function() {
<form method="GET" action="{{ nonprofit.link }}">
{{ donate_form.non_field_errors }}
{{ donate_form }}
<input name="donate_submit" type="submit" value="Donate" id="donate_submit" />
<input name="donate_submit" type="submit" value="Donate" id="donate_submit" class="loader-gif" />
</form>
</div>
<div id="pledge_area">
@ -113,7 +114,7 @@ $j(document).ready(function() {
{% csrf_token %}
{{ form.non_field_errors }}
{{ form.as_p }}
<input id="use_account_submit" name="use_account" type="submit" class="submit-button" value="Complete Pledge" />
<input id="use_account_submit" name="use_account" type="submit" class="submit-button loader-gif" value="Complete Pledge" />
</div>
</form>
</div>
@ -178,7 +179,7 @@ $j(document).ready(function() {
</div>
<div class="payment-errors"></div>
<input id="cc_submit" type="submit" class="submit-button" value="Complete Pledge" />
<input id="cc_submit" type="submit" class="submit-button loader-gif" value="Complete Pledge" />
</form>
</div>
@ -215,7 +216,7 @@ kept around for reference as the page is overhauled
<form method="GET" action="{{nonprofit.link}}">
{{ donate_form.non_field_errors }}
{{donate_form}}
<input name="donate_submit" type="submit" value="Go Donate!" id="donate_submit" />
<input name="donate_submit" type="submit" value="Go Donate!" id="donate_submit" class="loader-gif"/>
</form>
</div>

2
frontend/templates/manage_account.html
View File

@ -98,7 +98,7 @@ $j(document).ready(function(){
</div>
<div class="payment-errors"></div>
<input id="cc_submit" type="submit" class="submit-button" value="Save Credit Card" />
<input id="cc_submit" type="submit" class="submit-button loader-gif" value="Save Credit Card" />
</form>
</div>

4
frontend/templates/pledge.html
View File

@ -8,7 +8,7 @@
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" />
<script type="text/javascript" src="/static/js/reconcile_pledge.js"></script>
<script type="text/javascript" src="/static/js/loader-gif.js"></script>
{% endblock %}
{% block news %}
@ -115,7 +115,7 @@
<div id="ack_dedication" class="ack_inactive"><div class="ack_level">$100+</div><div class="ack_header">Your acknowledgement can include a dedication (140 characters max).&nbsp;{{ form.ack_dedication.label_tag }} {{ form.ack_dedication.errors }}{{ form.ack_dedication }}</div></div>
</div>
<div id="anonbox"><I>{{ form.anonymous.label_tag }}</I> {{ form.anonymous.errors }}{{ form.anonymous }}</div>
<input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Pledge Now"{% endif %} id="pledgesubmit" />
<input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Pledge Now"{% endif %} id="pledgesubmit" class="loader-gif" />
<input name="decoy" type="submit" id="fakepledgesubmit" disabled="disabled" />
{% comment %}
When the pledge amount and premium are in an inconsistent state, the real button is disabled and (via css) hidden; instead we display this fake button with a helpful message. It's a button so we can reuse all the existing CSS for buttons, so that it looks like the real button has just changed in appearance. It's hidden and the other one un-disabled and un-hidden when the pledge & premium return to a correct state. People without javascript enabled will miss out on the front-end corrections but form validation will catch it.

4
frontend/templates/stripe_stuff.html
View File

@ -46,6 +46,8 @@ $j(document).ready(function() {
<script>
var $j = jQuery.noConflict();
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
@ -69,7 +71,7 @@ $j().ready(function() {
$j("#payment-form").submit(function(event) {
// disable the submit button to prevent repeated clicks
$j('.submit-button').attr("disabled", "disabled");
Stripe.createToken({
number: $j('.card-number').val(),
cvc: $j('.card-cvc').val(),

2
static/css/sitewide2.css
View File

File diff suppressed because one or more lines are too long

7
static/less/sitewide2.less
View File

@ -202,7 +202,12 @@ input[type="submit"], a.fakeinput {
color: white;
font-weight: bold;
padding: 0.5em 1em;
cursor: pointer;
cursor: pointer;
}
.loader-gif[disabled="disabled"], .loader-gif.show-loading {
background: url('/static/images/loading.gif') center no-repeat !important;
}
.js-page-wrap {