Changeset - b93cc61e8b33
[Not reviewed]
0 3 0
Brett Smith (brett) - 5 years ago 2017-01-01 20:10:20
brett@sfconservancy.org
supporter: New form styling.

This makes better use of bigger screens, and degrades better to smaller
ones.
3 files changed with 55 insertions and 38 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy-bigscreen.css
Show inline comments
...
 
@@ -89,6 +89,21 @@ img.blog-right {
 
}
 

	
 
#contractpatch-blog h3:first-child {
 
    /* 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;
 
}
www/conservancy/static/css/forms.css
Show inline comments
 
.supporter-type-selection .prolog > span:first-child {
 
    font-weight: bold;
 
}
 

	
 
.supporter-form label {
 
    display: inline-block;
 
    width: 200px;
 
    text-align: right;
 
    font-weight: bold;
 
.supporter-form-input {
 
    margin-bottom: .5em;
 
    white-space: nowrap;
 
}
 
.dinner-form label {
 

	
 
.supporter-form-input label {
 
    display: inline-block;
 
    width: 200px;
 
    text-align: right;
 
}
 
.supporter-form-inputs {
 
    float: left;
 
    font-weight: bold;
 
    white-space: normal;
 
}
 
.dinner-form-inputs {
 
    float: left;
 

	
 
.supporter-form-input input[name=amount],
 
.supporter-form-input input[name=a3] {
 
    width: 5em;
 
}
 
.supporter-form-submit {
 
    padding-left: 20em;
 
    padding-top: 40px;
 
    font-size: small;
 

	
 
.supporter-form-input input[type=radio] {
 
    margin-left: 1em;
 
    margin-right: .2em;
 
}
 
.dinner-form-submit {
 
    padding-left: 20em;
 
    padding-top: 40px;
 
    float: center;
 

	
 
.supporter-form-input input[type=radio]:first-of-type {
 
    margin-left: 0;
 
}
 

	
 
.dinner-form div {
 
    margin-top: 1em;
 
.supporter-form-submit {
 
    text-align: center;
 
}
 

	
 
.form-error {
 
    color: red;
 
    margin-left: 10px;
 
    font-size: 75%;
 
    white-space: normal;
 
}
 

	
 
input.invalid, textarea.invalid {
 
    border: 2px solid red;
 
}
 

	
 
input.valid, textarea.valid {
 
    border: 2px solid green;
 
}
 

	
 
.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;
 
    margin: .25em;
 
    min-width: 8%;
 
    max-width: 30%;
www/conservancy/templates/supporter/form_partial.html
Show inline comments
...
 
@@ -69,40 +69,46 @@ This partial accepts these optional parameters:
 
        <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"
 
        <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">
 
        <label for="wantGift">Do you want to receive
 
          {% if form_id == "renewal" %}
 
          another
 
          {% else %}
 
          a
 
          {% endif %}
 
          t-shirt? </label>
 
        <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>
 
        <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>
...
 
@@ -113,27 +119,32 @@ This partial accepts these optional parameters:
 
            <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>
 
        <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>
 
        <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>
 

	
 
    <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!">
0 comments (0 inline, 0 general)