Changeset - 8605b65783f9
[Not reviewed]
0 3 0
Brett Smith (brett) - 5 years ago 2017-01-01 18:53:41
brett@sfconservancy.org
supporter: Move more presentation rules to CSS.

This commit keeps the presentation basically the same, it just moves
presentation rules out of HTML and into CSS. It's not pixel-perfect but
pretty close.
3 files changed with 56 insertions and 39 deletions:
0 comments (0 inline, 0 general)
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;
 
}
 
.dinner-form label {
 
    display: inline-block;
 
    width: 200px;
 
    text-align: right;
 
}
...
 
@@ -14,24 +19,20 @@
 
.dinner-form-inputs {
 
    float: left;
 
}
 
.supporter-form-submit {
 
    padding-left: 20em;
 
    padding-top: 40px;
 
    float: center;
 
    font-size: small;
 
}
 
.dinner-form-submit {
 
    padding-left: 20em;
 
    padding-top: 40px;
 
    float: center;
 
}
 

	
 
.supporter-form div {
 
    margin-top: 1em;
 
}
 

	
 
.dinner-form div {
 
    margin-top: 1em;
 
}
 

	
 
.form-error {
 
    color: red;
www/conservancy/static/js/conservancy.js
Show inline comments
...
 
@@ -85,19 +85,19 @@ $(document).ready(function() {
 
                                  .css({'font-weight': 'bold', 'font-size' : '110%' });
 
                                  $otherTextControl.find('.donate-box-highlight').fadeIn(10000);
 
                                }, 500);
 
    });
 
    $(".t-shirt-size-selector").hide();
 
    $('input[name=on0]:radio').change(function() {
 
        var input=$(this);
 
        var tShirtSelector = input.parent().children('.t-shirt-size-selector')
 
        var noShippingSelector = input.parent().children('input[name=no_shipping]');
 
        var value = input.val();
 
        if (value == "wantGiftYes") {
 
            tShirtSelector.show();
 
            noShippingSelector.val("2");
 
        var $input = $(this);
 
        var $form = $input.parents('form').last();
 
        var $tShirtSelector = $('.t-shirt-size-selector', $form);
 
        var $noShippingSelector = $('input[name=no_shipping]', $form);
 
        if ($input.val() == "wantGiftYes") {
 
            $tShirtSelector.show();
 
            $noShippingSelector.val("2");
 
        } else {
 
            tShirtSelector.hide();
 
            noShippingSelector.val("0");
 
            $tShirtSelector.hide();
 
            $noShippingSelector.val("0");
 
        }
 
    });
 
});
www/conservancy/templates/supporter/form_partial.html
Show inline comments
...
 
@@ -27,74 +27,82 @@ This partial accepts these optional parameters:
 
{% endcomment %}
 

	
 
{% with supptype=supptype|default:form_id article=article|default:"a" verb=verb|default:"join" default_amt=default_amt|default:min_amt partial_amt=partial_amt|default:0 %}
 
<div id="{{ form_id }}" class="supporter-type-selection">
 
  <h3>{{ verb|capfirst }} as {{ article }} {{ supptype|capfirst }} Supporter</h3>
 

	
 
  <p class="prolog"><span>Note:</span>
 
    {% if form_id == "annual" %}
 
  <p><strong>Note:</strong> annual supporter is not an automatic renewal
 
    annual supporter is not an automatic renewal
 
    relationship.  If you join today, you'll receive an email in about one
 
    year to remind you to optionally renew.</p>
 
    year to remind you to optionally renew.
 
    {% elif form_id == "monthly" %}
 
  <p>Monthly renewal is automatic.  Also, monthly supporters might not
 
    Monthly renewal is automatic.  Also, monthly supporters might not
 
    receive tangible Supporter benefits (such as the t-shirt) until they've
 
    reached at least
 
    {# Six months of payments #}
 
    ${{ min_amt|add:min_amt|add:min_amt|add:min_amt|add:min_amt|add:min_amt }}
 
    in monthly supporter donations.
 
    However, they will be included immediately in
 
    the <a href="/sponsors/#supporters">Supporters' list</a>.</p>
 
    the <a href="/sponsors/#supporters">Supporters' list</a>.
 
    {% elif form_id == "renewal" %}
 
  <p><strong>Note:</strong> This option is for existing annual supporters
 
    This option is for existing annual supporters
 
    who seek to renew for another year.  The annual renewal is not
 
    automatic; annual supporters are emailed each year to invite them to
 
    optionally renew.</p>
 
    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"><strong>Monthly Amount:</strong> $</label>
 
        <label for="a3">Monthly Amount: $</label>
 
        <input type="number" name="a3" size="5"
 
               min="{{ min_amt }}" value="{{ default_amt }}">
 
        {% else %}
 
        <input type="hidden" name="cmd" value="_xclick">
 
      <label for="amount"><strong>Amount:</strong> $</label>
 
        <label for="amount">Amount: $</label>
 
        <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
 
          Conservancy Supporters.
 
        <a href="/donate">Donate smaller amounts here</a>.</span><br>
 
      <label for="wantGift"><strong>Do you want to receive
 
          <a href="/donate">Donate smaller amounts here</a>.</span>
 
      </div>
 

	
 
      <div class="supporter-form-input">
 
        <label for="wantGift">Do you want to receive
 
          {% if form_id == "renewal" %}
 
          another
 
          {% else %}
 
          a
 
          {% endif %}
 
          t-shirt? </strong></label>
 
          t-shirt? </label>
 
        <input type="radio" name="on0" value="wantGiftYes">Yes
 
        <input type="radio" checked="checked" name="on0" value="wantGiftNo">No
 
      <br>
 
      <span class="t-shirt-size-selector">
 
        <label for="tShirtSize"><strong>T-shirt size: </strong></label>
 
      </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>
...
 
@@ -103,28 +111,36 @@ This partial accepts these optional parameters:
 
          <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><br></span>
 
      <label for="publicAck"><strong>
 
          Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>
 
        </select>
 
      </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<br>
 
      <label for="joinList"><strong>Join Conservancy's
 
          Low-Traffic Announcement Email List? </strong></label>
 
        <input type="radio" name="on1" value="publicAckNo">No
 
      </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<br>
 
      <br></div>
 
    <div>
 
        <input type="radio" name="os1" value="joinListNo">No
 
      </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!">
 
      <br><br><small>Button above redirects to PayPal's site for credit
 
      <p>Button above redirects to PayPal's site for credit
 
        card, bank account or PayPal balance payment methods.  Select
 
        options first.</small>
 
        options first.</p>
 
    </div>
 
  </form>
 
</div>
 
{% endwith %}
0 comments (0 inline, 0 general)