Bug 31754 - Improve appearance of behavior of DataTables controls
Summary: Improve appearance of behavior of DataTables controls
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Tools (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Katrin Fischer
URL:
Keywords:
Depends on: 30952 31842
Blocks: 31861
  Show dependency treegraph
 
Reported: 2022-10-12 22:57 UTC by Lucas Gass
Modified: 2023-12-28 20:42 UTC (History)
2 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:
22.11.00


Attachments
Screenshot of problem (5.29 KB, image/png)
2022-10-12 22:57 UTC, Lucas Gass
Details
GIF showing revised responsive behavior (3.21 MB, image/gif)
2022-10-18 15:16 UTC, Owen Leonard
Details
Bug 31754: Improve appearance of behavior of DataTables controls (20.66 KB, patch)
2022-10-18 15:27 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 31754: Improve appearance of behavior of DataTables controls (20.71 KB, patch)
2022-10-18 17:42 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 31754: Improve appearance of behavior of DataTables controls (20.77 KB, patch)
2022-10-18 19:40 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 31754: (follow-up) Correct alignment of buttons (1.13 KB, patch)
2022-10-19 13:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Video of hover effect (80.46 KB, video/webm)
2022-10-21 11:22 UTC, Martin Renvoize
Details
Bug 31754: Improve appearance of behavior of DataTables controls (20.83 KB, patch)
2022-10-24 10:53 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 31754: (follow-up) Correct alignment of buttons (1.19 KB, patch)
2022-10-24 10:53 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 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!