Changeset - 8605b65783f9
[Not reviewed]
0 3 0
Brett Smith (brett) - 7 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 81 insertions and 64 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;
 
}
 
.supporter-form-inputs {
 
    float: left;
 
}
 
.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;
 
    margin-left: 10px;
 
    font-size: 75%;
 
}
 

	
 
input.invalid, textarea.invalid {
 
    border: 2px solid red;
www/conservancy/static/js/conservancy.js
Show inline comments
...
 
@@ -79,25 +79,25 @@ $(document).ready(function() {
 
                                $control.toggleClass('expanded');
 
                                $control.find('.toggle-content').slideDown(800).fadeOut(10);
 
                                $otherTextControl.find('.donate-box-highlight').fadeOut(100);
 
                              }, 300);
 
          setTimeout(function() { $control.find('.toggle-content').fadeIn(2000);
 
                                  $otherTextControl.find('.donate-box-highlight')
 
                                  .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
...
 
@@ -21,110 +21,126 @@ This partial accepts these optional parameters:
 
* `default_amt`: The amount of support the form loads with.
 
  Default `min_amt`.
 
* `partial_amt`: This form is for a donor who previously gave `partial_amt`,
 
  and is letting them contribute `min_amt` more to get up the usual
 
  Supporter amount.  This is attached to the form as a data attribute.
 

	
 
{% 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>
 

	
 
  {% if form_id == "annual" %}
 
  <p><strong>Note:</strong> annual supporter is not an automatic renewal
 
  <p class="prolog"><span>Note:</span>
 
    {% if form_id == "annual" %}
 
    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>
 
  {% elif form_id == "monthly" %}
 
  <p>Monthly renewal is automatic.  Also, monthly supporters might not
 
    year to remind you to optionally renew.
 
    {% elif form_id == "monthly" %}
 
    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>
 
  {% elif form_id == "renewal" %}
 
  <p><strong>Note:</strong> This option is for existing annual supporters
 
    the <a href="/sponsors/#supporters">Supporters' list</a>.
 
    {% elif form_id == "renewal" %}
 
    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>
 
  {% endif %}
 
    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 %}"
 
             >
 
      {% 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>
 
      <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>
 
      <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
 

	
 
      <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"
 
               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"
 
               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>
 
      </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>
 
      <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>
 
          t-shirt? </label>
 
        <input type="radio" name="on0" value="wantGiftYes">Yes
 
        <input type="radio" checked="checked" name="on0" value="wantGiftNo">No
 
      </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><br></span>
 
      <label for="publicAck"><strong>
 
          Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></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" checked="checked" name="os1" value="joinListYes">Yes
 
      <input type="radio" name="os1" value="joinListNo">No<br>
 
      <br></div>
 
    <div>
 
        </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
 
      </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>
 
    </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)