Changeset - b93cc61e8b33
[Not reviewed]
0 3 0
Brett Smith (brett) - 7 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 76 insertions and 59 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy-bigscreen.css
Show inline comments
...
 
@@ -94 +94,16 @@ img.blog-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
...
 
@@ -4,32 +4,29 @@
 

	
 
.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;
 
}
...
 
@@ -40,2 +37,3 @@
 
    font-size: 75%;
 
    white-space: normal;
 
}
...
 
@@ -51,13 +49,5 @@ 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;
 
}
...
 
@@ -67,2 +57,3 @@ h1.appeal {
 
}
 

	
 
img.appeal-left {
www/conservancy/templates/supporter/form_partial.html
Show inline comments
...
 
@@ -74,4 +74,5 @@ This partial accepts these optional parameters:
 
        <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 }}">
...
 
@@ -79,9 +80,11 @@ This partial accepts these optional parameters:
 
        <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>
...
 
@@ -96,4 +99,6 @@ This partial accepts these optional parameters:
 
          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>
...
 
@@ -102,17 +107,19 @@ This partial accepts these optional parameters:
 
        <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>
...
 
@@ -122,4 +129,6 @@ This partial accepts these optional parameters:
 
          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>
...
 
@@ -129,4 +138,6 @@ This partial accepts these optional parameters:
 
          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>
0 comments (0 inline, 0 general)