Bug 23096: Add floating toolbar to OPAC lists
authorOwen Leonard <oleonard@myacpl.org>
Tue, 11 Jun 2019 16:46:27 +0000 (16:46 +0000)
committerMartin Renvoize <martin.renvoize@ptfs-europe.com>
Tue, 25 Jun 2019 16:10:26 +0000 (17:10 +0100)
This patch makes the list contents table's toolbar "stick" to the top of
the screen when scrolling. Minor markup changes have been made to enable
this change.

To test, apply the patch and open a list in the OPAC which has multiple
titles on it. Confirm that the toolbar sticks to the top of the screen
when you scroll down.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt

index b837bcd..8a02c31 100644 (file)
                         </h3>
 
                          [% IF ( itemsloop ) %]
+                            <div id="floating">
                              <div id="toolbar" class="toolbar clearfix">
                                  <div class="list-actions">
                                     <a class="newshelf" href="/cgi-bin/koha/opac-shelves.pl?op=add_form">New list</a> <span class="sep">|</span>
                                     [% END %]
                                 </span> <!-- / .links -->
                             </div> <!-- / #selections-toolbar -->
+                            </div> <!-- /#floating -->
 
                             <form action="/cgi-bin/koha/opac-shelves.pl" method="post" id="myform" name="myform" class="checkboxed">
                                 [% IF can_manage_shelf %]
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
 [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
+[% Asset.js("lib/hc-sticky.js") | $raw %]
 <script>
 //<![CDATA[
 var MSG_REMOVE_FROM_LIST = _("Are you sure you want to remove these items from the list?");
@@ -962,6 +965,13 @@ $(function() {
     [% END %]
 
     AdjustRemark();
+
+    Sticky = $("#floating");
+    Sticky.hcSticky({
+        stickTo: "#usershelves",
+        stickyClass: "floating"
+    });
+
 }); // document.ready
 
 function AdjustRemark() {