[Bug 30136] New: Add back to top button when scrolling
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Bug ID: 30136 Summary: Add back to top button when scrolling Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: NEW Severity: new feature Priority: P5 - low Component: Templates Assignee: oleonard@myacpl.org Reporter: fridolin.somers@biblibre.com QA Contact: testopia@bugs.koha-community.org Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|oleonard@myacpl.org |fridolin.somers@biblibre.co | |m -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff Patch complexity|--- |Small patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #1 from Fridolin Somers <fridolin.somers@biblibre.com> --- Created attachment 130896 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=130896&action=edit Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #2 from Fridolin Somers <fridolin.somers@biblibre.com> --- Created attachment 130897 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=130897&action=edit Bug 30136: [DO NO PUSH] CSS styling for OPAC This patch is for easy testing of the CSS to apply on button. If feature is validated this must be written in opac SCSS file. Maybe this sould only appear on large screens. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |oleonard@myacpl.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #3 from Fridolin Somers <fridolin.somers@biblibre.com> --- Created attachment 130898 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=130898&action=edit Screenshot with patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 ByWater Sandboxes <bws.sandboxes@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #130896|0 |1 is obsolete| | --- Comment #4 from ByWater Sandboxes <bws.sandboxes@gmail.com> --- Created attachment 130902 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=130902&action=edit Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 ByWater Sandboxes <bws.sandboxes@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #130897|0 |1 is obsolete| | --- Comment #5 from ByWater Sandboxes <bws.sandboxes@gmail.com> --- Created attachment 130903 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=130903&action=edit Bug 30136: [DO NO PUSH] CSS styling for OPAC This patch is for easy testing of the CSS to apply on button. If feature is validated this must be written in opac SCSS file. Maybe this sould only appear on large screens. Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Barbara Johnson <barbara.johnson@bedfordtx.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |barbara.johnson@bedfordtx.g | |ov Status|Needs Signoff |Signed Off --- Comment #6 from Barbara Johnson <barbara.johnson@bedfordtx.gov> --- Worked very well. I tested it on opac-search.pl, opac-detail.pl and various patrons pages. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #7 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Hi Frido, can you please check? FAIL koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc FAIL forbidden patterns forbidden pattern: Font Awesome icons need the aria-hidden attribute for accessibility purpose (see bug 25166) (line 220) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #130902|0 |1 is obsolete| | --- Comment #8 from Fridolin Somers <fridolin.somers@biblibre.com> --- Created attachment 133219 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=133219&action=edit Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #130903|0 |1 is obsolete| | --- Comment #9 from Fridolin Somers <fridolin.somers@biblibre.com> --- Created attachment 133220 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=133220&action=edit Bug 30136: [DO NO PUSH] CSS styling for OPAC This patch is for easy testing of the CSS to apply on button. If feature is validated this must be written in opac SCSS file. Maybe this sould only appear on large screens. Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #10 from Fridolin Somers <fridolin.somers@biblibre.com> --- (In reply to Katrin Fischer from comment #7)
Hi Frido, can you please check?
FAIL koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc FAIL forbidden patterns forbidden pattern: Font Awesome icons need the aria-hidden attribute for accessibility purpose (see bug 25166) (line 220)
Ah oupsy. Fixed -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |wainuiwitikapark@catalyst.n | |et.nz --- Comment #11 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- I wonder if we still need to improve accessibility here. In my understanding aria-hidden="true" is usually used when we have text in addition to the FA icon and want the screen readers to ignore the icon. In this case, we have the FA icon _only_. There is no alt text or similar, nothing is shown when hovering over the icon. I feel like we should have kind of a textual fallback here. Does that make sense? Would really love to get some additional feedback - adding Owen and Wainui in hope of some insight! Functionality wise this works ok! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #12 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 133737 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=133737&action=edit Bug 30136: (follow-up) CSS and accessibility update This patch adds the new CSS to the global CSS file. Rebuild the OPAC CSS to test. The patch also moves the JavaScript for the button from opac-bottom.inc into global.js and adds accessibility labels to the generated markup. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #13 from Owen Leonard <oleonard@myacpl.org> --- By the way, Font Awesome provides accessibility suggestions for the version we are using here: https://fontawesome.com/v4/accessibility/ -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Séverine Queune <severine.queune@bulac.fr> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Patch doesn't apply CC| |severine.queune@bulac.fr --- Comment #14 from Séverine Queune <severine.queune@bulac.fr> --- Sorry Frido, I'd be happy to try again when it's fixed. error: sha1 information is lacking or useless (koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc). error: could not build fake ancestor Patch failed at 0001 Bug 30136: (follow-up) CSS and accessibility update -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #133220|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff --- Comment #15 from Fridolin Somers <fridolin.somers@biblibre.com> --- Ah it comes from patch "[DO NO PUSH] CSS styling for OPAC", I set it as obsolete. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #16 from Séverine Queune <severine.queune@bulac.fr> --- Thanks Frido ! I tested on both personal devbox and sandbox and the display of the button is completely different from the one described and shown on screenshot. The behaviour is also slightly different as the one described as the button is stuck on the bottom of the page so I don't see it before I reach the end of the page. Is that expected ? See sandbox : https://opac-bz30136.sandboxes.biblibre.eu/cgi-bin/koha/opac-search.pl?idx=&q=a&weight_search=1 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #17 from Fridolin Somers <fridolin.somers@biblibre.com> --- (In reply to Séverine Queune from comment #16)
Thanks Frido ! I tested on both personal devbox and sandbox and the display of the button is completely different from the one described and shown on screenshot. The behaviour is also slightly different as the one described as the button is stuck on the bottom of the page so I don't see it before I reach the end of the page. Is that expected ?
See sandbox : https://opac-bz30136.sandboxes.biblibre.eu/cgi-bin/koha/opac-search. pl?idx=&q=a&weight_search=1
I dont reproduce this on you sandbox, button appear as soon as I start scrolling down. Maybe clear the cache with Ctrl+F5 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Séverine Queune <severine.queune@bulac.fr> 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=30136 Séverine Queune <severine.queune@bulac.fr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #133219|0 |1 is obsolete| | --- Comment #18 from Séverine Queune <severine.queune@bulac.fr> --- Created attachment 134011 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=134011&action=edit Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov> Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Séverine Queune <severine.queune@bulac.fr> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #133737|0 |1 is obsolete| | --- Comment #19 from Séverine Queune <severine.queune@bulac.fr> --- Created attachment 134012 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=134012&action=edit Bug 30136: (follow-up) CSS and accessibility update This patch adds the new CSS to the global CSS file. Rebuild the OPAC CSS to test. The patch also moves the JavaScript for the button from opac-bottom.inc into global.js and adds accessibility labels to the generated markup. Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #20 from Séverine Queune <severine.queune@bulac.fr> --- (In reply to Fridolin Somers from comment #17)
(In reply to Séverine Queune from comment #16)
Thanks Frido ! I tested on both personal devbox and sandbox and the display of the button is completely different from the one described and shown on screenshot. The behaviour is also slightly different as the one described as the button is stuck on the bottom of the page so I don't see it before I reach the end of the page. Is that expected ?
See sandbox : https://opac-bz30136.sandboxes.biblibre.eu/cgi-bin/koha/opac-search. pl?idx=&q=a&weight_search=1
I dont reproduce this on you sandbox, button appear as soon as I start scrolling down. Maybe clear the cache with Ctrl+F5
Completely my fault, I always forgot to empty my cache and cookies when I test new CSS... Thanks Frido for this great feature ! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 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=30136 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #134011|0 |1 is obsolete| | --- Comment #21 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 134063 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=134063&action=edit Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov> Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr> 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=30136 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #134012|0 |1 is obsolete| | --- Comment #22 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 134064 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=134064&action=edit Bug 30136: (follow-up) CSS and accessibility update This patch adds the new CSS to the global CSS file. Rebuild the OPAC CSS to test. The patch also moves the JavaScript for the button from opac-bottom.inc into global.js and adds accessibility labels to the generated markup. Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr> 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=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |22.05.00 released in| | Status|Passed QA |Pushed to master -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 --- Comment #23 from Fridolin Somers <fridolin.somers@biblibre.com> --- Pushed to master for 22.05, 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=30136 Kyle M Hall <kyle@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to master |RESOLVED Resolution|--- |FIXED CC| |kyle@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Michal Denar <black23@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |black23@gmail.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=35810 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=30136 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |35810 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=35810 [Bug 35810] Add back to top button to the staff interface -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon@bugs.koha-community.org