From 69360e80600f348450eb79ff75e24391c04de5f6 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 15 Jan 2021 15:41:39 +0000
Subject: [PATCH] Bug 27440: Improve structure and style of result toolbars in
 the OPAC

This patch makes markup and CSS changes to areas of the OPAC classed
with "selections-toolbar," an area of controls found at the top of some
lists of titles: The cart, search results, search history, lists, and
suggestions.

To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Perform a search in the OPAC. On the search results page, confirm that
  the various controls work correctly:
  - With OpacHighlightedWords enabled, hightlight and unhighlight links
  - Select all and clear all links
  - Selecting one or more checkboxes should enable the "Select titles
    to..." menu.
    - Test that adding items to the cart and lists works correctly.
    - Test that placing multiple holds work.
    - Test that tagging multiple items works.
- From the search results page, add multiple items to the cart.
  - Open the cart and confirm that the the controls described above
    continue to work correctly.
- Open the search history page, confirm that the toolbar controls work
  correctly for all four categories: Current session catalog searches;
  previous session catalog searches; current session authority searches;
  previous session authority searches.
- On the purchase suggestions page, confirm that "select all" and "clear
  all" work, and that deleting multiple suggestions from the toolbar
  link works.
- On the list contents page test the same controls: selection,
  multi-hold, tagging, and "Remove from list."

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss    |  87 +++++-----
 .../opac-tmpl/bootstrap/en/modules/opac-basket.tt  |  19 +-
 .../opac-tmpl/bootstrap/en/modules/opac-results.tt | 192 +++++++++++----------
 .../bootstrap/en/modules/opac-search-history.tt    |  56 +++---
 .../opac-tmpl/bootstrap/en/modules/opac-shelves.tt |  46 +++--
 .../bootstrap/en/modules/opac-suggestions.tt       |  25 +--
 6 files changed, 210 insertions(+), 215 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index a33ba13211..f0bf7ed4ea 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -427,25 +427,6 @@ th {
     color: #727272;
 }
 
-#selections {
-    color: #727272;
-    font-weight: bold;
-}
-
-#selections-toolbar {
-    background: #e2e8e8 none;
-    border-bottom: none;
-    margin-top: 3px;
-}
-
-.selections {
-    font-weight: bold;
-}
-
-.selections-toolbar.toolbar {
-    background: #e2e8e8 none;
-}
-
 .actions-menu {
     padding-top: 5px;
 }
@@ -486,6 +467,8 @@ th {
         &.disabled,
         &[disabled] {
             color: #333;
+            filter: alpha(opacity=65);
+            opacity: 0.65;
 
             &:hover {
                 i {
@@ -889,7 +872,6 @@ div {
         display: inline;
         font-size: 100%;
         font-weight: bold;
-        margin-left: .5em;
     }
 
     select {
@@ -901,19 +883,6 @@ div {
     }
 
     li {
-        // display: inline;
-        // list-style: none;
-
-        // a {
-        //     border-left: 1px solid #E8E8E8;
-        // }
-
-        // &:first-child {
-        //     a {
-        //         border-left: 0;
-        //     }
-        // }
-
         &.dropdown-header {
             display: block;
         }
@@ -930,22 +899,50 @@ div {
     }
 }
 
-#selections-toolbar,
+.selections {
+    color: #727272;
+    font-weight: bold;
+
+    &::before {
+        color: #6c757d;
+        content: "|";
+        display: inline-block;
+        font-weight: normal;
+        padding: 0 .5rem;
+        text-shadow: 1px 1px 0 #fff;
+    }
+}
+
+.check_control {
+    &::before {
+        color: #6c757d;
+        content: "|";
+        display: inline-block;
+        font-weight: normal;
+        padding: 0 .5rem;
+        text-shadow: 1px 1px 0 #fff;
+    }
+}
+
 .selections-toolbar {
-    background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
+    background: linear-gradient(#B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100%);
+    border-bottom: none;
+    margin-top: 3px;
+    display: flex;
     margin: 0;
     padding-left: 10px;
     padding-top: .5em;
 
+    > div:first-child::before {
+        content: "";
+        padding: 0;
+    }
+
     a,
     button,
     input {
         font-size: .9rem;
     }
-
-    .btn-sm {
-        padding: 0.1rem 0.5rem;
-    }
 }
 
 .list-actions {
@@ -1279,13 +1276,12 @@ nav {
     font-size: 90%;
 }
 
-.highlight_controls {
-    float: left;
-    margin-top: 3px;
-}
+.links {
+    flex-grow: 1;
 
-.links a {
-    font-weight: bold;
+    a {
+        font-weight: bold;
+    }
 }
 
 #tagslist {
@@ -1659,6 +1655,7 @@ nav {
 }
 
 #addto {
+    display: inline-block;
     max-width: 10em;
 }
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
index 90f21e5235..a0f956882e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
@@ -48,12 +48,13 @@
                                 [% END %]
                             </div>
 
-                            <div id="selections-toolbar" class="toolbar noprint">
-                                <a id="CheckAll" class="btn btn-link btn-sm btn-sm" href="#">Select all</a>
-                                <a id="CheckNone" class="btn btn-link btn-sm btn-sm" href="#">Clear all</a>
-                                <span class="sep">|</span>
+                            <div class="selections-toolbar toolbar noprint">
+                                <div class="check_control">
+                                    <a id="CheckAll" class="btn btn-link btn-sm btn-sm" href="#">Select all</a>
+                                    <a id="CheckNone" class="btn btn-link btn-sm btn-sm" href="#">Clear all</a>
+                                </div>
                                 <span class="links" id="tag_hides">
-                                    <span id="selections">Select titles to: </span>
+                                    <span class="selections">Select titles to: </span>
                                     <a href="#" class="btn btn-link btn-sm remove deleteshelf disabled"><i class="fa fa-remove" aria-hidden="true"></i> Remove</a>
                                     [% IF ( Koha.Preference( 'opacuserlogin' ) == 1 ) %]
                                         [% IF ( ( Koha.Preference( 'virtualshelves' ) == 1 ) && loggedinusername ) %]
@@ -485,11 +486,11 @@
                 // Enable/disable controls if checkboxes are checked
                 var checkedBoxes = $(".cb:checked");
                 if ( checkedBoxes.length ) {
-                  $("#selections").html(_("With selected titles: "));
-                  $("#selections-toolbar .links a").removeClass("disabled");
+                  $(".selections").html(_("With selected titles: "));
+                  $(".selections-toolbar .links a").removeClass("disabled");
                 } else {
-                  $("#selections").html(_("Select titles to: "));
-                  $("#selections-toolbar .links a").addClass("disabled");
+                  $(".selections").html(_("Select titles to: "));
+                  $(".selections-toolbar .links a").addClass("disabled");
                 }
             }
         </script>
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
index 26d3db9f8a..446dd7dc5f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
@@ -205,40 +205,94 @@
                                         [% END # /UNLESS tag %]
                                     </div> <!-- / #toolbar -->
 
-                                    <div id="selections-toolbar" class="toolbar noprint">
+                                    <div class="selections-toolbar toolbar noprint">
                                         [% IF ( OpacHighlightedWords ) %]
                                             <div class="highlight_controls noprint">
                                                 <a href="#" class="btn btn-link btn-sm highlight_toggle" id="highlight_toggle_off"><i class="fa fa-fw fa-pencil" aria-hidden="true"></i> Unhighlight</a>
                                                 <a href="#" class="btn btn-link btn-sm highlight_toggle" id="highlight_toggle_on"><i class="fa fa-fw fa-pencil" aria-hidden="true"></i> Highlight</a>
                                             </div>
-                                            <span class="sep">|</span>
                                         [% END %]
-                                        <!-- checkall, clearall are now needed for placehold -->
-                                        <span class="checkall"></span>
-                                        <span class="clearall"></span> <span class="sep">|</span>
 
-                                            <span class="links">
-                                                [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) ) %]
-                                                    <span class="addto"></span>
-                                                [% END %]
-                                                <span id="placehold"></span>
+                                        <div class="check_control">
+                                            <!-- checkall, clearall are now needed for placehold -->
+                                            <span class="clearall">
+                                                <a id="CheckAll" class="btn btn-link btn-sm" href="#">Select all</a>
+                                            </span>
+                                            <span class="checkall">
+                                                <a id="CheckNone" class="btn btn-link btn-sm" href="#">Clear all</a>
+                                            </span>
+                                        </div>
 
-                                                [% IF ( TagsInputEnabled && loggedinusername ) %]
-                                                    <span id="tagsel_span">
-                                                        <button id="tagsel_tag" class="btn btn-link btn-sm disabled" type="submit" style="display:none"><i class="fa fa-fw fa-tag" aria-hidden="true"></i> Tag</button>
-                                                    </span>
-                                                    <div id="tagsel_form" style="display:none">
-                                                        <label for="tagsel_new">New tag:</label>
-                                                        <input type="text" name="tagsel_new" id="tagsel_new" maxlength="100" />
-                                                        <input id="tagsel_button" name="tagsel_button" class="tagsel_button btn btn-sm btn-primary" title="Add" type="submit" value="Add" />
-                                                        <a href="#" id="tagsel_cancel">(done)</a>
-                                                    </div>
-                                                    <div id="tagsel_status" class="tagsel_tatus" style="display:none;">
-                                                        Tag status here.
-                                                    </div>
-                                                [% END %]
-                                            </span> <!-- / .links -->
-                                    </div> <!-- / #selections-toolbar -->
+                                        <div class="links">
+                                            [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) || loggedinusername ) %]
+                                                <span class="selections">Select titles to:</span>
+                                            [% END %]
+                                            [% IF Koha.Preference( 'opacbookbag' ) == 1 OR Koha.Preference('virtualshelves') %]
+                                                <span class="addto">
+                                                    <select class="disabled form-control form-control-sm" name="addto" id="addto">
+                                                        <option>Add to...</option>
+                                                        [% IF Koha.Preference( 'opacbookbag' ) == 1 %]
+                                                            <option value="addtocart">Cart</option>
+                                                        [% END %]
+                                                        [% IF Koha.Preference('virtualshelves') %]
+                                                            [% IF loggedinusername AND add_to_some_private_shelves.count %]
+                                                                <optgroup label="Your lists:">
+                                                                [% SET number_of_private_shelves = 0 %]
+                                                                [% FOREACH s IN add_to_some_private_shelves %]
+                                                                    [% IF shelfnumber != s.shelfnumber %]
+                                                                        <option id="s[% s.shelfnumber | html %]" value="addtolist">[% s.shelfname | html %]</option>
+                                                                        [% SET number_of_private_shelves = number_of_private_shelves + 1 %]
+                                                                        [% IF number_of_private_shelves == 10 %][% LAST %][% END %]
+                                                                    [% END %]
+                                                                [% END %]
+                                                                </optgroup>
+                                                            [% END %]
+                                                            [% IF add_to_some_public_shelves.count %]
+                                                                <optgroup label="Public lists:">
+                                                                [% SET number_of_public_shelves = 0 %]
+                                                                [% FOREACH s IN add_to_some_public_shelves %]
+                                                                    [% IF shelfnumber != s.shelfnumber %]
+                                                                        <option id="s[% s.shelfnumber | html %]" value="addtolist">[% s.shelfname | html %]</option>
+                                                                        [% SET number_of_public_shelves = number_of_public_shelves + 1 %]
+                                                                        [% IF number_of_public_shelves == 10 %][% LAST %][% END %]
+                                                                    [% END %]
+                                                                [% END %]
+                                                                </optgroup>
+                                                            [% END %]
+                                                            [% IF ( add_to_some_private_shelves and add_to_some_private_shelves.count > 10 ) or ( add_to_some_public_shelves and add_to_some_public_shelves.count > 10 ) %]
+                                                                <option value="morelists">[ More lists ]</option>
+                                                            [% END %]
+                                                            <option value="newlist">[ New list ]</option>"
+                                                        [% END # /IF virtualshelves %]
+                                                    </select>
+                                                    <input type="submit" class="btn btn-sm btn-primary" value="Save" />
+                                                </span>
+                                            [% END # /IF opacbookbag || virtualshelves %]
+
+                                            [% IF ( ( Koha.Preference( 'RequestOnOpac' ) == 1 ) && ( Koha.Preference( 'opacuserlogin' ) == 1 ) && DisplayMultiPlaceHold ) %]
+                                                <button class="btn btn-link btn-sm hold disabled" type="button">
+                                                    <i class="fa fa-fw fa-bookmark" aria-hidden="true"></i> Place hold
+                                                </button>
+                                            [% END %]
+
+                                            [% IF ( TagsInputEnabled && loggedinusername ) %]
+                                                <span id="tagsel_span">
+                                                    <button id="tagsel_tag" class="btn btn-link btn-sm disabled" type="submit" style="display:none"><i class="fa fa-fw fa-tag" aria-hidden="true"></i> Tag</button>
+                                                </span>
+                                            [% END %]
+                                        </div> <!-- / .links -->
+                                        [% IF ( TagsInputEnabled && loggedinusername ) %]
+                                            <div id="tagsel_form" style="display:none">
+                                                <label for="tagsel_new">New tag:</label>
+                                                <input type="text" name="tagsel_new" id="tagsel_new" maxlength="100" />
+                                                <input id="tagsel_button" name="tagsel_button" class="tagsel_button btn btn-sm btn-primary" title="Add" type="submit" value="Add" />
+                                                <a href="#" id="tagsel_cancel">(done)</a>
+                                            </div>
+                                            <div id="tagsel_status" class="tagsel_tatus" style="display:none;">
+                                                Tag status here.
+                                            </div>
+                                        [% END %]
+                                    </div> <!-- / .selections-toolbar -->
                                 </div> <!-- /#floating -->
 
                                 <!-- TABLE RESULTS START -->
@@ -714,13 +768,13 @@
         function enableCheckboxActions(){
             // Enable/disable controls if checkboxes are checked
             var checkedBoxes = $(".cb:checked");
-            var controls = $("#selections-toolbar .links a, #selections-toolbar .links input, #selections-toolbar .links select, #selections-toolbar .links label, #selections-toolbar .links button");
+            var controls = $(".selections-toolbar .links a, .selections-toolbar .links input, .selections-toolbar .links select, .selections-toolbar .links label, .selections-toolbar .links button");
             if ($(checkedBoxes).size()) {
-            $("#selections").html(_("With selected titles: "));
-            $(controls).removeClass("disabled");
+                $(".selections").html(_("With selected titles: "));
+                $(controls).removeClass("disabled");
             } else {
-            $("#selections").html(_("Select titles to: "));
-            $(controls).addClass("disabled");
+                $(".selections").html(_("Select titles to: "));
+                $(controls).addClass("disabled");
             }
         }
 
@@ -771,50 +825,6 @@
                 e.preventDefault();
             });
 
-            var param1 = "";
-            [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) || loggedinusername ) %]
-                param1 += "<span id=\"selections\">"+_("Select titles to: ")+"</span>";
-            [% END %]
-
-            [% IF Koha.Preference( 'opacbookbag' ) == 1 OR Koha.Preference('virtualshelves') %]
-                param1 += "<select class=\"disabled\" name=\"addto\" id=\"addto\"><option>"+_("Add to...")+"</option>";
-
-                [% IF Koha.Preference( 'opacbookbag' ) == 1 %]
-                    param1 += "<option value=\"addtocart\">"+_("Cart")+"<\/option>";
-                [% END %]
-                [% IF Koha.Preference('virtualshelves') %]
-                    [% IF loggedinusername AND add_to_some_private_shelves.count %]
-                        param1 += "<optgroup label=\""+_("Your lists:")+"\">";
-                        [% SET number_of_private_shelves = 0 %]
-                        [% FOREACH s IN add_to_some_private_shelves %]
-                            [% IF shelfnumber != s.shelfnumber %]
-                                param1 += "<option id=\"s[% s.shelfnumber | html %]\" value=\"addtolist\">[% s.shelfname | html %]<\/option>";
-                                [% SET number_of_private_shelves = number_of_private_shelves + 1 %]
-                                [% IF number_of_private_shelves == 10 %][% LAST %][% END %]
-                            [% END %]
-                        [% END %]
-                        param1 += "<\/optgroup>";
-                    [% END %]
-                    [% IF add_to_some_public_shelves.count %]
-                        param1 += "<optgroup label=\""+_("Public lists:")+"\">";
-                        [% SET number_of_public_shelves = 0 %]
-                        [% FOREACH s IN add_to_some_public_shelves %]
-                            [% IF shelfnumber != s.shelfnumber %]
-                                param1 += "<option id=\"s[% s.shelfnumber | html %]\" value=\"addtolist\">[% s.shelfname | html %]<\/option>";
-                                [% SET number_of_public_shelves = number_of_public_shelves + 1 %]
-                                [% IF number_of_public_shelves == 10 %][% LAST %][% END %]
-                            [% END %]
-                        [% END %]
-                        param1 += "<\/optgroup>";
-                    [% END %]
-                    [% IF ( add_to_some_private_shelves and add_to_some_private_shelves.count > 10 ) or ( add_to_some_public_shelves and add_to_some_public_shelves.count > 10 ) %]
-                        param1 += "<option value=\"morelists\">[ "+_("More lists")+" ]<\/option>";
-                    [% END %]
-                    param1 +="<option value=\"newlist\">"+_("[ New list ]")+"<\/option>"
-                [% END # /IF virtualshelves %]
-                param1 += "<\/select> <input type=\"submit\" class=\"btn btn-sm btn-primary\" value=\""+_("Save")+"\" />";
-            [% END # /IF opacbookbag || virtualshelves %]
-
             $('.resort').change(function() {
                 $('#bookbag_form').submit();
             });
@@ -823,17 +833,6 @@
                 $('#bookbag_form').submit();
             });
 
-            $("span.clearall").html("<a id=\"CheckNone\" class=\"btn btn-link btn-sm \" href=\"#\">"+_("Clear all")+"<\/a>");
-            $("span.checkall").html("<a id=\"CheckAll\" class=\"btn btn-link btn-sm \" href=\"#\">"+_("Select all")+"<\/a>");
-
-            [% IF Koha.Preference( 'opacbookbag' ) == 1 %]
-                $("span.addto").html(param1);
-            [% ELSE %]
-                [% IF ( ( Koha.Preference( 'virtualshelves' ) == 1 ) && loggedinusername ) %]
-                    $("span.addto").html(param1);
-                [% END %]
-            [% END %]
-
             [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) ) %]
                 [% IF Koha.Preference( 'virtualshelves' ) == 1 %]
                     $("#addto").on("change",function(){
@@ -893,13 +892,10 @@
                 enableCheckboxActions();
             });
 
-            [% IF ( ( Koha.Preference( 'RequestOnOpac' ) == 1 ) && ( Koha.Preference( 'opacuserlogin' ) == 1 ) && DisplayMultiPlaceHold ) %]
-                $("#placehold").html("<button class=\"btn btn-link btn-sm hold disabled\" type=\"submit\"><i class=\"fa fa-fw fa-bookmark\" aria-hidden=\"true\"></i>" + _("Place hold") + "</button>");
-                $("#placehold").find("button.hold").click(function(){
-                    holdMultiple();
-                    return false;
-                });
-            [% END %]
+            $(".hold").on("click", function(e){
+                e.preventDefault();
+                holdMultiple();
+            });
 
             [% IF ( query_desc ) %]
                 [% IF ( OpacHighlightedWords ) %]
@@ -910,8 +906,14 @@
                         q_array = q_array.splice(0,-1);
                     }
                     highlightOn();
-                    $("#highlight_toggle_on" ).hide().click(function() {highlightOn() ;});
-                    $("#highlight_toggle_off").show().click(function() {highlightOff();});
+                    $("#highlight_toggle_on" ).hide().click(function(e) {
+                        e.preventDefault();
+                        highlightOn();
+                    });
+                    $("#highlight_toggle_off").show().click(function(e) {
+                        e.preventDefault();
+                        highlightOff();
+                    });
                 [% END # /IF OpacHighlightedWords %]
                 [% IF ( OverDriveEnabled ) %]
                     var $overdrive_results = $( '<div id="overdrive-results">' + MSG_SEARCHING.format('OverDrive') + ' <img class="throbber" src="[% interface | html %]/lib/jquery/plugins/themes/classic/throbber.gif" /></div>' );
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
index df8a53572d..e04b77139f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
@@ -58,15 +58,8 @@
                                 [% IF ( current_biblio_searches ) %]
                                     <h2>Current session</h2>
                                     <form action="/cgi-bin/koha/opac-search-history.pl" method="post">
-                                        <div class="selections-toolbar toolbar">
-                                            <a class="CheckAll btn btn-link btn-sm" href="#">Select all</a>
-                                            <a class="CheckNone btn btn-link btn-sm" href="#">Clear all</a>
-                                            <span class="sep">|</span>
-                                            <span class="links">
-                                                <span class="selections">Select searches to: </span>
-                                                <a href="#" class="removeitems disabled">Delete</a>
-                                            </span>
-                                        </div>
+
+                                        [% INCLUDE 'toolbar_controls' %]
                                         <input type="hidden" name="action" value="delete" />
                                         <table class="historyt table table-bordered table-striped">
                                             <thead>
@@ -102,15 +95,7 @@
                                 [% IF ( previous_biblio_searches ) %]
                                     <h2>Previous sessions</h2>
                                     <form action="/cgi-bin/koha/opac-search-history.pl" method="post">
-                                        <div class="selections-toolbar toolbar">
-                                            <a class="CheckAll btn btn-link btn-sm" href="#">Select all</a>
-                                            <a class="CheckNone btn btn-link btn-sm" href="#">Clear all</a>
-                                            <span class="sep">|</span>
-                                            <span class="links">
-                                                <span class="selections">Select searches to: </span>
-                                                <a href="#" class="btn btn-link btn-sm removeitems disabled"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>
-                                            </span>
-                                        </div>
+                                        [% INCLUDE 'toolbar_controls' %]
 
                                         <input type="hidden" name="action" value="delete" />
                                         <table class="historyt table table-bordered table-striped">
@@ -155,15 +140,7 @@
                                 [% IF ( current_authority_searches ) %]
                                     <h2>Current session</h2>
                                     <form action="/cgi-bin/koha/opac-search-history.pl" method="post">
-                                        <div class="selections-toolbar toolbar">
-                                            <a class="CheckAll" href="#">Select all</a>
-                                            <a class="CheckNone" href="#">Clear all</a>
-                                            <span class="sep">|</span>
-                                            <span class="links">
-                                                <span class="selections">Select searches to: </span>
-                                                <a href="#" class="btn btn-link btn-sm removeitems disabled"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>
-                                            </span>
-                                        </div>
+                                        [% INCLUDE 'toolbar_controls' %]
                                         <input type="hidden" name="action" value="delete" />
                                         <table class="historyt table table-bordered table-striped">
                                             <thead>
@@ -192,15 +169,7 @@
                                 [% IF ( previous_authority_searches ) %]
                                     <h2>Previous sessions</h2>
                                     <form action="/cgi-bin/koha/opac-search-history.pl" method="post">
-                                        <div class="selections-toolbar toolbar">
-                                            <a class="CheckAll" href="#">Select all</a>
-                                            <a class="CheckNone" href="#">Clear all</a>
-                                            <span class="sep">|</span>
-                                            <span class="links">
-                                                <span class="selections">Select searches to: </span>
-                                                <a href="#" class="removeitems disabled">Delete</a>
-                                            </span>
-                                        </div>
+                                        [% INCLUDE 'toolbar_controls' %]
                                         <input type="hidden" name="action" value="delete" />
                                         <table class="historyt table table-bordered table-striped">
                                             <thead>
@@ -239,6 +208,21 @@
 </div> <!-- / #main -->
 
 [% INCLUDE 'opac-bottom.inc' %]
+
+[% BLOCK toolbar_controls %]
+    [% # Identical controls shown at the top of each table of search history %]
+    <div class="selections-toolbar toolbar">
+        <div class="check_control">
+            <a class="CheckAll btn btn-link btn-sm" href="#">Select all</a>
+            <a class="CheckNone btn btn-link btn-sm" href="#">Clear all</a>
+        </div>
+        <div class="links">
+            <span class="selections">Select searches to: </span>
+            <a href="#" class="removeitems disabled btn btn-sm btn-link"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>
+        </div>
+    </div>
+[% END %]
+
 [% BLOCK jsinclude %]
 [% INCLUDE 'datatables.inc' %]
 <script>
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
index 4ee6813fc7..af9ddc6485 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
@@ -329,16 +329,26 @@
 
                                 </div> <!-- / #toolbar -->
 
-                                <div id="selections-toolbar" class="toolbar noprint">
-                                    <span class="checkall"></span> <span class="clearall"></span> <span class="sep">|</span>
-                                    <span class="links">
-                                        <span id="selections">Select titles to: </span>
-                                        [% IF Koha.Preference( 'RequestOnOpac' ) == 1 %]
-                                            <span id="placehold"></span>
+                                <div class="selections-toolbar toolbar noprint">
+                                    <div class="check_control">
+                                        <span class="checkall">
+                                            <a id="CheckAll" class="btn btn-link btn-sm" href="#">Select all</a>
+                                        </span>
+                                        <span class="clearall">
+                                            <a id="CheckNone" class="btn btn-link btn-sm" href="#">Clear all</a>
+                                        </span>
+                                    </div>
+                                    <div class="links">
+                                        <span class="selections">Select titles to: </span>
+                                        [% IF ( ( Koha.Preference( 'opacuserlogin' ) == 1 ) && ( Koha.Preference( 'RequestOnOpac' ) == 1 ) ) %]
+                                            <span id="placehold">
+                                                <a href="#" class="btn btn-link hold tag_hides disabled"><i class="fa fa-fw fa-bookmark" aria-hidden="true"></i> Place hold</a>
+                                            </span>
                                         [% END %]
+
                                         [% IF ( TagsInputEnabled && loggedinusername ) %]
                                             <span id="addtags">
-                                                <a id="tagsel_tag" href="#" class="btn btn-link btn-disabled"><i class="fa fa-fw fa-tag" aria-hidden="true"></i> Tag</a>
+                                                <a id="tagsel_tag" href="#" class="btn btn-link disabled"><i class="fa fa-fw fa-tag" aria-hidden="true"></i> Tag</a>
                                             </span>
                                             <span id="tagsel_form" class="form-inline" style="display:none">
                                                 <label for="tagsel_new">New tag(s), separated by a comma:</label>
@@ -350,8 +360,8 @@
                                         [% IF loggedinusername && can_remove_biblios %]
                                             <span id="removeitems"></span>
                                         [% END %]
-                                    </span> <!-- / .links -->
-                                </div> <!-- / #selections-toolbar -->
+                                    </div> <!-- / .links -->
+                                </div> <!-- / .selections-toolbar -->
                             </div> <!-- /#floating -->
 
                             <form action="/cgi-bin/koha/opac-shelves.pl" method="post" id="myform" name="myform">
@@ -879,28 +889,26 @@ function enableCheckboxActions(){
     // Enable/disable controls if checkboxes are checked
     var checkedBoxes = $(".cb:checked");
     if ($(checkedBoxes).size()) {
-      $("#selections").html(_("With selected titles: "));
-      $("#selections-toolbar .links a").removeClass("disabled");
+      $(".selections").html(_("With selected titles: "));
+      $(".selections-toolbar .links a").removeClass("disabled");
     } else {
-      $("#selections").html(_("Select titles to: "));
-      $("#selections-toolbar .links a").addClass("disabled");
+      $(".selections").html(_("Select titles to: "));
+      $(".selections-toolbar .links a").addClass("disabled");
     }
 }
 
 $(function() {
     [% IF Koha.Preference( 'opacbookbag' ) == 1 %]$(".addtocart,.cartRemove").removeClass("hidden");[% END %]
-    $("span.clearall").html("<a id=\"CheckNone\" class=\"btn btn-link btn-sm\" href=\"#\">"+_("Clear all")+"<\/a>");
-    $("span.checkall").html("<a id=\"CheckAll\" class=\"btn btn-link btn-sm\" href=\"#\">"+_("Select all")+"<\/a>");
-    $("a.print").show();
 
     [% IF ( ( Koha.Preference( 'opacuserlogin' ) == 1 ) && ( Koha.Preference( 'RequestOnOpac' ) == 1 ) ) %]
-        $("#placehold").html("<a href=\"#\" class=\"btn btn-link hold tag_hides btn-disabled\"><i class=\"fa fa-fw fa-bookmark\" aria-hidden=\"true\"></i> "+_("Place hold")+"<\/a>");
-        $("#selections-toolbar a.hold").click(function(){
+        $(".selections-toolbar a.hold").click(function(e){
+            e.preventDefault();
             holdSelections();
-            return false;
         });
     [% END %]
 
+    $("a.print").show();
+
     $("#CheckAll").on("click",function(e){
         e.preventDefault();
         $(".cb").prop("checked", true);
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
index e6e8197924..13b2c3ca22 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
@@ -329,12 +329,16 @@
                                     [% END %]
 
                                     [% IF ( loggedinusername ) %]
-                                        <div id="selections-toolbar" class="toolbar">
-                                            <span class="checkall"></span> <span class="clearall"></span> <span class="sep">|</span>
-                                            <span class="links">
-                                                <span id="selections">Select suggestions to: </span>
-                                                <span id="removeitems"></span>
-                                            </span>
+                                        <div class="selections-toolbar toolbar">
+                                            <div class="check_control">
+                                                <span class="checkall"></span> <span class="clearall"></span>
+                                            </div>
+                                            <div class="links">
+                                                <span class="selections">Select suggestions to: </span>
+                                                <span id="removeitems">
+                                                    <a href="#" class="btn btn-link removeitems tag_hides disabled"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>
+                                                </span>
+                                            </div>
                                         </div>
                                     [% END %]
 
@@ -473,11 +477,11 @@
             // Enable/disable controls if checkboxes are checked
             var checkedBoxes = $(".cb:checked");
             if ($(checkedBoxes).size()) {
-              $("#selections").html(_("With selected suggestions: "));
-              $("#selections-toolbar .links a").removeClass("disabled");
+              $(".selections").html(_("With selected suggestions: "));
+              $(".selections-toolbar .links a").removeClass("disabled");
             } else {
-              $("#selections").html(_("Select suggestions to: "));
-              $("#selections-toolbar .links a").addClass("disabled");
+              $(".selections").html(_("Select suggestions to: "));
+              $(".selections-toolbar .links a").addClass("disabled");
             }
         }
     [% END %]
@@ -515,7 +519,6 @@
         $(".cb").click(function(){
           enableCheckboxActions();
         });
-        $("#removeitems").html("<a href=\"#\" class=\"btn btn-link removeitems tag_hides btn-disabled\"><i class=\"fa fa-trash\" aria-hidden=\"true\"></i> "+_("Delete")+"</a>");
 
         enableCheckboxActions();
 
-- 
2.11.0