Bug 31754

Summary: Improve appearance of behavior of DataTables controls
Product: Koha Reporter: Lucas Gass <lucas>
Component: ToolsAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Katrin Fischer <katrin.fischer>
Severity: normal    
Priority: P5 - low CC: fridolin.somers, martin.renvoize
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
22.11.00
Bug Depends on: 30952, 31842    
Bug Blocks: 31861    
Attachments: Screenshot of problem
GIF showing revised responsive behavior
Bug 31754: Improve appearance of behavior of DataTables controls
Bug 31754: Improve appearance of behavior of DataTables controls
Bug 31754: Improve appearance of behavior of DataTables controls
Bug 31754: (follow-up) Correct alignment of buttons
Video of hover effect
Bug 31754: Improve appearance of behavior of DataTables controls
Bug 31754: (follow-up) Correct alignment of buttons

Description Lucas Gass 2022-10-12 22:57:28 UTC
Created attachment 141758 [details]
Screenshot of problem

If you bring up a dataTable, like when doing a patron search, and hover over the paginate_button's (first,previous,next,last) you'll notice the rest of the elements in the toolbar move a bit. ( search box, clear filter )

see attachment
Comment 1 Owen Leonard 2022-10-18 15:16:56 UTC
Created attachment 142079 [details]
GIF showing revised responsive behavior

The staff interface update included several changes to DataTables controls which I think were unnecessary (and unrelated to the redesign). I propose to build on some work I'd intended for Bug 30986 to make general improvements. See the attached GIF for a preview.
Comment 2 Owen Leonard 2022-10-18 15:27:49 UTC
Created attachment 142080 [details] [review]
Bug 31754: Improve appearance of behavior of DataTables controls

This patch makes changes to CSS and to the default DataTables DOM
configuration in order to make toolbars work better at various screen
widths.

The patch also makes stylelint corrections to _tables.scss.

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

- Test pages in the staff interface where tables contain multiple pages
  of results, e.g. a patron search.
- Confirm that table information (entries) and controls look correct.
- Confirm that all controls work correctly, including the search field.
- Resize your browser to check how the controls respond at various
  browser widths.
Comment 3 Lucas Gass 2022-10-18 17:41:45 UTC
So much better, thank you Owen!
Comment 4 Lucas Gass 2022-10-18 17:42:33 UTC
Created attachment 142085 [details] [review]
Bug 31754: Improve appearance of behavior of DataTables controls

This patch makes changes to CSS and to the default DataTables DOM
configuration in order to make toolbars work better at various screen
widths.

The patch also makes stylelint corrections to _tables.scss.

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

- Test pages in the staff interface where tables contain multiple pages
  of results, e.g. a patron search.
- Confirm that table information (entries) and controls look correct.
- Confirm that all controls work correctly, including the search field.
- Resize your browser to check how the controls respond at various
  browser widths.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 5 Katrin Fischer 2022-10-18 19:38:35 UTC
I quite like what I see, but leaving it here for now as:

(21:34:00) oleonard: Hm... I think my patch for Bug 31754 doesn't keep the controls on the right. I should revised it.
Comment 6 Katrin Fischer 2022-10-18 19:40:35 UTC
Created attachment 142089 [details] [review]
Bug 31754: Improve appearance of behavior of DataTables controls

This patch makes changes to CSS and to the default DataTables DOM
configuration in order to make toolbars work better at various screen
widths.

The patch also makes stylelint corrections to _tables.scss.

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

- Test pages in the staff interface where tables contain multiple pages
  of results, e.g. a patron search.
- Confirm that table information (entries) and controls look correct.
- Confirm that all controls work correctly, including the search field.
- Resize your browser to check how the controls respond at various
  browser widths.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 7 Owen Leonard 2022-10-19 13:11:25 UTC
Created attachment 142154 [details] [review]
Bug 31754: (follow-up) Correct alignment of buttons

This patch corrects the alignment of the "Columns," "Export," and
"Configure" buttons. The new design has them aligned to the right.
Comment 8 Martin Renvoize 2022-10-21 11:21:28 UTC
This is looking good.. but Lucas's first point isn't addressed... if you hover over the 'first, previous, next, last' page controls, the bold on hover makes the interactive elements on the left 'jiggle'
Comment 9 Martin Renvoize 2022-10-21 11:22:26 UTC
Created attachment 142330 [details]
Video of hover effect
Comment 10 Martin Renvoize 2022-10-24 10:53:27 UTC
Created attachment 142478 [details] [review]
Bug 31754: Improve appearance of behavior of DataTables controls

This patch makes changes to CSS and to the default DataTables DOM
configuration in order to make toolbars work better at various screen
widths.

The patch also makes stylelint corrections to _tables.scss.

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

- Test pages in the staff interface where tables contain multiple pages
  of results, e.g. a patron search.
- Confirm that table information (entries) and controls look correct.
- Confirm that all controls work correctly, including the search field.
- Resize your browser to check how the controls respond at various
  browser widths.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 11 Martin Renvoize 2022-10-24 10:53:33 UTC
Created attachment 142479 [details] [review]
Bug 31754: (follow-up) Correct alignment of buttons

This patch corrects the alignment of the "Columns," "Export," and
"Configure" buttons. The new design has them aligned to the right.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 12 Martin Renvoize 2022-10-24 10:53:59 UTC
It was caching at my end.. passing qa
Comment 13 Tomás Cohen Arazi 2022-10-24 14:11:39 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!