From 844c1c94f379682cdf3c494c68790406b2503fed Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 7 Jan 2019 13:48:55 +0000
Subject: [PATCH] Bug 21089: Overlapping elements in ordering information on
 acqui/supplier.pl

This patch changes the HTML structure of the vendor edit page so that
the markup is a little simpler. CSS is modified to match. This structure
should serve as a model for other similar form structures:

 <fieldset class="rows">
     <ol>
         <li>
             <label>General label:</label>
             <label class="radio">
                 Specific label 1 <input type="radio" />
             </label>
             <label class="radio">
                 Specific label 2 <input type="radio" />
             </label>
         </li>
     </ol>
 </fieldset>

To test, apply the patch and regenerate the staff client CSS.

 - Go to Acquisitions -> Vendor search -> Vendor -> Edit vendor
 - In the "Ordering information" section, confirm that the position of
   radio buttons looks correct.
 - Confirm that radio button labels work correctly.
 - Confirm that the adjacent dropdown menus work well.
---
 .../intranet-tmpl/prog/css/src/staff-global.scss   |   7 ++
 .../prog/en/modules/acqui/supplier.tt              | 110 +++++++++++++--------
 2 files changed, 75 insertions(+), 42 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 2bd4df8..e3705d9 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -1049,6 +1049,13 @@ fieldset {
                 margin-left: 1em;
             }
 
+            &.radio {
+                display: inline-block;
+                margin: 0 1em 0 0;
+                padding: 0;
+                width: auto;
+            }
+
             &.yesno {
                 float: none;
                 width: auto;
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt
index c6db192..4ceed6a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/supplier.tt
@@ -159,16 +159,22 @@
 
         <fieldset class="rows">
             <legend>Ordering information</legend>
-            <ol class="radio"><li><label for="activestatus" class="radio">Vendor is:</label>
+            <ol><li><label for="activestatus">Vendor is:</label>
                     [% IF ( active ) %]
-                        <label for="activestatus">Active</label> <input type="radio" id="activestatus" name="status" value="1" checked="checked" />
-                        <label for="inactivestatus">Inactive</label> <input type="radio" id="inactivestatus" name="status" value="0" />
+                        <label class="radio" for="activestatus">
+                            Active <input type="radio" id="activestatus" name="status" value="1" checked="checked" />
+                        </label>
+                        <label class="radio" for="inactivestatus">
+                            Inactive <input type="radio" id="inactivestatus" name="status" value="0" />
+                        </label>
                     [% ELSE %]
-                        <label for="activestatus">Active</label> <input type="radio" id="activestatus" name="status" value="1" />
-                        <label for="inactivestatus">Inactive</label> <input type="radio" id="inactivestatus" name="status" value="0" checked="checked" />
+                        <label class="radio" for="activestatus">
+                            Active <input type="radio" id="activestatus" name="status" value="1" />
+                        </label>
+                        <label class="radio" for="inactivestatus">
+                            Inactive <input type="radio" id="inactivestatus" name="status" value="0" checked="checked" />
+                        </label>
                     [% END %]</li>
-            </ol>
-            <ol>
             <li><label for="list_currency">List prices are: </label>
                 <select name="list_currency" id="list_currency">
                     [% FOREACH c IN currencies %]
@@ -191,54 +197,73 @@
                     [% END %]
                 </select>
             </li>
-            </ol>
-            <ol class="radio">
-            <li><label for="gstyes" class="radio">Tax number registered:</label>
+            <li><label for="gstyes">Tax number registered:</label>
                 [% IF ( gstreg ) %]
-                    <label for="gstyes">Yes</label> <input type="radio" name="gst" id="gstyes" value="1" checked="checked" />
-                    <label for="gstno">No</label> <input type="radio" name="gst" id="gstno" value="0" />
+                    <label class="radio" for="gstyes">
+                        Yes <input type="radio" name="gst" id="gstyes" value="1" checked="checked" />
+                    </label>
+                    <label class="radio" for="gstno">
+                        No <input type="radio" name="gst" id="gstno" value="0" />
+                    </label>
                 [% ELSE %]
-                    <label for="gstyes">Yes</label> <input type="radio" name="gst" id="gstyes" value="1" />
-                    <label for="gstno">No</label> <input type="radio" name="gst" id="gstno" value="0" checked="checked" />
+                    <label class="radio" for="gstyes">
+                        Yes <input type="radio" name="gst" id="gstyes" value="1" />
+                    </label>
+                    <label class="radio" for="gstno">
+                        No <input type="radio" name="gst" id="gstno" value="0" checked="checked" />
+                    </label>
                 [% END %]</li>
-            
-            <li><label for="list_gstyes" class="radio">List prices:</label>
+
+            <li><label for="list_gstyes">List prices:</label>
                 [% IF ( listincgst ) %]
-                    <label for="list_gstyes">Include tax</label> <input type="radio" id="list_gstyes" name="list_gst" value="1" checked="checked" />
-                    <label for="list_gstno">Don't include tax</label> <input type="radio" id="list_gstno" name="list_gst" value="0" />
+                    <label class="radio" for="list_gstyes">
+                        Include tax <input type="radio" id="list_gstyes" name="list_gst" value="1" checked="checked" />
+                    </label>
+                    <label class="radio" for="list_gstno">
+                        Don't include tax <input type="radio" id="list_gstno" name="list_gst" value="0" />
+                    </label>
                 [% ELSE %]
-                    <label for="list_gstyes">Include tax</label> <input type="radio" id="list_gstyes" name="list_gst" value="1" />
-                    <label for="list_gstno">Don't include tax</label> <input type="radio" id="list_gstno" name="list_gst" value="0" checked="checked" />
+                    <label class="radio" for="list_gstyes">
+                        Include tax <input type="radio" id="list_gstyes" name="list_gst" value="1" />
+                    </label>
+                    <label class="radio" for="list_gstno">
+                        Don't include tax <input type="radio" id="list_gstno" name="list_gst" value="0" checked="checked" />
+                    </label>
                 [% END %]</li>
-            
-            <li><label for="invoice_gstyes" class="radio">Invoice prices:</label>
+
+            <li><label for="invoice_gstyes">Invoice prices:</label>
                 [% IF ( invoiceincgst ) %]
-                    <label for="invoice_gstyes">Include tax</label> <input type="radio" id="invoice_gstyes" name="invoice_gst" value="1" checked="checked" />
-                    <label for="invoice_gstno">Don't include tax</label> <input type="radio" id="invoice_gstno" name="invoice_gst" value="0" />
+                    <label class="radio" for="invoice_gstyes">
+                        Include tax <input type="radio" id="invoice_gstyes" name="invoice_gst" value="1" checked="checked" />
+                    </label>
+                    <label class="radio" for="invoice_gstno">
+                        Don't include tax <input type="radio" id="invoice_gstno" name="invoice_gst" value="0" />
+                    </label>
                     [% ELSE %]
-                    <label for="invoice_gstyes">Include tax</label> <input type="radio" id="invoice_gstyes" name="invoice_gst" value="1" />
-                    <label for="invoice_gstno">Don't include tax</label> <input type="radio" id="invoice_gstno" name="invoice_gst" value="0" checked="checked" />
+                    <label class="radio" for="invoice_gstyes">
+                        Include tax <input type="radio" id="invoice_gstyes" name="invoice_gst" value="1" />
+                    </label>
+                    <label class="radio" for="invoice_gstno">
+                        Don't include tax <input type="radio" id="invoice_gstno" name="invoice_gst" value="0" checked="checked" />
+                    </label>
                 [% END %]</li>
-            </ol>
+
             [% IF gst_values %]
-                <ol>
-                  <li>
-                    <label for="tax_rate">Tax rate: </label>
-                    <select name="tax_rate" id="tax_rate">
-                    [% FOREACH gst IN gst_values %]
-                      [% IF ( tax_rate == gst.option ) %]
-                        <option value="[% gst.option | html %]" selected="selected">[% gst.option * 100 | html %] %</option>
-                      [% ELSE %]
-                        <option value="[% gst.option | html %]">[% gst.option * 100 | html %] %</option>
-                      [% END %]
+                <li>
+                  <label for="tax_rate">Tax rate: </label>
+                  <select name="tax_rate" id="tax_rate">
+                  [% FOREACH gst IN gst_values %]
+                    [% IF ( tax_rate == gst.option ) %]
+                      <option value="[% gst.option | html %]" selected="selected">[% gst.option * 100 | html %] %</option>
+                    [% ELSE %]
+                      <option value="[% gst.option | html %]">[% gst.option * 100 | html %] %</option>
                     [% END %]
-                    </select>
-                  </li>
-                </ol>
+                  [% END %]
+                  </select>
+                </li>
             [% ELSE %]
                 <input type="hidden" name="tax_rate" value="0" />
             [% END %]
-            <ol>
             <li><label for="discount">Discount: </label>
                 <input type="text" size="6" id="discount" name="discount" value="[% discount | format ("%.1f") %]" />%</li>
             <li>
@@ -246,7 +271,8 @@
                 <input type="text" size="2" id="deliverytime" name="deliverytime" value="[% deliverytime | html %]" /> days
             </li>
             <li><label for="notes">Notes: </label>
-                <textarea cols="40" rows="4" id="notes" name="notes" >[% notes | html %]</textarea></li></ol>
+                <textarea cols="40" rows="4" id="notes" name="notes" >[% notes | html %]</textarea></li>
+            </ol>
         </fieldset>
         <fieldset class="action"><input type="submit" value="Save" /> [% IF ( booksellerid ) %]
         <a class="cancel" href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% booksellerid | html %]">[% ELSE %]<a class="cancel" href="/cgi-bin/koha/acqui/acqui-home.pl">
-- 
2.1.4