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>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>