supporter: New form styling.
This makes better use of bigger screens, and degrades better to smaller ones.
This commit is contained in:
Brett Smith
parent
8605b65783
commit
b93cc61e8b
3 changed files with 81 additions and 64 deletions
|
|
@ -92,3 +92,18 @@ img.blog-right {
|
|||
/* Don't let the first blog headline clear below #contractpatch-follow. */
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,42 +2,40 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.supporter-form label {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
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;
|
||||
.supporter-form-input {
|
||||
margin-bottom: .5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dinner-form div {
|
||||
margin-top: 1em;
|
||||
.supporter-form-input label {
|
||||
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 {
|
||||
color: red;
|
||||
margin-left: 10px;
|
||||
font-size: 75%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
input.invalid, textarea.invalid {
|
||||
|
|
@ -49,22 +47,15 @@ input.valid, textarea.valid {
|
|||
}
|
||||
|
||||
.supporter-type-selector {
|
||||
clear: both;
|
||||
font-size: 125%;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
align: left;
|
||||
}
|
||||
|
||||
.supporter-type-selection {
|
||||
clear: both;
|
||||
padding-bottom: 60px;
|
||||
width: 80%;
|
||||
align: left;
|
||||
}
|
||||
|
||||
h1.appeal {
|
||||
margin-top: -.75em;
|
||||
}
|
||||
|
||||
img.appeal-left {
|
||||
float: left;
|
||||
padding-right: 1em;
|
||||
|
|
|
|||
|
|
@ -72,18 +72,21 @@ This partial accepts these optional parameters:
|
|||
<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"
|
||||
<label for="a3">Monthly Amount: </label>
|
||||
<div class="input-group">
|
||||
$ <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"
|
||||
<label for="amount">Amount: </label>
|
||||
<div class="input-group">
|
||||
$ <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
|
||||
<p class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
|
||||
Conservancy Supporters.
|
||||
<a href="/donate">Donate smaller amounts here</a>.</span>
|
||||
<a href="/donate">Donate smaller amounts here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="supporter-form-input">
|
||||
|
|
@ -94,41 +97,49 @@ This partial accepts these optional parameters:
|
|||
a
|
||||
{% endif %}
|
||||
t-shirt? </label>
|
||||
<input type="radio" name="on0" value="wantGiftYes">Yes
|
||||
<input type="radio" checked="checked" name="on0" value="wantGiftNo">No
|
||||
<div class="input-group">
|
||||
<input type="radio" name="on0" value="wantGiftYes">Yes
|
||||
<input type="radio" checked="checked" name="on0" value="wantGiftNo">No
|
||||
</div>
|
||||
</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>
|
||||
<option value="MenL">Men's L</option>
|
||||
<option value="MenXL">Men's XL</option>
|
||||
<option value="Men2XL">Men's 2XL</option>
|
||||
<option value="StandardLadiesS">Standard Ladies' S</option>
|
||||
<option value="StandardLadiesM">Standard Ladies' M</option>
|
||||
<option value="StandardLadiesL">Standard Ladies' L</option>
|
||||
<option value="StandardLadiesXL">Standard Ladies' XL</option>
|
||||
<option value="FittedLadiesS">Fitted Ladies' S</option>
|
||||
<option value="FittedLadiesM">Fitted Ladies' M</option>
|
||||
<option value="FittedLadiesL">Fitted Ladies' L</option>
|
||||
<option value="FittedLadiesXL">Fitted Ladies' XL</option>
|
||||
</select>
|
||||
<div class="input-group">
|
||||
<select name="os0">
|
||||
<option value="MenS">Men's S</option>
|
||||
<option value="MenM">Men's M</option>
|
||||
<option value="MenL">Men's L</option>
|
||||
<option value="MenXL">Men's XL</option>
|
||||
<option value="Men2XL">Men's 2XL</option>
|
||||
<option value="StandardLadiesS">Standard Ladies' S</option>
|
||||
<option value="StandardLadiesM">Standard Ladies' M</option>
|
||||
<option value="StandardLadiesL">Standard Ladies' L</option>
|
||||
<option value="StandardLadiesXL">Standard Ladies' XL</option>
|
||||
<option value="FittedLadiesS">Fitted Ladies' S</option>
|
||||
<option value="FittedLadiesM">Fitted Ladies' M</option>
|
||||
<option value="FittedLadiesL">Fitted Ladies' L</option>
|
||||
<option value="FittedLadiesXL">Fitted Ladies' XL</option>
|
||||
</select>
|
||||
</div>
|
||||
</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 class="input-group">
|
||||
<input type="radio" checked="checked" name="on1" value="publicAckYes">Yes
|
||||
<input type="radio" name="on1" value="publicAckNo">No
|
||||
</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 class="input-group">
|
||||
<input type="radio" checked="checked" name="os1" value="joinListYes">Yes
|
||||
<input type="radio" name="os1" value="joinListNo">No
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue