Bug 35810 - Add back to top button to the staff interface
Summary: Add back to top button to the staff interface
Status: Passed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Thibaud Guillot
QA Contact: Emily Lamancusa
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2024-01-15 09:24 UTC by Thibaud Guillot
Modified: 2024-02-20 14:55 UTC (History)
4 users (show)

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


Attachments
Bug 35810 : Add back to top button to staff result page (1.98 KB, patch)
2024-01-15 09:28 UTC, Thibaud Guillot
Details | Diff | Splinter Review
Bug 35810 : Add back to top button to staff result page (1.98 KB, patch)
2024-01-15 10:20 UTC, Thibaud Guillot
Details | Diff | Splinter Review
Bug 35810 : Add back to top button to staff result page (1.98 KB, patch)
2024-01-15 10:22 UTC, Thibaud Guillot
Details | Diff | Splinter Review
Bug 35810: Add back to top button to staff result page (2.03 KB, patch)
2024-01-17 14:20 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 35810: Add back to top button on staff pages (2.15 KB, patch)
2024-02-08 10:11 UTC, Thibaud Guillot
Details | Diff | Splinter Review
Bug 35810: Add back to top button on staff pages (2.26 KB, patch)
2024-02-08 13:17 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 35810: Add back to top button on staff pages (2.32 KB, patch)
2024-02-20 14:35 UTC, Emily Lamancusa
Details | Diff | Splinter Review
Bug 35810: (QA follow-up) Add aria label for accessibility (1.22 KB, patch)
2024-02-20 14:51 UTC, Emily Lamancusa
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Thibaud Guillot 2024-01-15 09:24:27 UTC
Hi all, 

As in bug 30136, I'd like to add a "back to top" button on the search results page. I put the same code as the opac and a bit of css to get a nice result. Feel free to test it and give feedback :)
Comment 1 Thibaud Guillot 2024-01-15 09:28:33 UTC Comment hidden (obsolete)
Comment 2 Thibaud Guillot 2024-01-15 10:20:37 UTC Comment hidden (obsolete)
Comment 3 Thibaud Guillot 2024-01-15 10:22:20 UTC
Created attachment 161034 [details] [review]
Bug 35810 : Add back to top button to staff result page

Test plan:

1) Apply this patch and rebuild css with 'yarn build'
2) Perform a search from catalogue
3) Scroll down to see the button appear and scroll up to see it disappear
Comment 4 Owen Leonard 2024-01-17 14:20:29 UTC
Created attachment 161111 [details] [review]
Bug 35810: Add back to top button to staff result page

Test plan:

1) Apply this patch and rebuild css with 'yarn build'
2) Perform a search from catalogue
3) Scroll down to see the button appear and scroll up to see it
   disappear

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 5 Emily Lamancusa 2024-02-07 20:13:54 UTC
This is great! Why not put it in staff-global.js, though? It would be nice to have a back-to-top button on other pages as well.
Comment 6 Thibaud Guillot 2024-02-08 10:11:42 UTC
Created attachment 161882 [details] [review]
Bug 35810: Add back to top button on staff pages

Test plan:

1) Apply this patch and rebuild css with 'yarn build'
2) For example, perform a search from catalogue
3) Scroll down to see the button appear and scroll up to see it
   disappear

Note that it's works also on patron search etc..
Comment 7 Pedro Amorim 2024-02-08 13:17:33 UTC
Created attachment 161913 [details] [review]
Bug 35810: Add back to top button on staff pages

Test plan:

1) Apply this patch and rebuild css with 'yarn build'
2) For example, perform a search from catalogue
3) Scroll down to see the button appear and scroll up to see it
   disappear

Note that it's works also on patron search etc..

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Comment 8 Pedro Amorim 2024-02-08 13:19:02 UTC
Putting this back to SO and re-adding Owen's SO line.

This looks good although it appears to be out of sync with the work from bug 30136.
OPAC button is .btn-primary, whereas this one is .btn-default.
OPAC's button has the aria-label and title properties, this button does not.

I don't think any of the above are blockers, just pointing it out as it may or may not be intentional.

Would be great to have this code DRY (hence adding 35716 as "see also"), but I don't think we're there yet.
Comment 9 Thibaud Guillot 2024-02-08 13:22:26 UTC
Thanks Pedro for your feedback.
To answer your question about the style .btn-primary would give a style similar to the submit button (yellow) so I opted for a simpler style. Of course, if several opinions are in the same direction, all this can be changed.
Comment 10 Emily Lamancusa 2024-02-20 14:35:16 UTC
Created attachment 162296 [details] [review]
Bug 35810: Add back to top button on staff pages

Test plan:

1) Apply this patch and rebuild css with 'yarn build'
2) For example, perform a search from catalogue
3) Scroll down to see the button appear and scroll up to see it
   disappear

Note that it's works also on patron search etc..

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Signed-off-by: Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov>
Comment 11 Emily Lamancusa 2024-02-20 14:51:38 UTC
Created attachment 162298 [details] [review]
Bug 35810: (QA follow-up) Add aria label for accessibility

Signed-off-by: Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov>
Comment 12 Emily Lamancusa 2024-02-20 14:55:25 UTC
I added a follow-up to give the button an aria-label for accessibility (similar to bug 30136). Otherwise, it looks great, and QA script is happy! Passing QA