Bug 26164

Summary: Replace OPAC table sort icons with SVG
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: lucas, sally.healey, testopia
Version: Main   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=26060
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00
Bug Depends on: 20168    
Bug Blocks:    
Attachments: Bug 26164: Replace OPAC table sort icons with SVG
Bug 26164: Replace OPAC table sort icons with SVG
Bug 26164: Replace OPAC table sort icons with SVG

Description Owen Leonard 2020-08-06 15:49:19 UTC
Like Bug 26060: DataTables in the OPAC have sorting icons added to the headers via a background PNG image. I suggest we replace these with data-url SVG images which will look better, especially on higher-resolution screens or at higher zoom settings.
Comment 1 Owen Leonard 2020-09-09 13:59:48 UTC
Created attachment 109817 [details] [review]
Bug 26164: Replace OPAC table sort icons with SVG

This patch modifies the OAPC CSS to convert table sorting icons from PNG
to SVG. These icons are added via background-image data-urls, so only
the SCSS file is modified.

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

- Clear your browser cache if necessary
- View any DataTable in the OPAC, for instance the table of
  checkouts under the logged-in user's "your summary" tab.
- Confirm that the sorting icons in the table headers look
  correct in each state: Sorted ascending, sorted descending, and
  unsorted.
Comment 2 David Nind 2020-09-18 00:30:28 UTC
Created attachment 110309 [details] [review]
Bug 26164: Replace OPAC table sort icons with SVG

This patch modifies the OAPC CSS to convert table sorting icons from PNG
to SVG. These icons are added via background-image data-urls, so only
the SCSS file is modified.

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

- Clear your browser cache if necessary
- View any DataTable in the OPAC, for instance the table of
  checkouts under the logged-in user's "your summary" tab.
- Confirm that the sorting icons in the table headers look
  correct in each state: Sorted ascending, sorted descending, and
  unsorted.

Signed-off-by: David Nind <david@davidnind.com>
Comment 3 Katrin Fischer 2020-09-20 17:31:26 UTC
Created attachment 110428 [details] [review]
Bug 26164: Replace OPAC table sort icons with SVG

This patch modifies the OAPC CSS to convert table sorting icons from PNG
to SVG. These icons are added via background-image data-urls, so only
the SCSS file is modified.

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

- Clear your browser cache if necessary
- View any DataTable in the OPAC, for instance the table of
  checkouts under the logged-in user's "your summary" tab.
- Confirm that the sorting icons in the table headers look
  correct in each state: Sorted ascending, sorted descending, and
  unsorted.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 4 Jonathan Druart 2020-09-29 12:30:18 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 5 Lucas Gass 2020-10-20 17:06:32 UTC
enhancement will not be backported to 20.05.x