From 9aa4a0d65affb029cb206d756bab592659aefd90 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 24 Apr 2020 00:51:35 +0000
Subject: [PATCH] Bug 25271: Add floating toolbar to OPAC cart
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

This patch adds JavaScript to the OPAC cart view so that the toolbar at
the top of the display "floats" as you scroll down.

The patch also makes a minor correction to the OPAC SCSS affecting the
display of the buttons in the cart toolbar.

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

 - Add some items to a cart in the OPAC.
 - Open the cart and confirm that the toolbar sticks to the top of the
   window as you scroll down.
 - Confirm that it works in the "More details" view.
 - Confirm that other JavaScript-based operations are not affected:
   table sorting and all the various toolbar buttons.

Signed-off-by: Frédéric Demians <f.demians@tamil.fr>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss  | 2 +-
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss         | 5 -----
 koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt | 9 +++++++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
index 6a718ce3d8..1dec8de4fb 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
@@ -558,4 +558,4 @@
     .userlabel {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 2fec169b94..d78fd167a7 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -112,11 +112,6 @@ a {
         vertical-align: middle;
     }
 
-    &.brief {
-
-        padding-left: 27px;
-    }
-
     &.addtocart {
         padding-right: 0;
     }
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 506b996bf0..a89bf8b001 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
@@ -17,6 +17,7 @@
                 <div class="span12">
                     <div id="userbasket">
                         <h2>Your cart</h2>
+                        <div id="floating">
                             <div id="toolbar" class="toolbar noprint">
                                 [% IF ( verbose ) %]
                                     <a href="opac-basket.pl" class="btn btn-link brief"><i class="fa fa-fw fa-search-minus" aria-hidden="true"></i> Brief display</a>
@@ -62,6 +63,7 @@
                                 </span>
                                 [% END %]
                             </div>
+                        </div> <!-- /#floating -->
 
                         [% IF ( verbose ) %]
                             <form action="opac-basket.pl" method="get" name="bookbag_form" id="bookbag_form" class="checkboxed">
@@ -304,6 +306,7 @@
 
 [% BLOCK jsinclude %]
     [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
         [% INCLUDE 'datatables.inc' %]
         <script>
             [% IF ( TagsInputEnabled && loggedinusername ) %]
@@ -456,6 +459,12 @@
                     return false;
                 });
                 enableCheckboxActions();
+
+                Sticky = $("#floating");
+                Sticky.hcSticky({
+                    stickTo: "#userbasket",
+                    stickyClass: "floating"
+                });
             });
 
             function enableCheckboxActions(){
-- 
2.39.5