From 893413e8a10d4206765b4e570419c859dca20e53 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 20 Sep 2021 14:57:23 +0000
Subject: [PATCH] Bug 28901: showCart incorrectly calculates position if
 content above navbar

This patch makes changes to the OPAC Cart's CSS and JS so that the cart
pop-up message display more consistently. The CSS is changed to use
position "fixed" instead of "absolute." This allows the message to
display without recalculating the position every time, and keeps the
appearance we expect.

The z-index of the message is also increase to prevent it from being
hidden behind a floating 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).

 - Perform a catalog search in the OPAC which will return multiple
   results.
 - In the list of search results, click the "Add to cart" link next to
   several search results. Each time you should see a message appear in
   the upper left corner of the screen, "The item has been added to the
   cart."
 - The position of the messages should be consistent no matter how far
   down the page you scroll.
 - Test again after adding content to the OpacHeader region. One way to
   do this is to add the following to the OpacUserJS preference:

   $(document).ready(function(){
     $("#wrapper").prepend('<img src="https://generative-placeholders.glitch.me/image?width=900&height=200&style=triangles&gap=30">');
   });

 - Test at various browser widths, from a phone-sized screen width up to
   wide desktop-sized.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss |  9 +++++----
 koha-tmpl/opac-tmpl/bootstrap/js/basket.js      | 11 +----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index ea3976b839..52b3565121 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -1593,9 +1593,7 @@ nav {
 
 
 
-#cartDetails,
-#cartUpdate,
-#holdDetails {
+#cartDetails {
     background-color: #FFF;
     border: 1px solid rgba( 0, 0, 0, .2 );
     border-radius: 6px;
@@ -1605,9 +1603,12 @@ nav {
     font-size: 90%;
     margin: 0;
     padding: 8px 20px;
+    position: fixed;
     text-align: center;
+    top: 50px;
+    left: 50px;
     width: 180px;
-    z-index: 2;
+    z-index: 10;
 }
 
 #cartmenulink {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/basket.js b/koha-tmpl/opac-tmpl/bootstrap/js/basket.js
index 0f52389702..8aaf772880 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/basket.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/basket.js
@@ -405,16 +405,7 @@ function vShelfAdd() {
 }
 
 function showCart(){
-    var position = $("#cartmenulink").offset();
-    var scrolld = $(window).scrollTop();
-    var top = position.top + $("#cartmenulink").outerHeight();
-    if( scrolld > top ){
-        top = scrolld + 15;
-    }
-    var left = position.left -  0;
-    $("#cartDetails")
-        .css({"position":"absolute", "top":top, "left":left})
-        .fadeIn("fast");
+    $("#cartDetails").fadeIn("fast");
 }
 
 function hideCart(){
-- 
2.39.2