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
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.
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.
So much better, thank you Owen!
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>
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.
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>
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.
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'
Created attachment 142330 [details] Video of hover effect
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>
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>
It was caching at my end.. passing qa
Pushed to master for 22.11. Nice work everyone, thanks!