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
...
 
@@ -71,24 +71,39 @@ img.blog-right {
 
    padding-left: 1em;
 
    margin: .25em;
 
    min-width: 8%;
 
    max-width: 30%;
 
    width: auto;
 
}
 

	
 
#contractpatch-follow {
 
    float: left;
 
    width: 30em;
 
    margin-right: 1.5em;
 
    /* Below from .shaded, but we don't want the class on non-big screens. */
 
    padding: .75em;
 
    background: #F0FFB8;
 
}
 

	
 
#contractpatch-follow h2 {
 
    font-size: large;
 
}
 

	
 
#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%;
 
    height: auto;
 
}
 

	
 
img.appeal-right {
 
    float: right;
 
    padding-left: 1em;
 
    margin: .25em;
 
    min-width: 8%;
 
    max-width: 30%;
 
    width: auto;
 
}
 

	
 
img.appeal {
 
    float: left;
 
    padding-right: 1em;
 
    min-width: 10%;
 
    max-width: 85%;
 
    width: auto;
www/conservancy/templates/supporter/form_partial.html
Show inline comments
...
 
@@ -51,96 +51,107 @@ This partial accepts these optional parameters:
 
    optionally renew.
 
    {% endif %}
 
  </p>
 

	
 
  <form class="supporter-form" method="post" target="_top"
 
        action="https://www.paypal.com/cgi-bin/webscr"
 
        data-upgrade-from-amount="{{ partial_amt }}">
 
    <div class="supporter-form-inputs">
 
      <input type="hidden" name="business" value="supporter@sfconservancy.org">
 
      <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html">
 
      <input type="hidden" name="no_shipping" value="0">
 
      <input type="hidden" name="item_name"
 
             value="Conservancy Supporter, {{ supptype|capfirst }}{% if form_id == "renewal" %} Renewal{% endif %}"
 
             >
 

	
 
      <div class="supporter-form-input">
 
        {% if form_id == "monthly" %}
 
        <input type="hidden" name="cmd" value="_xclick-subscriptions">
 
        <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>
 
        <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>
 

	
 
    <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!">
 
      <p>Button above redirects to PayPal's site for credit
 
        card, bank account or PayPal balance payment methods.  Select
 
        options first.</p>
 
    </div>
 
  </form>
 
</div>
 
{% endwith %}
0 comments (0 inline, 0 general)