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. */
|
/* 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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue