Building on Bug 39483, I'm working to convert the library groups forms to the new grid layout. This will include some changes to the .fg form grid to allow for defining a couple of different widths for the input grid item and to convert the grid-related media queries to be container queries instead. This allows the form grid to be responsive based on width of the the container (<fieldset) rather than the width of the page.
Created attachment 181714 [details] [review] Bug 39780: Update library groups form to use grid layout This patch updates the library groups page to convert forms to use the grid layout introduced in Bug 39483. Some changes are made the global form-grid CSS: - Use container queries rather than media queries to control the responsive behavior of forms using the grid - Add ".input-md" and ".input-sm" classes to be used when a form's <input> corresponds to a database column which is smaller. In this case: ".input-sm" for the row containing branches.branchcode (varchar 10) ".input-md" for the row containing branches.branchzip (varchar 25) - These classes have been added to branches.tt The library groups template has been updated with the new form grid markup. To test, apply the patch and rebuild the staff interface CSS. - Go to Administration -> Libraries -> New library - In the entry form, most form fields should equally wide. - The library zipcode, IP, and MARC organization code fields should be narrower. - The library code field should be narrowest. - Go to Administration -> Library groups -> New group. The "Add group" form should be laid out vertically. - Also test the form shown when editing a group. Sponsored-by: Athens County Public Libraries
Created attachment 183145 [details] [review] Bug 39780: Update library groups form to use grid layout This patch updates the library groups page to convert forms to use the grid layout introduced in Bug 39483. Some changes are made the global form-grid CSS: - Use container queries rather than media queries to control the responsive behavior of forms using the grid - Add ".input-md" and ".input-sm" classes to be used when a form's <input> corresponds to a database column which is smaller. In this case: ".input-sm" for the row containing branches.branchcode (varchar 10) ".input-md" for the row containing branches.branchzip (varchar 25) - These classes have been added to branches.tt The library groups template has been updated with the new form grid markup. To test, apply the patch and rebuild the staff interface CSS. - Go to Administration -> Libraries -> New library - In the entry form, most form fields should equally wide. - The library zipcode, IP, and MARC organization code fields should be narrower. - The library code field should be narrowest. - Go to Administration -> Library groups -> New group. The "Add group" form should be laid out vertically. - Also test the form shown when editing a group. Sponsored-by: Athens County Public Libraries
I also have a branch with changes to most Administration templates if anyone would like more examples of the direction I'm suggesting: https://gitlab.com/koha-dev/koha-dev/-/commits/wip-admin-form-grids
Created attachment 183679 [details] [review] Bug 39780: Update library groups form to use grid layout This patch updates the library groups page to convert forms to use the grid layout introduced in Bug 39483. Some changes are made the global form-grid CSS: - Use container queries rather than media queries to control the responsive behavior of forms using the grid - Add ".input-md" and ".input-sm" classes to be used when a form's <input> corresponds to a database column which is smaller. In this case: ".input-sm" for the row containing branches.branchcode (varchar 10) ".input-md" for the row containing branches.branchzip (varchar 25) - These classes have been added to branches.tt The library groups template has been updated with the new form grid markup. To test, apply the patch and rebuild the staff interface CSS. - Go to Administration -> Libraries -> New library - In the entry form, most form fields should equally wide. - The library zipcode, IP, and MARC organization code fields should be narrower. - The library code field should be narrowest. - Go to Administration -> Library groups -> New group. The "Add group" form should be laid out vertically. - Also test the form shown when editing a group. Sponsored-by: Athens County Public Libraries Signed-off-by: David Nind <david@davidnind.com>
I've signed off, but have some comments: 1. Library add form - Yes/No option fields: I guess this is generic, but it seems odd to have very wide fields when the select list is a Yes or No option. 2. Library add form - Library code field: when you narrow the screen width, the width becomes wider. 3. Library groups - add form: I'm not sure why this is in a modal vs using a normal form (bearing in mind that this is the way it is currently). 4. Library groups - add form: for the checkbox fields for features, I find it weird that it now starts with the labels to the left and the checkboxes to the right, then when the screen is narrow it changes back to the way it was before the patch was applied (check boxes to the left and the labels to right, although in bold). It just doesn't look right to me. 5. Library groups - edit form: nothing seems to have changed for me, except that the feature labels are in bold. When you resize the screen, nothing changes.