Bug 32109: Fix spacing in toolbars containing text links
authorOwen Leonard <oleonard@myacpl.org>
Fri, 4 Nov 2022 11:42:47 +0000 (11:42 +0000)
committerTomas Cohen Arazi <tomascohen@theke.io>
Wed, 16 Nov 2022 18:51:58 +0000 (15:51 -0300)
This patch adds a new class to toolbars in certain contexts: Where the
toolbar contains only text links (as opposed to Bootstrap-styled
controls). This lets us set some comfortable padding on the links.

To test, apply the patch and rebuild the staff interface CSS.

Test the following pages to confirm that the toolbar of selection links
("Select all," "Clear all," etc.) has legible spacing.

- Cataloging -> Batch item modification -> List of submitted barcodes
- Cataloging -> Batch item deletion -> List of submitted barcodes
- Cataloging -> Batch record modification -> List of submitted records
- Cataloging -> Batch record deletion -> List of submitted records
- Circulation -> Checkout notes
- Tools -> Batch extend due dates -> Preview results
- Tools -> Batch patron modification -> List of submitted patrons
- Tools -> OPAC problem reports

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
koha-tmpl/intranet-tmpl/prog/css/src/_toolbar.scss
koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc
koha-tmpl/intranet-tmpl/prog/en/modules/circ/checkout-notes.tt
koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_delete_records.tt
koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_extend_due_dates.tt
koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
koha-tmpl/intranet-tmpl/prog/en/modules/tools/modborrowers.tt
koha-tmpl/intranet-tmpl/prog/en/modules/tools/problem-reports.tt

index b85c70a..4bf8263 100644 (file)
             font-size: 100%;
         }
     }
+
+    &.selections-toolbar {
+        a {
+            display: inline-block;
+            padding: 0 .5em;
+        }
+    }
 }
index c7ac382..52d645f 100644 (file)
 <div class="page-section">
     [% IF display_columns_selection %][%# Needs js/pages/batchMod.js %]
         [% IF checkboxes_edit OR checkboxes_delete %]
-            <fieldset class="action">
+            <div class="btn-toolbar selections-toolbar">
                 <a id="selectallbutton" href="#"><i class="fa fa-check"></i> Select all</a> | <a id="clearallbutton" href="#"><i class="fa fa-remove"></i> Clear all</a> | <a id="clearonloanbutton" href="#">Clear on loan</a>
-            </fieldset>
+            </div>
         [% END %]
 
         <div id="cataloguing_additem_itemlist">
index d5bd7db..91bd8e6 100644 (file)
                         <button type="submit" class="btn btn-default markseen" name="mark_selected-notseen" value="notseen" disabled="disabled"><i class="fa fa-eye-slash"></i> Mark not seen</button>
                     </div>
 
-                    <fieldset class="action" style="cursor:pointer;">
+                    <div class="btn-toolbar selections-toolbar">
                         <a class="SelectAll"><i class="fa fa-check"></i> Select all</a>
                         | <a class="ClearAll"><i class="fa fa-remove"></i> Clear all</a>
                         | <a class="HideSeen"><i class="fa fa-minus-square"></i> Hide seen</a>
                         | <a class="ShowAll"><i class="fa fa-bars"></i> Show all</a>
-                    </fieldset>
+                    </div>
 
                     <table id="notestable">
                         <thead>
index 9cdef6d..252265f 100644 (file)
   [% ELSIF op == 'list' %]
     [% IF records %]
       [% IF recordtype == 'biblio' %]
-        <div id="toolbar">
+        <div class="btn-toolbar selections-toolbar">
           <a id="selectall" href="#"><i class="fa fa-check"></i> Select all</a>
           | <a id="clearall" href="#"><i class="fa fa-remove"></i> Clear all</a>
           | <a id="selectwithoutitems" href="#">Select without items</a>
           </table>
           <div class="note"><i class="fa fa-exclamation"></i> Reminder: this action will delete all selected bibliographic records, attached subscriptions, existing holds, and attached items!</div>
       [% ELSE %]
-        <div id="toolbar">
+        <div class="btn-toolbar selections-toolbar">
           <a id="selectall" href="#"><i class="fa fa-check"></i> Select all</a>
           | <a id="clearall" href="#"><i class="fa fa-remove"></i> Clear all</a>
           | <a id="clearlinkedtobiblio" href="#">Clear used authorities</a>
index f01d837..92b075e 100644 (file)
                     [% ELSIF view == 'list' %]
                         [% IF checkouts.count %]
                             <form action="/cgi-bin/koha/tools/batch_extend_due_dates.pl" method="post" id="process">
-                                <div id="toolbar">
+                                <div class="btn-toolbar selections-toolbar">
                                     <a id="selectall" href="#"><i class="fa fa-check"></i> Select all</a>
                                     | <a id="clearall" href="#"><i class="fa fa-remove"></i> Clear all</a>
                                 </div>
index d015745..aaf1ab9 100644 (file)
                                     </div>
                                 </div>
                                 [% IF recordtype == 'biblio' %]
-                                    <div id="toolbar">
+                                    <div class="btn-toolbar selections-toolbar">
                                         <a id="selectall" href="#"><i class="fa fa-check"></i> Select all</a>
                                         | <a id="clearall" href="#"><i class="fa fa-remove"></i> Clear all</a>
                                     </div>
                                     </table> <!-- /#biblios -->
                                     <div class="note"><i class="fa fa-exclamation"></i> Reminder: this action will modify all selected biblios!</div>
                                 [% ELSE %]
-                                    <div id="toolbar">
+                                    <div class="btn-toolbar selections-toolbar">
                                         <a id="selectall" href="#"><i class="fa fa-check"></i> Select all</a>
                                         | <a id="clearall" href="#"><i class="fa fa-remove"></i> Clear all</a>
                                     </div>
index 91d3f80..fc666ce 100644 (file)
                     <form name="f" action="modborrowers.pl" method="post">
                         <input type="hidden" name="op" value="do" />
                         [% IF ( borrowers ) %]
-                            <div id="toolbar"><a id="selectallbutton" href="#"><i class="fa fa-check"></i> Select all</a> | <a id="clearallbutton" href="#"><i class="fa fa-remove"></i> Clear all</a></div>
+                            <div class="btn-toolbar selections-toolbar"><a id="selectallbutton" href="#"><i class="fa fa-check"></i> Select all</a> | <a id="clearallbutton" href="#"><i class="fa fa-remove"></i> Clear all</a></div>
                         [% END %]
                     [% END %]
                         [% IF borrowers %]
index 75c1427..25577c6 100644 (file)
                         <button type="submit" class="btn btn-default marknew" name="mark_selected-new" value="new" disabled="disabled"><i class="fa fa-star"></i> Mark new</button>
                     </div>
 
-                    <fieldset class="action" style="cursor:pointer;">
+                    <div class="btn-toolbar selections-toolbar">
                         <a class="SelectAll"><i class="fa fa-check"></i> Select all</a>
                         | <a class="ClearAll"><i class="fa fa-remove"></i> Clear all</a>
                         | <a class="HideViewed"><i class="fa fa-minus-square"></i> Hide viewed</a>
                         | <a class="HideClosed"><i class="fa fa-minus-square"></i> Hide closed</a>
                         | <a class="HideNew"><i class="fa fa-minus-square"></i> Hide new</a>
                         | <a class="ShowAll"><i class="fa fa-bars"></i> Show all</a>
-                    </fieldset>
+                    </div>
 
                     <table id="problemreportstable">
                         <thead>