Bug 27440 - Improve structure and style of result toolbars in the OPAC
Summary: Improve structure and style of result toolbars in the OPAC
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords: Manual
Depends on:
Blocks: 27731
  Show dependency treegraph
 
Reported: 2021-01-15 16:31 UTC by Owen Leonard
Modified: 2022-06-06 20:25 UTC (History)
4 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:
21.05.00
Circulation function:


Attachments
Bug 27440: Improve structure and style of result toolbars in the OPAC (40.01 KB, patch)
2021-01-15 18:39 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27440: Improve structure and style of result toolbars in the OPAC (40.04 KB, patch)
2021-01-19 17:39 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 27440: Improve structure and style of result toolbars in the OPAC (40.08 KB, patch)
2021-01-27 22:07 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 27440: Improve structure and style of result toolbars in the OPAC (40.10 KB, patch)
2021-01-28 08:45 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2021-01-15 16:31:27 UTC
Several pages in the OPAC follow a similar pattern: Above the table of records (search results, lists, suggestions, etc) is a toolbar with various controls: Highlight, select all, place hold, etc.

I think some improvements can be made to the markup and style of these areas of the template to make them work better and look more consistent.
Comment 1 Owen Leonard 2021-01-15 18:39:45 UTC
Created attachment 115210 [details] [review]
Bug 27440: Improve structure and style of result toolbars in the OPAC

This patch makes markup and CSS changes to areas of the OPAC classed
with "selections-toolbar," an area of controls found at the top of some
lists of titles: The cart, search results, search history, lists, and
suggestions.

To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Perform a search in the OPAC. On the search results page, confirm that
  the various controls work correctly:
  - With OpacHighlightedWords enabled, hightlight and unhighlight links
  - Select all and clear all links
  - Selecting one or more checkboxes should enable the "Select titles
    to..." menu.
    - Test that adding items to the cart and lists works correctly.
    - Test that placing multiple holds work.
    - Test that tagging multiple items works.
- From the search results page, add multiple items to the cart.
  - Open the cart and confirm that the the controls described above
    continue to work correctly.
- Open the search history page, confirm that the toolbar controls work
  correctly for all four categories: Current session catalog searches;
  previous session catalog searches; current session authority searches;
  previous session authority searches.
- On the purchase suggestions page, confirm that "select all" and "clear
  all" work, and that deleting multiple suggestions from the toolbar
  link works.
- On the list contents page test the same controls: selection,
  multi-hold, tagging, and "Remove from list."
Comment 2 Martin Renvoize (ashimema) 2021-01-19 17:39:40 UTC
Created attachment 115342 [details] [review]
Bug 27440: Improve structure and style of result toolbars in the OPAC

This patch makes markup and CSS changes to areas of the OPAC classed
with "selections-toolbar," an area of controls found at the top of some
lists of titles: The cart, search results, search history, lists, and
suggestions.

To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Perform a search in the OPAC. On the search results page, confirm that
  the various controls work correctly:
  - With OpacHighlightedWords enabled, hightlight and unhighlight links
  - Select all and clear all links
  - Selecting one or more checkboxes should enable the "Select titles
    to..." menu.
    - Test that adding items to the cart and lists works correctly.
    - Test that placing multiple holds work.
    - Test that tagging multiple items works.
- From the search results page, add multiple items to the cart.
  - Open the cart and confirm that the the controls described above
    continue to work correctly.
- Open the search history page, confirm that the toolbar controls work
  correctly for all four categories: Current session catalog searches;
  previous session catalog searches; current session authority searches;
  previous session authority searches.
- On the purchase suggestions page, confirm that "select all" and "clear
  all" work, and that deleting multiple suggestions from the toolbar
  link works.
- On the list contents page test the same controls: selection,
  multi-hold, tagging, and "Remove from list."

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 3 Martin Renvoize (ashimema) 2021-01-19 17:40:24 UTC
I like the consistency this introduces, and working through the test plan yielded no failures..

Signing off.
Comment 4 Katrin Fischer 2021-01-27 22:07:40 UTC
Created attachment 115911 [details] [review]
Bug 27440: Improve structure and style of result toolbars in the OPAC

This patch makes markup and CSS changes to areas of the OPAC classed
with "selections-toolbar," an area of controls found at the top of some
lists of titles: The cart, search results, search history, lists, and
suggestions.

To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Perform a search in the OPAC. On the search results page, confirm that
  the various controls work correctly:
  - With OpacHighlightedWords enabled, hightlight and unhighlight links
  - Select all and clear all links
  - Selecting one or more checkboxes should enable the "Select titles
    to..." menu.
    - Test that adding items to the cart and lists works correctly.
    - Test that placing multiple holds work.
    - Test that tagging multiple items works.
- From the search results page, add multiple items to the cart.
  - Open the cart and confirm that the the controls described above
    continue to work correctly.
- Open the search history page, confirm that the toolbar controls work
  correctly for all four categories: Current session catalog searches;
  previous session catalog searches; current session authority searches;
  previous session authority searches.
- On the purchase suggestions page, confirm that "select all" and "clear
  all" work, and that deleting multiple suggestions from the toolbar
  link works.
- On the list contents page test the same controls: selection,
  multi-hold, tagging, and "Remove from list."

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 5 Jonathan Druart 2021-01-28 08:45:03 UTC
Created attachment 115925 [details] [review]
Bug 27440: Improve structure and style of result toolbars in the OPAC

This patch makes markup and CSS changes to areas of the OPAC classed
with "selections-toolbar," an area of controls found at the top of some
lists of titles: The cart, search results, search history, lists, and
suggestions.

To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Perform a search in the OPAC. On the search results page, confirm that
  the various controls work correctly:
  - With OpacHighlightedWords enabled, hightlight and unhighlight links
  - Select all and clear all links
  - Selecting one or more checkboxes should enable the "Select titles
    to..." menu.
    - Test that adding items to the cart and lists works correctly.
    - Test that placing multiple holds work.
    - Test that tagging multiple items works.
- From the search results page, add multiple items to the cart.
  - Open the cart and confirm that the the controls described above
    continue to work correctly.
- Open the search history page, confirm that the toolbar controls work
  correctly for all four categories: Current session catalog searches;
  previous session catalog searches; current session authority searches;
  previous session authority searches.
- On the purchase suggestions page, confirm that "select all" and "clear
  all" work, and that deleting multiple suggestions from the toolbar
  link works.
- On the list contents page test the same controls: selection,
  multi-hold, tagging, and "Remove from list."

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 6 Jonathan Druart 2021-01-28 08:45:13 UTC
Added missing signed-off-by line from QA.
Comment 7 Jonathan Druart 2021-01-28 08:52:45 UTC
Before: https://snipboard.io/6A5Hbw.jpg
After : https://snipboard.io/rcvjpn.jpg

On Firefox.

1. I don't think the green is nice and it's not the same as the "Go" button in the header.

2. Is the style change of the dropdown (Add to) expected? Looks nicer before IMO.
Comment 8 Owen Leonard 2021-01-28 12:30:36 UTC
The style of the dropdown is expected. The style is added in order to make the dropdowns consistent with each other. For example, here's what it looks like before the patch in Firefox on macOS:

https://snipboard.io/SDwj8y.jpg

The color green is different than the "Go" button because it's disabled. Here's the enabled state:

https://snipboard.io/Lzy1cS.jpg
Comment 9 Jonathan Druart 2021-01-28 16:34:57 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 10 Fridolin Somers 2021-02-05 15:31:59 UTC
Enhancement not pushed to 20.11.x