[Bug 28901] New: showCart incorrectly calculates position if content above navbar
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Bug ID: 28901 Summary: showCart incorrectly calculates position if content above navbar Change sponsored?: --- Product: Koha Version: 20.11 Hardware: All OS: All Status: NEW Severity: normal Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: dcook@prosentient.com.au QA Contact: testopia@bugs.koha-community.org We like to insert content like banners above the navbar. In 20.11, I notice that this causes the "Your cart is currently empty" message to appear way lower than it should. It looks like that's due to the .navbar class being relatively positioned instead of statically positioned, which looks like it's probably a Bootstrap 4 upstream change. I think the most obvious change is to update the algorithm used in "function showCart". -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |jonathan.druart+koha@gmail. | |com --- Comment #1 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- Not affecting master? Steps to recreate? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 --- Comment #2 from David Cook <dcook@prosentient.com.au> --- (In reply to Jonathan Druart from comment #1)
Not affecting master? Steps to recreate?
It'll probably be affecting master. It might affect other versions after 19.11, but I haven't gotten around to looking yet. I've just fixed it locally for 20.11. I'll have a think about drafting up some steps. I'll probably do something with injecting a HTML element above the navbar using Javascript. I wasn't supposed to be working on Koha yesterday, and today after I get through my emails I'm going to work on something else. But i'll make a note to come back to this. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Version|20.11 |master --- Comment #3 from Owen Leonard <oleonard@myacpl.org> --- This can be reproduced in master by adding this to OPACUserJS: $(document).ready(function(){ $("#wrapper").prepend('<img src="https://generative-placeholders.glitch.me/image?width=900&height=200&style=triangles&gap=30">'); }); - Search the catalog - Scroll down the page to a later search result - Click the "Add to cart" link -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |28910 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28910 [Bug 28910] Correct eslint errors in OPAC basket.js -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff Patch complexity|--- |Trivial patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 --- Comment #4 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 125072 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=125072&action=edit 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...). - 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Failed QA --- Comment #5 from David Cook <dcook@prosentient.com.au> --- Sorry, Owen, but I couldn't get your patch to work. I ran both "yarn build" and "yarn build --view opac" but the "Your cart is currently empty" message is still appearing way too low when an image is prepended to the wrapper. Am I doing something wrong? The following is the patch I used to fix it locally: diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/basket.js b/koha-tmpl/opac-tmpl/bootstrap/js/basket.js index 58e77c13c5..17ff077aeb 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/basket.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/basket.js @@ -469,10 +469,8 @@ function vShelfAdd() { function showCart(){ var position = $("#cartmenulink").offset(); var scrolld = $(window).scrollTop(); - var top = position.top + $("#cartmenulink").outerHeight(); - if( scrolld > top ){ - top = scrolld + 15; - } + //BZ 28901 + var top = $("#cartmenulink").outerHeight() + 10; var menuWidth = 200; var buttonWidth = $("#cartmenulink").innerWidth(); var buttonOffset = menuWidth - buttonWidth; -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Needs Signoff --- Comment #6 from David Cook <dcook@prosentient.com.au> --- Maybe it didn't work because I didn't actually apply the patch. You can tell it's 4:55pm on a Friday... -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 --- Comment #7 from David Cook <dcook@prosentient.com.au> --- Btw reset back to Needs Signoff, and will have to have a crack another time, as it's the weekend! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com Status|Needs Signoff |Patch doesn't apply --- Comment #8 from David Nind <david@davidnind.com> --- Patch no longer applies 8-(.. Applying: Bug 28901: showCart incorrectly calculates position if content above navbar Using index info to reconstruct a base tree... M koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss M koha-tmpl/opac-tmpl/bootstrap/js/basket.js Falling back to patching base and 3-way merge... Auto-merging koha-tmpl/opac-tmpl/bootstrap/js/basket.js CONFLICT (content): Merge conflict in koha-tmpl/opac-tmpl/bootstrap/js/basket.js Auto-merging koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss error: Failed to merge in the changes. Patch failed at 0001 Bug 28901: showCart incorrectly calculates position if content above navbar -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #125072|0 |1 is obsolete| | --- Comment #9 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 126961 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=126961&action=edit 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...). - 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Patch doesn't apply --- Comment #10 from David Nind <david@davidnind.com> --- Still can't get to apply 8-(.. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #126961|0 |1 is obsolete| | --- Comment #11 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 127021 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=127021&action=edit 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...). - 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #127021|0 |1 is obsolete| | --- Comment #12 from David Nind <david@davidnind.com> --- Created attachment 127022 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=127022&action=edit 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...). - 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #127022|0 |1 is obsolete| | --- Comment #13 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 127120 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=127120&action=edit 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...). - 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to master Version(s)| |21.11.00 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 --- Comment #14 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- Pushed to master for 21.11, thanks to everybody involved! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=28901 Kyle M Hall <kyle@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to master |Pushed to stable Version(s)|21.11.00 |21.11.00,21.05.05 released in| | CC| |kyle@bywatersolutions.com --- Comment #15 from Kyle M Hall <kyle@bywatersolutions.com> --- Pushed to 21.05.x for 21.05.05 -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org