supporter: New form styling.

This makes better use of bigger screens, and degrades better to smaller
ones.
This commit is contained in:
Brett Smith 2017-01-01 15:10:20 -05:00
parent 8605b65783
commit b93cc61e8b
3 changed files with 81 additions and 64 deletions

View file

@ -92,3 +92,18 @@ img.blog-right {
/* Don't let the first blog headline clear below #contractpatch-follow. */ /* Don't let the first blog headline clear below #contractpatch-follow. */
clear: right; clear: right;
} }
.supporter-form-input {
margin-bottom: .5em;
}
.supporter-form-input label,
.supporter-form-input .input-group {
display: inline-block;
width: 49%;
}
.supporter-form-input label {
text-align: right;
padding-right: .3em;
}

View file

@ -2,42 +2,40 @@
font-weight: bold; font-weight: bold;
} }
.supporter-form label { .supporter-form-input {
display: inline-block; margin-bottom: .5em;
width: 200px; white-space: nowrap;
text-align: right;
font-weight: bold;
}
.dinner-form label {
display: inline-block;
width: 200px;
text-align: right;
}
.supporter-form-inputs {
float: left;
}
.dinner-form-inputs {
float: left;
}
.supporter-form-submit {
padding-left: 20em;
padding-top: 40px;
font-size: small;
}
.dinner-form-submit {
padding-left: 20em;
padding-top: 40px;
float: center;
} }
.dinner-form div { .supporter-form-input label {
margin-top: 1em; display: inline-block;
font-weight: bold;
white-space: normal;
}
.supporter-form-input input[name=amount],
.supporter-form-input input[name=a3] {
width: 5em;
}
.supporter-form-input input[type=radio] {
margin-left: 1em;
margin-right: .2em;
}
.supporter-form-input input[type=radio]:first-of-type {
margin-left: 0;
}
.supporter-form-submit {
text-align: center;
} }
.form-error { .form-error {
color: red; color: red;
margin-left: 10px; margin-left: 10px;
font-size: 75%; font-size: 75%;
white-space: normal;
} }
input.invalid, textarea.invalid { input.invalid, textarea.invalid {
@ -49,22 +47,15 @@ input.valid, textarea.valid {
} }
.supporter-type-selector { .supporter-type-selector {
clear: both;
font-size: 125%; font-size: 125%;
text-align: center; text-align: center;
width: 80%;
align: left;
}
.supporter-type-selection {
clear: both;
padding-bottom: 60px;
width: 80%;
align: left;
} }
h1.appeal { h1.appeal {
margin-top: -.75em; margin-top: -.75em;
} }
img.appeal-left { img.appeal-left {
float: left; float: left;
padding-right: 1em; padding-right: 1em;

View file

@ -72,18 +72,21 @@ This partial accepts these optional parameters:
<input type="hidden" name="p3" value="1"> <input type="hidden" name="p3" value="1">
<input type="hidden" name="src" value="1"> <input type="hidden" name="src" value="1">
<input type="hidden" name="srt" value="0"> <input type="hidden" name="srt" value="0">
<label for="a3">Monthly Amount: $</label> <label for="a3">Monthly Amount: </label>
<input type="number" name="a3" size="5" <div class="input-group">
$ <input type="number" name="a3" size="5"
min="{{ min_amt }}" value="{{ default_amt }}"> min="{{ min_amt }}" value="{{ default_amt }}">
{% else %} {% else %}
<input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="cmd" value="_xclick">
<label for="amount">Amount: $</label> <label for="amount">Amount: </label>
<input type="number" name="amount" size="5" <div class="input-group">
$ <input type="number" name="amount" size="5"
min="{{ min_amt }}" value="{{ default_amt }}"> min="{{ min_amt }}" value="{{ default_amt }}">
{% endif %} {% endif %}
<span class="form-error">${{ min_amt|add:partial_amt }} is a minimum for <p class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
Conservancy Supporters. Conservancy Supporters.
<a href="/donate">Donate smaller amounts here</a>.</span> <a href="/donate">Donate smaller amounts here</a>.</p>
</div>
</div> </div>
<div class="supporter-form-input"> <div class="supporter-form-input">
@ -94,41 +97,49 @@ This partial accepts these optional parameters:
a a
{% endif %} {% endif %}
t-shirt? </label> t-shirt? </label>
<input type="radio" name="on0" value="wantGiftYes">Yes <div class="input-group">
<input type="radio" checked="checked" name="on0" value="wantGiftNo">No <input type="radio" name="on0" value="wantGiftYes">Yes
<input type="radio" checked="checked" name="on0" value="wantGiftNo">No
</div>
</div> </div>
<div class="supporter-form-input t-shirt-size-selector"> <div class="supporter-form-input t-shirt-size-selector">
<label for="tShirtSize">T-shirt size: </label> <label for="tShirtSize">T-shirt size: </label>
<select name="os0"> <div class="input-group">
<option value="MenS">Men's S</option> <select name="os0">
<option value="MenM">Men's M</option> <option value="MenS">Men's S</option>
<option value="MenL">Men's L</option> <option value="MenM">Men's M</option>
<option value="MenXL">Men's XL</option> <option value="MenL">Men's L</option>
<option value="Men2XL">Men's 2XL</option> <option value="MenXL">Men's XL</option>
<option value="StandardLadiesS">Standard Ladies' S</option> <option value="Men2XL">Men's 2XL</option>
<option value="StandardLadiesM">Standard Ladies' M</option> <option value="StandardLadiesS">Standard Ladies' S</option>
<option value="StandardLadiesL">Standard Ladies' L</option> <option value="StandardLadiesM">Standard Ladies' M</option>
<option value="StandardLadiesXL">Standard Ladies' XL</option> <option value="StandardLadiesL">Standard Ladies' L</option>
<option value="FittedLadiesS">Fitted Ladies' S</option> <option value="StandardLadiesXL">Standard Ladies' XL</option>
<option value="FittedLadiesM">Fitted Ladies' M</option> <option value="FittedLadiesS">Fitted Ladies' S</option>
<option value="FittedLadiesL">Fitted Ladies' L</option> <option value="FittedLadiesM">Fitted Ladies' M</option>
<option value="FittedLadiesXL">Fitted Ladies' XL</option> <option value="FittedLadiesL">Fitted Ladies' L</option>
</select> <option value="FittedLadiesXL">Fitted Ladies' XL</option>
</select>
</div>
</div> </div>
<div class="supporter-form-input"> <div class="supporter-form-input">
<label for="publicAck"> <label for="publicAck">
Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </label> 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 <div class="input-group">
<input type="radio" name="on1" value="publicAckNo">No <input type="radio" checked="checked" name="on1" value="publicAckYes">Yes
<input type="radio" name="on1" value="publicAckNo">No
</div>
</div> </div>
<div class="supporter-form-input"> <div class="supporter-form-input">
<label for="joinList">Join Conservancy's <label for="joinList">Join Conservancy's
Low-Traffic Announcement Email List? </label> Low-Traffic Announcement Email List? </label>
<input type="radio" checked="checked" name="os1" value="joinListYes">Yes <div class="input-group">
<input type="radio" name="os1" value="joinListNo">No <input type="radio" checked="checked" name="os1" value="joinListYes">Yes
<input type="radio" name="os1" value="joinListNo">No
</div>
</div> </div>
</div> </div>