Summary: | Update staff interface forms to use grid layout | ||
---|---|---|---|
Product: | Koha | Reporter: | Owen Leonard <oleonard> |
Component: | Templates | Assignee: | Owen Leonard <oleonard> |
Status: | Pushed to main --- | QA Contact: | Testopia <testopia> |
Severity: | enhancement | ||
Priority: | P5 - low | CC: | dcook, felicie.thiery, jesse, katrin.fischer, lisette, paul.derscheid, phil |
Version: | Main | Keywords: | roadmap_25_11 |
Hardware: | All | ||
OS: | All | ||
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: | |
Bug Depends on: | |||
Bug Blocks: | 39780 | ||
Attachments: |
Bug 39483: Update library edit form to use grid layout
Bug 39483: Update library edit form to use grid layout Library form (responsive display) Bug 39483: Update library edit form to use grid layout Bug 39483: Update library edit form to use grid layout |
Description
Owen Leonard
2025-03-28 18:00:31 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 Hi Owen, This patch doesn't apply. There are conflicts. -Jesse Created attachment 180291 [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 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. Created attachment 180384 [details]
Library form (responsive display)
(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. 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 Ok, sorry! It's working perfectly. Thank you for testing! 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> 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. I added a page to the wiki with some details: https://wiki.koha-community.org/wiki/Grid_Layout_for_Forms Pushed for 25.05! Well done everyone, thank you! |