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

supporter: Move more presentation rules to CSS.

Browse source 
This commit keeps the presentation basically the same, it just moves
presentation rules out of HTML and into CSS.  It's not pixel-perfect but
pretty close.
This commit is contained in:
Brett Smith 2017-01-01 13:53:41 -05:00
parent 19e744788b
commit 8605b65783
3 changed files with 81 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
www/conservancy/static/css/forms.css
View file

@ -1,7 +1,12 @@
.supporter-type-selection .prolog > span:first-child {
font-weight: bold;
}
.supporter-form label {
display: inline-block;
width: 200px;
text-align: right;
font-weight: bold;
}
.dinner-form label {
display: inline-block;
@ -17,7 +22,7 @@
.supporter-form-submit {
padding-left: 20em;
padding-top: 40px;
float: center;
font-size: small;
}
.dinner-form-submit {
padding-left: 20em;
@ -25,10 +30,6 @@
float: center;
}
.supporter-form div {
margin-top: 1em;
}
.dinner-form div {
margin-top: 1em;
}

18
www/conservancy/static/js/conservancy.js
View file

@ -88,16 +88,16 @@ $(document).ready(function() {
});
$(".t-shirt-size-selector").hide();
$('input[name=on0]:radio').change(function() {
var input=$(this);
var tShirtSelector = input.parent().children('.t-shirt-size-selector')
var noShippingSelector = input.parent().children('input[name=no_shipping]');
var value = input.val();
if (value == "wantGiftYes") {
tShirtSelector.show();
noShippingSelector.val("2");
var $input = $(this);
var $form = $input.parents('form').last();
var $tShirtSelector = $('.t-shirt-size-selector', $form);
var $noShippingSelector = $('input[name=no_shipping]', $form);
if ($input.val() == "wantGiftYes") {
$tShirtSelector.show();
$noShippingSelector.val("2");
} else {
tShirtSelector.hide();
noShippingSelector.val("0");
$tShirtSelector.hide();
$noShippingSelector.val("0");
}
});
});

116
www/conservancy/templates/supporter/form_partial.html
View file

@ -30,25 +30,27 @@ This partial accepts these optional parameters:
<div id="{{ form_id }}" class="supporter-type-selection">
<h3>{{ verb|capfirst }} as {{ article }} {{ supptype|capfirst }} Supporter</h3>
{% if form_id == "annual" %}
<p><strong>Note:</strong> annual supporter is not an automatic renewal
<p class="prolog"><span>Note:</span>
{% if form_id == "annual" %}
annual supporter is not an automatic renewal
relationship. If you join today, you'll receive an email in about one
year to remind you to optionally renew.</p>
{% elif form_id == "monthly" %}
<p>Monthly renewal is automatic. Also, monthly supporters might not
year to remind you to optionally renew.
{% elif form_id == "monthly" %}
Monthly renewal is automatic. Also, monthly supporters might not
receive tangible Supporter benefits (such as the t-shirt) until they've
reached at least
{# Six months of payments #}
${{ min_amt|add:min_amt|add:min_amt|add:min_amt|add:min_amt|add:min_amt }}
in monthly supporter donations.
However, they will be included immediately in
the <a href="/sponsors/#supporters">Supporters' list</a>.</p>
{% elif form_id == "renewal" %}
<p><strong>Note:</strong> This option is for existing annual supporters
the <a href="/sponsors/#supporters">Supporters' list</a>.
{% elif form_id == "renewal" %}
This option is for existing annual supporters
who seek to renew for another year. The annual renewal is not
automatic; annual supporters are emailed each year to invite them to
optionally renew.</p>
{% endif %}
optionally renew.
{% endif %}
</p>
<form class="supporter-form" method="post" target="_top"
action="https://www.paypal.com/cgi-bin/webscr"
@ -60,38 +62,44 @@ This partial accepts these optional parameters:
<input type="hidden" name="item_name"
value="Conservancy Supporter, {{ supptype|capfirst }}{% if form_id == "renewal" %} Renewal{% endif %}"
>
{% if form_id == "monthly" %}
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="src" value="1">
<input type="hidden" name="srt" value="0">
<label for="a3"><strong>Monthly Amount:</strong> $</label>
<input type="number" name="a3" size="5"
min="{{ min_amt }}" value="{{ default_amt }}">
{% else %}
<input type="hidden" name="cmd" value="_xclick">
<label for="amount"><strong>Amount:</strong> $</label>
<input type="number" name="amount" size="5"
min="{{ min_amt }}" value="{{ default_amt }}">
{% endif %}
<span class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
Conservancy Supporters.
<a href="/donate">Donate smaller amounts here</a>.</span><br>
<label for="wantGift"><strong>Do you want to receive
<div class="supporter-form-input">
{% if form_id == "monthly" %}
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="src" value="1">
<input type="hidden" name="srt" value="0">
<label for="a3">Monthly Amount: $</label>
<input type="number" name="a3" size="5"
min="{{ min_amt }}" value="{{ default_amt }}">
{% else %}
<input type="hidden" name="cmd" value="_xclick">
<label for="amount">Amount: $</label>
<input type="number" name="amount" size="5"
min="{{ min_amt }}" value="{{ default_amt }}">
{% endif %}
<span class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
Conservancy Supporters.
<a href="/donate">Donate smaller amounts here</a>.</span>
</div>
<div class="supporter-form-input">
<label for="wantGift">Do you want to receive
{% if form_id == "renewal" %}
another
{% else %}
a
{% endif %}
t-shirt? </strong></label>
<input type="radio" name="on0" value="wantGiftYes">Yes
<input type="radio" checked="checked" name="on0" value="wantGiftNo">No
<br>
<span class="t-shirt-size-selector">
<label for="tShirtSize"><strong>T-shirt size: </strong></label>
t-shirt? </label>
<input type="radio" name="on0" value="wantGiftYes">Yes
<input type="radio" checked="checked" name="on0" value="wantGiftNo">No
</div>
<div class="supporter-form-input t-shirt-size-selector">
<label for="tShirtSize">T-shirt size: </label>
<select name="os0">
<option value="MenS">Men's S</option>
<option value="MenM">Men's M</option>
@ -106,24 +114,32 @@ This partial accepts these optional parameters:
<option value="FittedLadiesM">Fitted Ladies' M</option>
<option value="FittedLadiesL">Fitted Ladies' L</option>
<option value="FittedLadiesXL">Fitted Ladies' XL</option>
</select><br></span>
<label for="publicAck"><strong>
Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>
<input type="radio" checked="checked" name="on1" value="publicAckYes">Yes
<input type="radio" name="on1" value="publicAckNo">No<br>
<label for="joinList"><strong>Join Conservancy's
Low-Traffic Announcement Email List? </strong></label>
<input type="radio" checked="checked" name="os1" value="joinListYes">Yes
<input type="radio" name="os1" value="joinListNo">No<br>
<br></div>
<div>
</select>
</div>
<div class="supporter-form-input">
<label for="publicAck">
Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </label>
<input type="radio" checked="checked" name="on1" value="publicAckYes">Yes
<input type="radio" name="on1" value="publicAckNo">No
</div>
<div class="supporter-form-input">
<label for="joinList">Join Conservancy's
Low-Traffic Announcement Email List? </label>
<input type="radio" checked="checked" name="os1" value="joinListYes">Yes
<input type="radio" name="os1" value="joinListNo">No
</div>
</div>
<div class="supporter-form-submit">
<input type="image" name="submit"
src="/img/supporter-payment-button-{{ form_id }}.png"
height="81" width="188" border="0"
alt="{{ verb|capfirst }} as {{ article }} {{ supptype|capfirst }} Supporter Now!">
<br><br><small>Button above redirects to PayPal's site for credit
<p>Button above redirects to PayPal's site for credit
card, bank account or PayPal balance payment methods. Select
options first.</small>
options first.</p>
</div>
</form>
</div>