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

@@ ... / @@ -99,15 +99,15 @@ img.blog-right { @@
 .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

@@ ... / @@ -22,26 +22,25 @@ @@
     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;
+}

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

➞

Show inline comments

@@ ... / @@ -42,25 +42,25 @@ $window.load(function() { @@
+    }
 });
 $(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');

www/conservancy/templates/supporter/form_partial.html

➞

Show inline comments

@@ ... / @@ -71,28 +71,28 @@ This partial accepts these optional parameters: @@
         <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
@@ ... / @@ -115,26 +115,26 @@ This partial accepts these optional parameters: @@
               <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">

0 comments (0 inline, 0 general)