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 { .supporter-form label {
display: inline-block; display: inline-block;
width: 200px; width: 200px;
text-align: right; text-align: right;
font-weight: bold;
} }
.dinner-form label { .dinner-form label {
display: inline-block; display: inline-block;
@ -17,7 +22,7 @@
.supporter-form-submit { .supporter-form-submit {
padding-left: 20em; padding-left: 20em;
padding-top: 40px; padding-top: 40px;
float: center; font-size: small;
} }
.dinner-form-submit { .dinner-form-submit {
padding-left: 20em; padding-left: 20em;
@ -25,10 +30,6 @@
float: center; float: center;
} }
.supporter-form div {
margin-top: 1em;
}
.dinner-form div { .dinner-form div {
margin-top: 1em; margin-top: 1em;
} }

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

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