Bug 30136 - Add back to top button when scrolling
Summary: Add back to top button when scrolling
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low new feature (vote)
Assignee: Fridolin Somers
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-02-18 20:42 UTC by Fridolin Somers
Modified: 2022-05-19 06:15 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
22.05.00


Attachments
Bug 30136: Add back to top button to OPAC (1.79 KB, patch)
2022-02-18 20:56 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 30136: [DO NO PUSH] CSS styling for OPAC (1.33 KB, patch)
2022-02-18 20:56 UTC, Fridolin Somers
Details | Diff | Splinter Review
Screenshot with patch (154.60 KB, image/png)
2022-02-18 20:57 UTC, Fridolin Somers
Details
Bug 30136: Add back to top button to OPAC (1.86 KB, patch)
2022-02-18 22:16 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 30136: [DO NO PUSH] CSS styling for OPAC (1.39 KB, patch)
2022-02-18 22:16 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 30136: Add back to top button to OPAC (1.83 KB, patch)
2022-04-12 15:01 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 30136: [DO NO PUSH] CSS styling for OPAC (1.36 KB, patch)
2022-04-12 15:02 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 30136: (follow-up) CSS and accessibility update (3.36 KB, patch)
2022-04-25 11:06 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 30136: Add back to top button to OPAC (1.98 KB, patch)
2022-04-27 09:16 UTC, Séverine Queune
Details | Diff | Splinter Review
Bug 30136: (follow-up) CSS and accessibility update (3.51 KB, patch)
2022-04-27 09:17 UTC, Séverine Queune
Details | Diff | Splinter Review
Bug 30136: Add back to top button to OPAC (2.03 KB, patch)
2022-04-27 12:17 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 30136: (follow-up) CSS and accessibility update (3.57 KB, patch)
2022-04-27 12:17 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Fridolin Somers 2022-02-18 20:42:11 UTC
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.
Comment 1 Fridolin Somers 2022-02-18 20:56:12 UTC
Created attachment 130896 [details] [review]
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
Comment 2 Fridolin Somers 2022-02-18 20:56:31 UTC
Created attachment 130897 [details] [review]
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.
Comment 3 Fridolin Somers 2022-02-18 20:57:10 UTC
Created attachment 130898 [details]
Screenshot with patch
Comment 4 ByWater Sandboxes 2022-02-18 22:16:06 UTC
Created attachment 130902 [details] [review]
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>
Comment 5 ByWater Sandboxes 2022-02-18 22:16:09 UTC
Created attachment 130903 [details] [review]
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>
Comment 6 Barbara Johnson 2022-02-18 22:18:33 UTC
Worked very well.  I tested it on opac-search.pl, opac-detail.pl and various patrons pages.
Comment 7 Katrin Fischer 2022-03-28 22:25:27 UTC
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)
Comment 8 Fridolin Somers 2022-04-12 15:01:39 UTC
Created attachment 133219 [details] [review]
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>
Comment 9 Fridolin Somers 2022-04-12 15:02:03 UTC
Created attachment 133220 [details] [review]
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>
Comment 10 Fridolin Somers 2022-04-12 15:02:44 UTC
(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
Comment 11 Katrin Fischer 2022-04-25 10:01:48 UTC
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!
Comment 12 Owen Leonard 2022-04-25 11:06:25 UTC
Created attachment 133737 [details] [review]
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.
Comment 13 Owen Leonard 2022-04-25 11:40:49 UTC
By the way, Font Awesome provides accessibility suggestions for the version we are using here:

https://fontawesome.com/v4/accessibility/
Comment 14 Séverine Queune 2022-04-26 07:58:19 UTC
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
Comment 15 Fridolin Somers 2022-04-26 08:09:06 UTC
Ah it comes from patch "[DO NO PUSH] CSS styling for OPAC", I set it as obsolete.
Comment 16 Séverine Queune 2022-04-26 08:44:57 UTC
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
Comment 17 Fridolin Somers 2022-04-27 08:59:31 UTC
(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
Comment 18 Séverine Queune 2022-04-27 09:16:57 UTC
Created attachment 134011 [details] [review]
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>
Comment 19 Séverine Queune 2022-04-27 09:17:03 UTC
Created attachment 134012 [details] [review]
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>
Comment 20 Séverine Queune 2022-04-27 09:18:40 UTC
(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 !
Comment 21 Katrin Fischer 2022-04-27 12:17:47 UTC
Created attachment 134063 [details] [review]
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>
Comment 22 Katrin Fischer 2022-04-27 12:17:53 UTC
Created attachment 134064 [details] [review]
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>
Comment 23 Fridolin Somers 2022-04-27 21:22:44 UTC
Pushed to master for 22.05, thanks to everybody involved 🦄