https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39483
Paul Derscheid <[email protected]> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #180403|0 |1 is obsolete| | --- Comment #10 from Paul Derscheid <[email protected]> --- 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 <[email protected]> -- You are receiving this mail because: You are watching all bug changes. _______________________________________________ Koha-bugs mailing list [email protected] https://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-bugs website : http://www.koha-community.org/ git : http://git.koha-community.org/ bugs : http://bugs.koha-community.org/
