[Bug 39483] New: Update staff interface forms to use grid layout
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Bug ID: 39483 Summary: Update staff interface forms to use grid layout Change sponsored?: --- Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Templates Assignee: oleonard@myacpl.org Reporter: oleonard@myacpl.org QA Contact: testopia@bugs.koha-community.org 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/ -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff Patch complexity|--- |Small patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 --- Comment #1 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 179858 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=179858&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Phil Ringnalda <phil@chetcolibrary.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |phil@chetcolibrary.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Jesse Maseto <jesse@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Failed QA CC| |jesse@bywatersolutions.com --- Comment #2 from Jesse Maseto <jesse@bywatersolutions.com> --- Hi Owen, This patch doesn't apply. There are conflicts. -Jesse -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Patch doesn't apply -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #179858|0 |1 is obsolete| | --- Comment #3 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 180291 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=180291&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Felicie <felicie.thiery@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |felicie.thiery@biblibre.com --- Comment #4 from Felicie <felicie.thiery@biblibre.com> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 --- Comment #5 from Felicie <felicie.thiery@biblibre.com> --- Created attachment 180384 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=180384&action=edit Library form (responsive display) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 --- Comment #6 from Owen Leonard <oleonard@myacpl.org> --- (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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Felicie <felicie.thiery@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #180291|0 |1 is obsolete| | --- Comment #7 from Felicie <felicie.thiery@biblibre.com> --- Created attachment 180403 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=180403&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Felicie <felicie.thiery@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off --- Comment #8 from Felicie <felicie.thiery@biblibre.com> --- Ok, sorry! It's working perfectly. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 --- Comment #9 from Owen Leonard <oleonard@myacpl.org> --- Thank you for testing! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #180403|0 |1 is obsolete| | --- Comment #10 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 181044 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=181044&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |paul.derscheid@lmscloud.de --- Comment #11 from 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |katrin.fischer@bsz-bw.de -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 --- Comment #12 from Owen Leonard <oleonard@myacpl.org> --- I added a page to the wiki with some details: https://wiki.koha-community.org/wiki/Grid_Layout_for_Forms -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to main Version(s)| |25.05.00 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 --- Comment #13 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Pushed for 25.05! Well done everyone, thank you! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |39780 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39780 [Bug 39780] Update library groups form to use grid layout -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lisette@bywatersolutions.co | |m Keywords| |roadmap_25_11 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |fridolin.somers@biblibre.co | |m Status|Pushed to main |Needs documenting --- Comment #14 from Fridolin Somers <fridolin.somers@biblibre.com> --- Enhancement not pushed to 24.11.x -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |39809 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39809 [Bug 39809] .required class was made too non-specific in Bootstrap upgrade -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483 --- Comment #15 from David Cook <dcook@prosentient.com.au> --- Oh cool I've been wanting to do more with CSS grids so it's awesome to see Owen is already way ahead of the game. -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org