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 6 insertions and 7 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

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

@@ ... / @@ -28,14 +28,13 @@ @@
+}
 .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;

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

➞

Show inline comments

@@ ... / @@ -48,13 +48,13 @@ $(document).ready(function() { @@
     // 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');

www/conservancy/templates/supporter/form_partial.html

➞

Show inline comments

@@ ... / @@ -77,17 +77,17 @@ This partial accepts these optional parameters: @@
         <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 %}
         </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>
       <div class="supporter-form-input">
         <label for="on0">Do you want to receive
           {% if form_id == "renewal" %}
           another
           {% else %}
@@ ... / @@ -121,14 +121,14 @@ This partial accepts these optional parameters: @@
               <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">

0 comments (0 inline, 0 general)