Bug 5287 - Add floating toolbar to search results in OPAC
Summary: Add floating toolbar to search results in OPAC
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Bugs List
URL:
Keywords:
Depends on:
Blocks: 23096
  Show dependency treegraph
 
Reported: 2010-10-06 21:58 UTC by lmschatt
Modified: 2019-07-25 11:16 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:
19.11.00


Attachments
Bug 5287: Add floating toolbar to search results in OPAC (6.79 KB, patch)
2019-06-11 15:55 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 5287: Add floating toolbar to search results in OPAC (28.79 KB, patch)
2019-06-11 15:59 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 5287: Add floating toolbar to search results in OPAC (28.87 KB, patch)
2019-06-11 18:06 UTC, Liz Rea
Details | Diff | Splinter Review
Bug 5287: (QA follow-up) update deprecated button (1.37 KB, patch)
2019-06-11 18:06 UTC, Liz Rea
Details | Diff | Splinter Review
Bug 5287: Add floating toolbar to search results in OPAC (28.93 KB, patch)
2019-06-17 20:46 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 5287: (QA follow-up) update deprecated button (1.42 KB, patch)
2019-06-17 20:46 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 5287: Add floating toolbar to search results in OPAC (28.90 KB, patch)
2019-06-24 15:05 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 5287: (QA follow-up) update deprecated button (1.42 KB, patch)
2019-06-24 15:05 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 5287: (RM follow-up) Make tests basket compatible (2.13 KB, patch)
2019-06-25 15:23 UTC, Martin Renvoize
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description lmschatt 2010-10-06 21:58:55 UTC
After doing a search in the OPAC, the following options appear at the top of each page of results:
Select All
Clear All
Highlight / Unhighlight
Add to:
Place Hold

At the bottom of the page of search results, you can navigate to other pages of search results.

It would be nice to be able to do all of those at either the top or the bottom of the page. I often scroll down the list, checking off items to add to the cart. I then have scroll all the way back up to add them, and then scroll all the way back down to navigate to the next page. It would be nice to eliminate some of the scrolling.
Comment 1 Nicole C. Engard 2013-02-05 01:44:03 UTC
The page navigation has been copied to the top in 3.10, but the other options are not at the bottom.

Nicole
Comment 2 Katrin Fischer 2019-05-04 12:44:39 UTC
Fixed by using a floating toolbar in staff. Maybe something similar could be thought of for the OPAC?
Comment 3 Owen Leonard 2019-06-11 15:55:48 UTC Comment hidden (obsolete)
Comment 4 Owen Leonard 2019-06-11 15:59:26 UTC Comment hidden (obsolete)
Comment 5 Liz Rea 2019-06-11 18:06:43 UTC Comment hidden (obsolete)
Comment 6 Liz Rea 2019-06-11 18:06:51 UTC Comment hidden (obsolete)
Comment 7 Katrin Fischer 2019-06-17 20:46:48 UTC
Created attachment 90700 [details] [review]
Bug 5287: Add floating toolbar to search results in OPAC

This patch adds the "hc-sticky" JavaScript library to the OPAC and uses
it to make the search results toolbar "stick" to the top of the page as
the user scrolls down.

This patch also moves search results pagination into the toolbar so that
pagination links are available. Font Awesome icons are added to the
pagination include to replace arrow HTML entities.

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 pages
   of results. Confirm that the toolbar "sticks" and that all controls
   in the toolbar work correctly.
 - Test at various browser widths to confirm that it adapt well to
   various sizes.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 8 Katrin Fischer 2019-06-17 20:46:52 UTC
Created attachment 90701 [details] [review]
Bug 5287: (QA follow-up) update deprecated button

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 9 Martin Renvoize 2019-06-24 14:45:36 UTC
Sorry Owen.. I think a tidying push of yours I recently pushed knocked this one out..

Setting to Patch doesn't apply as I think you're better placed to rebase it and keep the tidier code than I am.

Thanks
Comment 10 Owen Leonard 2019-06-24 15:05:39 UTC
Created attachment 90952 [details] [review]
Bug 5287: Add floating toolbar to search results in OPAC

This patch adds the "hc-sticky" JavaScript library to the OPAC and uses
it to make the search results toolbar "stick" to the top of the page as
the user scrolls down.

This patch also moves search results pagination into the toolbar so that
pagination links are available. Font Awesome icons are added to the
pagination include to replace arrow HTML entities.

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 pages
   of results. Confirm that the toolbar "sticks" and that all controls
   in the toolbar work correctly.
 - Test at various browser widths to confirm that it adapt well to
   various sizes.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 11 Owen Leonard 2019-06-24 15:05:42 UTC
Created attachment 90953 [details] [review]
Bug 5287: (QA follow-up) update deprecated button

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 12 Martin Renvoize 2019-06-24 16:14:47 UTC
Nice work!

Pushed to master for 19.11.00
Comment 13 Martin Renvoize 2019-06-25 12:57:29 UTC
This breaks the selenium regression tests for removing items from your basket functionality.

It only appears to break the tests however as I can't replicate the issue in real life.

I've drawn a blank on the tests.. soliciting help from selenium gurus.
Comment 14 Martin Renvoize 2019-06-25 15:23:36 UTC
Created attachment 91001 [details] [review]
Bug 5287: (RM follow-up) Make tests basket compatible

The selenium tests for addtobasket/removefrombasket started to fail
after the introduction of bug 5287. It turns out that a selenium click
handler will trigger a scroll event if the element you're trying to
click isn't in the view port. Unfortunately it scrolls the viewport just
enough for the element to come on screen but that also triggers the
floating toolbar in this case which ends up floating directly over the
element we want to 'click' and so the click rightfully fails as the
element is not 'clickable'.

This patch works around the issue by setting the window size to being a
HD screen in portrait orientation and therefore negates the need for
scrolling to put the elements in within the viewport.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 15 Martin Renvoize 2019-06-25 16:01:55 UTC
Nice work!

Pushed to master for 19.11.00
Comment 16 Jonathan Druart 2019-06-26 13:20:44 UTC
(In reply to Martin Renvoize from comment #14)
> Created attachment 91001 [details] [review] [review]
> Bug 5287: (RM follow-up) Make tests basket compatible
> 
> The selenium tests for addtobasket/removefrombasket started to fail
> after the introduction of bug 5287. It turns out that a selenium click
> handler will trigger a scroll event if the element you're trying to
> click isn't in the view port. Unfortunately it scrolls the viewport just
> enough for the element to come on screen but that also triggers the
> floating toolbar in this case which ends up floating directly over the
> element we want to 'click' and so the click rightfully fails as the
> element is not 'clickable'.
> 
> This patch works around the issue by setting the window size to being a
> HD screen in portrait orientation and therefore negates the need for
> scrolling to put the elements in within the viewport.
> 
> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

The error was:
koha_1       | Error while executing command: clickElement: An unknown server-side error occurred while processing the command.: Element is not clickable at point (599.0999755859375, 10.133331298828125). Other element would receive the click: <div id="top-pages" class="pull-left"></div>
Comment 17 Fridolin SOMERS 2019-07-25 11:16:24 UTC
Enhancement not pushed to 19.05.x