Bugzilla – Attachment 181714 Details for
Bug 39780
Update library groups form to use grid layout
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 39780: Update library groups form to use grid layout
Bug-39780-Update-library-groups-form-to-use-grid-l.patch (text/plain), 30.53 KB, created by
Owen Leonard
on 2025-04-30 11:33:37 UTC
(
hide
)
Description:
Bug 39780: Update library groups form to use grid layout
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2025-04-30 11:33:37 UTC
Size:
30.53 KB
patch
obsolete
>From 59281cf81bbceadb08514ecad43ea8bad1126c0b Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Tue, 29 Apr 2025 16:55:11 +0000 >Subject: [PATCH] Bug 39780: Update library groups form to use grid layout > >This patch updates the library groups page to convert forms to use the >grid layout introduced in Bug 39483. Some changes are made the global >form-grid CSS: > >- Use container queries rather than media queries to control the > responsive behavior of forms using the grid >- Add ".input-md" and ".input-sm" classes to be used when a form's > <input> corresponds to a database column which is smaller. In this > case: > ".input-sm" for the row containing branches.branchcode (varchar 10) > ".input-md" for the row containing branches.branchzip (varchar 25) > - These classes have been added to branches.tt > >The library groups template has been updated with the new form grid >markup. > >To test, apply the patch and rebuild the staff interface CSS. > >- Go to Administration -> Libraries -> New library > - In the entry form, most form fields should equally wide. > - The library zipcode, IP, and MARC organization code fields should be > narrower. > - The library code field should be narrowest. >- Go to Administration -> Library groups -> New group. The "Add group" > form should be laid out vertically. > - Also test the form shown when editing a group. > >Sponsored-by: Athens County Public Libraries >--- > .../intranet-tmpl/prog/css/src/_forms.scss | 26 +++- > .../prog/en/modules/admin/branches.tt | 60 ++++---- > .../prog/en/modules/admin/library_groups.tt | 142 +++++++++++------- > 3 files changed, 141 insertions(+), 87 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss >index 7e33197abe6..63082ff03bf 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss >@@ -19,6 +19,9 @@ fieldset { > } > > &.fg { >+ container-name: form-grid; >+ container-type: inline-size; >+ > .btn.btn-link { > padding: .175rem 0; > } >@@ -38,6 +41,7 @@ fieldset { > } > > .fg-row input[type="text"], >+ .fg-row input[type="password"], > .fg-row select { > background-color: #FFF; > border: 1px solid #AAAAAA; >@@ -59,6 +63,10 @@ fieldset { > margin: 0; > } > >+ .fg-row + .fg-row { >+ margin-top: .5rem; >+ } >+ > .fg-label, > .fg-row .required { > margin: .3rem 0; >@@ -68,13 +76,21 @@ fieldset { > padding: .375rem .75rem; > } > >- @media only screen and ( min-width: 608px ) { >+ @container form-grid ( width > 608px ) { > .fg-row { > column-gap: .7rem; > display: grid; > grid-template-columns: 15% 50% 15%; > grid-template-rows: 1fr min-content; > >+ &.input-md { >+ grid-template-columns: 15% 30% 15% >+ } >+ >+ &.input-sm { >+ grid-template-columns: 15% 15% 15% >+ } >+ > &.wide { > grid-template-columns: 15% 85%; > } >@@ -91,15 +107,20 @@ fieldset { > } > } > >- @media only screen and ( min-width: 1700px ) { >+ @container form-grid ( width > 1700px ) { > .fg-row { > grid-template-columns: 10% 35% 15%; >+ >+ &.wide { >+ grid-template-columns: 10% 90%; >+ } > } > } > > .hint { > color: #666; > font-size: 95%; >+ grid-column-end: 4; > grid-column-start: 2; > margin: .3rem 0; > } >@@ -378,3 +399,4 @@ fieldset { > } > } > } >+ >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt >index 4098f59c3d4..6e89e3e5486 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt >@@ -130,7 +130,7 @@ > [% IF library %] > <input type="hidden" name="is_a_modif" value="1" /> > [% END %] >- <div class="fg-row"> >+ <div class="fg-row input-sm"> > [% IF library %] > <div class="fg-label"> > <span class="label">Library code: </span> >@@ -144,7 +144,7 @@ > <label for="branchcode" class="required">Library code: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchcode" id="branchcode" size="10" maxlength="10" value="[% library.branchcode | html %]" class="required focus" required="required" /> >+ <input type="text" name="branchcode" id="branchcode" maxlength="10" value="[% library.branchcode | html %]" class="required focus" required="required" /> > </div> > <div class="required">Required</div> > [% END %] >@@ -155,9 +155,9 @@ > </div> > <div class="fg-input"> > [% IF library %] >- <input type="text" name="branchname" id="branchname" size="80" value="[% library.branchname | html %]" class="required focus" required="required" /> >+ <input type="text" name="branchname" id="branchname" value="[% library.branchname | html %]" class="required focus" required="required" /> > [% ELSE %] >- <input type="text" name="branchname" id="branchname" size="80" value="[% library.branchname | html %]" class="required" required="required" /> >+ <input type="text" name="branchname" id="branchname" value="[% library.branchname | html %]" class="required" required="required" /> > [% END %] > </div> > <div class="required">Required</div> >@@ -189,7 +189,7 @@ > <label for="branchaddress1">Address line 1: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchaddress1" id="branchaddress1" size="60" value="[% library.branchaddress1 | html %]" /> >+ <input type="text" name="branchaddress1" id="branchaddress1" value="[% library.branchaddress1 | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -197,7 +197,7 @@ > <label for="branchaddress2">Address line 2: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchaddress2" id="branchaddress2" size="60" value="[% library.branchaddress2 | html %]" /> >+ <input type="text" name="branchaddress2" id="branchaddress2" value="[% library.branchaddress2 | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -205,7 +205,7 @@ > <label for="branchaddress3">Address line 3: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchaddress3" id="branchaddress3" size="60" value="[% library.branchaddress3 | html %]" /> >+ <input type="text" name="branchaddress3" id="branchaddress3" value="[% library.branchaddress3 | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -213,7 +213,7 @@ > <label for="branchcity">City: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchcity" id="branchcity" size="60" value="[% library.branchcity | html %]" /> >+ <input type="text" name="branchcity" id="branchcity" value="[% library.branchcity | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -221,15 +221,15 @@ > <label for="branchstate">State: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchstate" id="branchstate" size="60" value="[% library.branchstate | html %]" /> >+ <input type="text" name="branchstate" id="branchstate" value="[% library.branchstate | html %]" /> > </div> > </div> >- <div class="fg-row"> >+ <div class="fg-row input-md"> > <div class="fg-label"> > <label for="branchzip">ZIP/Postal code: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchzip" id="branchzip" size="25" maxlength="25" value="[% library.branchzip | html %]" /> >+ <input type="text" name="branchzip" id="branchzip" maxlength="25" value="[% library.branchzip | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -237,7 +237,7 @@ > <label for="branchcountry">Country: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchcountry" id="branchcountry" size="60" value="[% library.branchcountry | html %]" /> >+ <input type="text" name="branchcountry" id="branchcountry" value="[% library.branchcountry | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -245,7 +245,7 @@ > <label for="branchphone">Phone: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchphone" id="branchphone" size="60" value="[% library.branchphone | html %]" /> >+ <input type="text" name="branchphone" id="branchphone" value="[% library.branchphone | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -253,7 +253,7 @@ > <label for="branchfax">Fax: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchfax" id="branchfax" size="60" value="[% library.branchfax | html %]" /> >+ <input type="text" name="branchfax" id="branchfax" value="[% library.branchfax | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -261,7 +261,7 @@ > <label for="branchemail">Email: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchemail" id="branchemail" class="email" size="80" value="[% library.branchemail | html %]" /> >+ <input type="text" name="branchemail" id="branchemail" class="email" value="[% library.branchemail | html %]" /> > </div> > </div> > [% IF (Koha.Preference('ILLModule')) %] >@@ -270,7 +270,7 @@ > <label for="branchillemail">ILL staff email: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchillemail" id="branchillemail" class="email" size="80" value="[% library.branchillemail | html %]" /> >+ <input type="text" name="branchillemail" id="branchillemail" class="email" value="[% library.branchillemail | html %]" /> > </div> > <div class="hint"> > [% IF ( CAN_user_parameters_manage_sysprefs ) %] >@@ -287,7 +287,7 @@ > <label for="branchreplyto">Reply-To: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchreplyto" id="branchreplyto" class="email" size="80" value="[% library.branchreplyto | html %]" /> >+ <input type="text" name="branchreplyto" id="branchreplyto" class="email" value="[% library.branchreplyto | html %]" /> > </div> > <div class="hint"> > [% IF ( CAN_user_parameters_manage_sysprefs ) %] >@@ -303,7 +303,7 @@ > <label for="branchreturnpath">Return-Path: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchreturnpath" id="branchreturnpath" class="email" size="80" value="[% library.branchreturnpath | html %]" /> >+ <input type="text" name="branchreturnpath" id="branchreturnpath" class="email" value="[% library.branchreturnpath | html %]" /> > </div> > <div class="hint"> > [% IF ( CAN_user_parameters_manage_sysprefs ) %] >@@ -340,7 +340,7 @@ > <label for="branchurl">URL: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchurl" id="branchurl" size="80" value="[% library.branchurl | html %]" class="url" /> >+ <input type="text" name="branchurl" id="branchurl" value="[% library.branchurl | html %]" class="url" /> > </div> > </div> > <div class="fg-row"> >@@ -357,21 +357,21 @@ > [% END %] > </div> > </div> >- <div class="fg-row"> >+ <div class="fg-row input-md"> > <div class="fg-label"> > <label for="branchip">IP: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchip" id="branchip" size="15" maxlength="15" value="[% library.branchip | html %]" /> >+ <input type="text" name="branchip" id="branchip" maxlength="15" value="[% library.branchip | html %]" /> > </div> > <div class="hint">Enter as a single IP address, or a subnet such as 192.168.1.*</div> > </div> >- <div class="fg-row"> >+ <div class="fg-row input-md"> > <div class="fg-label"> > <label for="marcorgcode">MARC organization code: </label> > </div> > <div class="fg-input"> >- <input type="text" name="marcorgcode" id="marcorgcode" size="16" maxlength="16" value="[% library.marcorgcode | html %]" /> >+ <input type="text" name="marcorgcode" id="marcorgcode" maxlength="16" value="[% library.marcorgcode | html %]" /> > </div> > <div class="hint"> > [% IF ( CAN_user_parameters_manage_sysprefs ) %] >@@ -388,7 +388,7 @@ > <label for="branchnotes">Notes: </label> > </div> > <div class="fg-input"> >- <input type="text" name="branchnotes" id="branchnotes" size="80" value="[% library.branchnotes | html %]" /> >+ <input type="text" name="branchnotes" id="branchnotes" value="[% library.branchnotes | html %]" /> > </div> > </div> > <div class="fg-row"> >@@ -452,16 +452,16 @@ > </td> > <td> > [% IF hr.open_time %] >- <input type="text" size="5" value="[% hr.open_time | html %]" name="open_time" class="flatpickr" data-flatpickr-time-only="true" /> >+ <input type="text" value="[% hr.open_time | html %]" name="open_time" class="flatpickr" data-flatpickr-time-only="true" /> > [% ELSE %] >- <input type="text" size="5" value="" name="open_time" class="flatpickr" data-flatpickr-time-only="true" /> >+ <input type="text" value="" name="open_time" class="flatpickr" data-flatpickr-time-only="true" /> > [% END %] > </td> > <td> > [% IF hr.close_time %] >- <input type="text" size="5" value="[% hr.close_time | html %]" name="close_time" class="flatpickr" data-flatpickr-time-only="true" /> >+ <input type="text" value="[% hr.close_time | html %]" name="close_time" class="flatpickr" data-flatpickr-time-only="true" /> > [% ELSE %] >- <input type="text" size="5" value="" name="close_time" class="flatpickr" data-flatpickr-time-only="true" /> >+ <input type="text" value="" name="close_time" class="flatpickr" data-flatpickr-time-only="true" /> > [% END %] > </td> > </tr> >@@ -475,10 +475,10 @@ > <input type="hidden" value="[% d | html %]" name="day" /> > </td> > <td> >- <input type="text" size="5" name="open_time" class="noEnterSubmit flatpickr" data-flatpickr-time-only="true" /> >+ <input type="text" name="open_time" class="noEnterSubmit flatpickr" data-flatpickr-time-only="true" /> > </td> > <td> >- <input type="text" size="5" name="close_time" class="noEnerSubmit flatpickr" data-flatpickr-time-only="true" /> >+ <input type="text" name="close_time" class="noEnerSubmit flatpickr" data-flatpickr-time-only="true" /> > </td> > </tr> > [% END %] >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/library_groups.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/library_groups.tt >index 059b66b9b04..a98dad24d56 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/library_groups.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/library_groups.tt >@@ -97,64 +97,81 @@ > <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> > </div> > <div class="modal-body"> >- <fieldset class="brief"> >+ <fieldset class="fg"> > <input type="hidden" id="add-group-modal-parent-id" name="parent_id" value="" /> > <input type="hidden" id="add-group-modal-action" name="op" value="cud-add" /> >- <ol> >- <li> >+ <div class="fg-row"> >+ <div class="fg-label"> > <label for="add-group-modal-title">Title: </label> >- <input type="text" size="40" maxlength="100" name="title" id="add-group-modal-title" required="required" /> >- <span class="required">Required</span> >- <div class="hint">Displayed in the library group search dropdowns.</div> >- </li> >- <li> >+ </div> >+ <div class="fg-input"> >+ <input type="text" maxlength="100" name="title" id="add-group-modal-title" required="required" /> >+ </div> >+ <div class="hint">Displayed in the library group search dropdowns.</div> >+ <div class="required">Required</div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-label"> > <label for="add-group-modal-description">Description: </label> >- <input type="text" size="40" name="description" id="add-group-modal-description" /> >- </li> >- </ol> >+ </div> >+ <div class="fg-input"> >+ <input type="text" name="description" id="add-group-modal-description" /> >+ </div> >+ </div> > </fieldset> >- <div id="root-group-features-add"> >- <h3>Features</h3> >- <div class="checkbox"> >- <p> >+ <fieldset id="root-group-features-add" class="fg"> >+ <legend>Features</legend> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" name="ft_hide_patron_info" id="add-group-modal-ft_hide_patron_info" value="1" /> > Limit patron data access by group > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" name="ft_limit_item_editing" id="add-group-modal-ft_limit_item_editing" value="1" /> > Limit item editing by group > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" name="ft_search_groups_opac" id="add-group-modal-ft_search_groups_opac" value="1" /> > Use for OPAC search groups > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" name="ft_search_groups_staff" id="add-group-modal-ft_search_groups_staff" value="1" /> > Use for staff search groups > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" name="ft_local_hold_group" id="add-group-modal-ft_local_hold_group" value="1" /> > Is local hold group > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" name="ft_local_float_group" id="add-group-modal-ft_local_float_group" value="1" /> > Is local float group > </label> >- </p> >+ </div> > </div> >- </div> >+ </fieldset> > </div> >+ <!-- /.modal-body --> > <div class="modal-footer"> > <button type="submit" class="btn btn-primary">Save</button> > <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button> >@@ -181,62 +198,77 @@ > <div class="modal-body"> > <input type="hidden" id="edit-group-modal-id" name="id" value="" /> > <input type="hidden" id="edit-group-modal-action" name="op" value="cud-edit" /> >- <fieldset class="brief"> >- <ol> >- <li> >+ <fieldset class="fg"> >+ <div class="fg-row"> >+ <div class="fg-label"> > <label for="edit-group-modal-title">Title: </label> >- <input type="text" size="40" maxlength="100" id="edit-group-modal-title" name="title" value="" required="required" /> >- <span class="required">Required</span> >- <div class="hint">Displayed in the library group search dropdowns.</div> >- </li> >- >- <li> >+ </div> >+ <div class="fg-input"> >+ <input type="text" maxlength="100" id="edit-group-modal-title" name="title" value="" required="required" /> >+ </div> >+ <div class="required">Required</div> >+ <div class="hint">Displayed in the library group search dropdowns.</div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-label"> > <label for="edit-group-modal-description">Description: </label> >- <input type="text" size="40" id="edit-group-modal-description" name="description" value="" /> >- </li> >- </ol> >+ </div> >+ <div class="fg-input"> >+ <input type="text" id="edit-group-modal-description" name="description" value="" /> >+ </div> >+ </div> > </fieldset> >- <div id="root-group-features-edit"> >- <h3>Features</h3> >- <div class="checkbox"> >- <p> >+ <fieldset id="root-group-features-edit" class="fg"> >+ <legend>Features</legend> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" id="edit-group-modal-ft_hide_patron_info" name="ft_hide_patron_info" value="1" /> > Limit patron data access by group > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" id="edit-group-modal-ft_limit_item_editing" name="ft_limit_item_editing" value="1" /> > Limit item editing by group > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" id="edit-group-modal-ft_search_groups_opac" name="ft_search_groups_opac" value="1" /> > Use for OPAC search groups > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" id="edit-group-modal-ft_search_groups_staff" name="ft_search_groups_staff" value="1" /> > Use for staff search groups > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" id="edit-group-modal-ft_local_hold_group" name="ft_local_hold_group" value="1" /> > Is local hold group > </label> >- </p> >- <p> >+ </div> >+ </div> >+ <div class="fg-row"> >+ <div class="fg-checkbox"> > <label> > <input type="checkbox" id="edit-group-modal-ft_local_float_group" name="ft_local_float_group" value="1" /> > Is local float group > </label> >- </p> >+ </div> > </div> >- </div> >+ </fieldset> > </div> > <div class="modal-footer"> > <button type="submit" class="btn btn-primary">Update</button> >-- >2.39.5
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 39780
:
181714
|
183145
|
183679