Bug 39780 - Update library groups form to use grid layout
Summary: Update library groups form to use grid layout
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 39483
Blocks: 40113
  Show dependency treegraph
 
Reported: 2025-04-29 17:38 UTC by Owen Leonard
Modified: 2025-07-01 20:25 UTC (History)
2 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 39780: Update library groups form to use grid layout (30.53 KB, patch)
2025-04-30 11:33 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 39780: Update library groups form to use grid layout (38.21 KB, patch)
2025-06-10 17:58 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 39780: Update library groups form to use grid layout (38.25 KB, patch)
2025-07-01 20:16 UTC, David Nind
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2025-04-29 17:38:00 UTC
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.
Comment 1 Owen Leonard 2025-04-30 11:33:37 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2025-06-10 17:58:58 UTC
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
Comment 3 Owen Leonard 2025-06-25 16:43:59 UTC
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
Comment 4 David Nind 2025-07-01 20:16:06 UTC
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>
Comment 5 David Nind 2025-07-01 20:25:07 UTC
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.