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