From 0190c126d39bb2fd1b3732439a5c1ddc683bff94 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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(''); }); - Test at various browser widths, from a phone-sized screen width up to wide desktop-sized. --- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 9 +++++---- koha-tmpl/opac-tmpl/bootstrap/js/basket.js | 14 +------------- 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index c665cfea5d..8a03997067 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -1591,9 +1591,7 @@ nav { -#cartDetails, -#cartUpdate, -#holdDetails { +#cartDetails { background-color: #FFF; border: 1px solid rgba( 0, 0, 0, .2 ); border-radius: 6px; @@ -1603,9 +1601,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 caefe626aa..a2d4d66639 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/basket.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/basket.js @@ -444,19 +444,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 menuWidth = 200; - var buttonWidth = $("#cartmenulink").innerWidth(); - var buttonOffset = menuWidth - buttonWidth; - var left = position.left - 0 // buttonOffset; - $("#cartDetails") - .css({"position":"absolute", "top":top, "left":left}) - .fadeIn("fast"); + $("#cartDetails").fadeIn("fast"); } function hideCart(){ -- 2.20.1