Bug 39483 - Update staff interface forms to use grid layout
Summary: Update staff interface forms to use grid layout
Status: Pushed to main
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: roadmap_25_11
Depends on:
Blocks: 39780
  Show dependency treegraph
 
Reported: 2025-03-28 18:00 UTC by Owen Leonard
Modified: 2025-07-02 16:17 UTC (History)
7 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:
25.05.00
Circulation function:


Attachments
Bug 39483: Update library edit form to use grid layout (35.82 KB, patch)
2025-03-28 18:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 39483: Update library edit form to use grid layout (34.95 KB, patch)
2025-04-02 11:10 UTC, Owen Leonard
Details | Diff | Splinter Review
Library form (responsive display) (39.20 KB, image/png)
2025-04-02 13:56 UTC, Felicie
Details
Bug 39483: Update library edit form to use grid layout (34.94 KB, patch)
2025-04-02 14:30 UTC, Felicie
Details | Diff | Splinter Review
Bug 39483: Update library edit form to use grid layout (35.00 KB, patch)
2025-04-16 18:31 UTC, Paul Derscheid
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-03-28 18:00:31 UTC
I would like to propose a new standard for how we display forms in the staff interface. Using CSS grids we can make forms more flexible and responsive.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid
https://css-tricks.com/snippets/css/complete-guide-grid/
Comment 1 Owen Leonard 2025-03-28 18:31:15 UTC
Created attachment 179858 [details] [review]
Bug 39483: Update library edit form to use grid layout

This patch introduces a new set of CSS styles for forms in the staff
interface using CSS grids for layout. It's intended to make forms more
responsive.

The basic structure looks like this:

<fieldset class="fg"> /* fg = form grid */
    <div class="fg-row">
        <div class="fg-label">
            <label for="label">Label: </label>
        </div>
        <div class="fg-input">
            <input type="text" name="field" value="field" />
       </div>
   </div>
</fieldset>

Please feel free to disagree with the class names or the markup itself.
I was trying to strike a balance between brevity and flexibility.

Why not use build-in Bootstrap CSS for forms? Bootstrap does have a lot
of forms CSS available, but the form layout they offer are built with
flexbox, not grids. I think the grid layout gives us better control over
the appearance we want.

The patch also includes some adjustments to Flatpickr CSS in order to
make it work with this new style of form as well as the "old" ones.

The patch includes the CSS changes and an update to the library
administration page as a proof of concept.

To test, apply the patch and rebuild the staff interface CSS.

- Go to Administration -> Libraries
- Edit a library
- Confirm that the form looks good and functions correctly.
- Test the page at various browser widths to confirm that responsiveness
  is improved.
- Test another form--patron edit for example--to confirm that everything
  looks good there, especially Flackpickr inputs.

Sponsored-by: Athens County Public Libraries
Comment 2 Jesse Maseto 2025-04-02 09:30:20 UTC
Hi Owen,

This patch doesn't apply.

There are conflicts.

-Jesse
Comment 3 Owen Leonard 2025-04-02 11:10:06 UTC Comment hidden (obsolete)
Comment 4 Felicie 2025-04-02 13:50:21 UTC
Hello,

The library form works well, but I think there isn’t enough spacing between the fields, making it difficult to distinguish them properly. There should be more space above each field label.
The responsive design doesn’t seem to work correctly, as the fields exceed the screen width on smaller devices (tested using the browser’s inspector tool (Chromium and Firefox) to simulate different screen sizes).

The patron form looks good but seems to have the same issue with responsiveness.
Comment 5 Felicie 2025-04-02 13:56:55 UTC
Created attachment 180384 [details]
Library form (responsive display)
Comment 6 Owen Leonard 2025-04-02 14:09:08 UTC
(In reply to Felicie from comment #5)
> Created attachment 180384 [details]
> Library form (responsive display)

This is what it looks like when the CSS hasn't been rebuilt. If you're using a sandbox, do Actions -> Build CSS and JS.

My test plan was unclear about the patron edit form... It is unchanged, but I wanted to ask that it be checked to make sure the new CSS doesn't conflict badly with the old CSS. Both updated and non-updated forms should work well.
Comment 7 Felicie 2025-04-02 14:30:46 UTC
Created attachment 180403 [details] [review]
Bug 39483: Update library edit form to use grid layout

This patch introduces a new set of CSS styles for forms in the staff
interface using CSS grids for layout. It's intended to make forms more
responsive.

The basic structure looks like this:

<fieldset class="fg"> /* fg = form grid */
    <div class="fg-row">
        <div class="fg-label">
            <label for="label">Label: </label>
        </div>
        <div class="fg-input">
            <input type="text" name="field" value="field" />
       </div>
   </div>
</fieldset>

Please feel free to disagree with the class names or the markup itself.
I was trying to strike a balance between brevity and flexibility.

Why not use build-in Bootstrap CSS for forms? Bootstrap does have a lot
of forms CSS available, but the form layout they offer are built with
flexbox, not grids. I think the grid layout gives us better control over
the appearance we want.

The patch also includes some adjustments to Flatpickr CSS in order to
make it work with this new style of form as well as the "old" ones.

The patch includes the CSS changes and an update to the library
administration page as a proof of concept.

To test, apply the patch and rebuild the staff interface CSS.

- Go to Administration -> Libraries
- Edit a library
- Confirm that the form looks good and functions correctly.
- Test the page at various browser widths to confirm that responsiveness
  is improved.
- Test another form--patron edit for example--to confirm that everything
  looks good there, especially Flackpickr inputs.

Sponsored-by: Athens County Public Libraries
Comment 8 Felicie 2025-04-02 14:33:57 UTC
Ok, sorry! It's working perfectly.
Comment 9 Owen Leonard 2025-04-02 14:42:28 UTC
Thank you for testing!
Comment 10 Paul Derscheid 2025-04-16 18:31:11 UTC
Created attachment 181044 [details] [review]
Bug 39483: Update library edit form to use grid layout

This patch introduces a new set of CSS styles for forms in the staff
interface using CSS grids for layout. It's intended to make forms more
responsive.

The basic structure looks like this:

<fieldset class="fg"> /* fg = form grid */
    <div class="fg-row">
        <div class="fg-label">
            <label for="label">Label: </label>
        </div>
        <div class="fg-input">
            <input type="text" name="field" value="field" />
       </div>
   </div>
</fieldset>

Please feel free to disagree with the class names or the markup itself.
I was trying to strike a balance between brevity and flexibility.

Why not use build-in Bootstrap CSS for forms? Bootstrap does have a lot
of forms CSS available, but the form layout they offer are built with
flexbox, not grids. I think the grid layout gives us better control over
the appearance we want.

The patch also includes some adjustments to Flatpickr CSS in order to
make it work with this new style of form as well as the "old" ones.

The patch includes the CSS changes and an update to the library
administration page as a proof of concept.

To test, apply the patch and rebuild the staff interface CSS.

- Go to Administration -> Libraries
- Edit a library
- Confirm that the form looks good and functions correctly.
- Test the page at various browser widths to confirm that responsiveness
  is improved.
- Test another form--patron edit for example--to confirm that everything
  looks good there, especially Flackpickr inputs.

Sponsored-by: Athens County Public Libraries
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Comment 11 Paul Derscheid 2025-04-16 18:35:09 UTC
This can probably be discussed further, but there's nothing blocking QA in this POC.

Owen already has some suggestions for future improvements, but they just require SCSS updates, the class names can stay.

Thought about the class names, but I think this is already a very good solution that won't conflict with future bootstrap additions and is not too verbose.
Comment 12 Owen Leonard 2025-04-17 13:26:33 UTC
I added a page to the wiki with some details: https://wiki.koha-community.org/wiki/Grid_Layout_for_Forms
Comment 13 Katrin Fischer 2025-04-25 17:28:17 UTC
Pushed for 25.05!

Well done everyone, thank you!