website Changeset - 72027870920f · Conservancy Kallithea

Changeset - 72027870920f

Parent rev.

Child rev.

[Not reviewed]

0 4 0

Brett Smith (brett) - 7 years ago 2017-01-09 21:56:42
brett@sfconservancy.org

supporter: Reorganize form post-input notes.

This makes it easier to keep baseline alignment between labels and their
respective inputs. Declaring `margin-left: 51%;` for the post-input notes
is not exactly what we want, but it's much closer and less troublesome than
dealing with the vertical alignment of labels otherwise.

4 files changed with 8 insertions and 9 deletions:

www/conservancy/static/css/conservancy-bigscreen.css

www/conservancy/static/css/forms.css

www/conservancy/static/js/supporter-page.js

www/conservancy/templates/supporter/form_partial.html

0 comments (0 inline, 0 general)

www/conservancy/static/css/conservancy-bigscreen.css

➞

Show inline comments

@@ ... / @@ -87,27 +87,27 @@ img.blog-right { @@
 #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;
+}
 .supporter-form-input .inline {
     display: inline-block;
 .form-error, .supporter-form-input p {
     margin-left: 51%;
+}

www/conservancy/static/css/forms.css

➞

Show inline comments

@@ ... / @@ -10,50 +10,49 @@ @@
 .supporter-form-input label {
     display: inline-block;
     font-weight: bold;
     white-space: normal;
+}
 .supporter-form-input input[name=amount],
 .supporter-form-input input[name=a3] {
     width: 5em;
+}
 .supporter-form-input input[type=radio] {
     margin-left: 1em;
     margin-right: .2em;
+}
 .supporter-form-input input[type=radio]:first-of-type {
     margin-left: 0;
+}
 .supporter-form-submit {
     text-align: center;
+}
 .form-error, .supporter-form-input .input-group p {
     margin-left: 1em;
 .form-error, .supporter-form-input p {
     font-size: 80%;
     white-space: normal;
+}
 .form-error {
     color: red;
+}
 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;
+}
 h1.appeal {
     margin-top: -.75em;

www/conservancy/static/js/supporter-page.js

➞

Show inline comments

@@ ... / @@ -30,49 +30,49 @@ var supportTypeSelector = function(supportTypeHash) { @@
 var $window = $(window);
 $window.load(function() {
     /* We've sometimes published links that say #renew instead of #renewal.
        Rewrite that to work as intended. */
     if (window.location.hash === "#renew") {
         window.location.hash = "#renewal";
+    }
     var $selectorLink = supportTypeSelector(window.location.hash);
     if ($selectorLink.length > 0) {
         $window.scrollTop($selectorLink.offset().top);
+    }
 });
 $(document).ready(function() {
     // Forms start in "invalid" form, with the errors shown, so that
     // non-Javascript users see the errors by default and know what they must
     // enter.  Now we hide those for JavaScript users:
     var $formCorrectionNeeded = $('#form-correction-needed');
     $formCorrectionNeeded.addClass('hidden');
     $('form.supporter-form').each(function(index, form) {
         var $amountInput = $('input[type=number]', form).first();
-        var $amountError = $('.form-error', $amountInput[0].parentNode);
+        var $amountError = $('.form-error', $amountInput.parents('.supporter-form-input'));
         $amountError.on(NEW_AMOUNT_EVENT, function(event, amountData) {
             var isValid = amountData.newAmount >= amountData.minAmount;
             if (amountData.oldAmount === undefined) {
                 if (isValid) {
                     $amountError.addClass('hidden');
                 } else {
                     flipClass($amountInput[0], 'valid', 'invalid');
                     $amountError.removeClass('hidden');
+                }
             } else if (isValid) {
                 flipClass($amountInput[0], 'invalid', 'valid');
                 $amountError.fadeOut();
             } else if (amountData.oldAmount >= amountData.minAmount) {
                 flipClass($amountInput[0], 'valid', 'invalid');
                 $amountError.fadeIn();
+            }
         });
         $amountInput.on('input', function(event) {
             event.target.classList.remove('invalid');
         }).on('focusout', function(event) {
             var amountInput = event.target;
             var amountData = buildAmountData(amountInput);

www/conservancy/templates/supporter/form_partial.html

➞

Show inline comments

@@ ... / @@ -59,94 +59,94 @@ This partial accepts these optional parameters: @@
       <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>
         <div class="input-group">
         $ <input type="number" name="a3" size="5" tabindex="10"
                min="{{ min_amt }}" value="{{ default_amt }}">
         {% else %}
         <input type="hidden" name="cmd" value="_xclick">
         <label for="amount">Amount: </label>
         <div class="input-group">
         $ <input type="number" name="amount" size="5" tabindex="10"
                min="{{ min_amt }}" value="{{ default_amt }}">
         {% endif %}
         <p class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
           Conservancy Supporters.
           <a href="/donate">Donate smaller amounts here</a>.</p>
         </div>
       <p class="form-error">${{ min_amt|add:partial_amt }} is a minimum for
         Conservancy Supporters.
         <a href="/donate">Donate smaller amounts here</a>.</p>
       </div>
       <div class="supporter-form-input">
         <label for="on0">Do you want to receive
           {% if form_id == "renewal" %}
           another
           {% else %}
+          a
           {% endif %}
           shirt? </label>
         <div class="input-group">
           <input type="radio" tabindex="20" name="on0" value="wantGiftYes">Yes
           <input type="radio" tabindex="20" checked="checked" name="on0" value="wantGiftNo">No
         </div>
       </div>
       <div class="supporter-form-input t-shirt-size-selector">
         <label for="os0">Shirt size: </label>
         <div class="input-group">
           <select name="os0" tabindex="30">
             <optgroup label="Men's Tees">
               <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>
             </optgroup>
             <optgroup label="Women's Standard Tees">
               <option value="StandardLadiesS">Standard Women's S</option>
               <option value="StandardLadiesM">Standard Women's M</option>
               <option value="StandardLadiesL">Standard Women's L</option>
               <option value="StandardLadiesXL">Standard Women's XL</option>
             </optgroup>
             <optgroup label="Women's Fitted Tees">
               <option value="FittedLadiesS">Fitted Women's S</option>
               <option value="FittedLadiesM">Fitted Women's M</option>
               <option value="FittedLadiesL">Fitted Women's L</option>
               <option value="FittedLadiesXL">Fitted Women's XL</option>
             </optgroup>
           </select>
           <p class="inline"><a href="https://gildanonline.com/sizechart" target="_blank" title="T-shirt size chart">Size information</a></p>
         </div>
         <p><a href="https://gildanonline.com/sizechart" target="_blank" title="T-shirt size chart">Size information</a></p>
       </div>
       <div class="supporter-form-input">
         <label for="publicAck">
           Should we add you to the <a href="/sponsors#supporters" target="_blank">Conservancy Supporters list</a>? </label>
         <div class="input-group">
           <input type="radio" tabindex="40" checked="checked" name="on1" value="publicAckYes">Yes
           <input type="radio" tabindex="40" name="on1" value="publicAckNo">No
         </div>
       </div>
       <div class="supporter-form-input">
         <label for="joinList">Join Conservancy's
           low-traffic announcement list? </label>
         <div class="input-group">
           <input type="radio" tabindex="50" checked="checked" name="os1" value="joinListYes">Yes
           <input type="radio" tabindex="50" name="os1" value="joinListNo">No
         </div>
       </div>
     </div>
     <div class="supporter-form-submit">
       <input type="image" name="submit" tabindex="60"
              src="/img/supporter-payment-button-{{ form_id }}.png"

0 comments (0 inline, 0 general)