From c65416516869d30ed6328c7caf67a90d423c4a11 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 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 | 180 ++++++++++++++-- .../prog/en/modules/admin/branches.tt | 64 +++--- .../prog/en/modules/admin/library_groups.tt | 192 ++++++++++-------- 3 files changed, 302 insertions(+), 134 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss index bd87ad856ed..a09c40cc2be 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss @@ -19,11 +19,26 @@ fieldset { } &.fg { + container-name: form-grid; + container-type: inline-size; + .btn.btn-link { padding: .175rem 0; } .fg-checkbox { + .hint { + display: inline; + } + } + + .fg-pair { + display: flex; + flex-wrap: nowrap; + gap: .5rem; + } + + .fg-radio { grid-column-start: 2; } @@ -35,28 +50,98 @@ fieldset { .label { font-weight: bold; } - } - .fg-row input[type="text"], - .fg-row select { - background-color: #FFF; - border: 1px solid #AAAAAA; - border-radius: 4px; - color: #495057; - display: inline-block; - height: calc( 1.5em + .75rem + 2px ); - line-height: 1.5; - padding: .375rem .75rem; - width: 100%; - } + .btn-default { + border: 1px solid #aaa; + border-radius: 0.375rem; + height: calc( 1.5em + .75rem + 2px ); + padding: .375rem .75rem; + } + + .fg-input, + .fg-text { + display: flex; + gap: .5rem; + + label { + margin-right: 1rem; + } + } + + &.input-checkbox { + display: grid; + grid-template-columns: 2rem 85%; + + .fg-label { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + + .fg-input, + .fg-text { + grid-column: 1 / 1; + } + + .hint { + grid-column: 2 / 3; + } + } + + input[type="text"], + input[type="password"], + select { + background-color: #FFF; + border: 1px solid #AAAAAA; + border-radius: 4px; + color: #495057; + display: inline-block; + height: calc( 1.5em + .75rem + 2px ); + line-height: 1.5; + padding: .375rem .75rem; + width: 100%; + } + + input[type="text"]{ + &.readonly, + &:read-only { + background: #EEE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='currentColor'%3E%3Cpath d='M6.5 1.371c.962 0 1.742.78 1.742 1.742v1.549H4.758V3.113c0-.962.78-1.742 1.742-1.742m2.613 5.226V3.113c0-3.484-5.226-3.484-5.226 0v1.549c-.962 0-1.742.78-1.742 1.741v4.355c0 .962.78 1.742 1.742 1.742h5.226c.962 0 1.742-.78 1.742-1.742V6.403c0-.962-.78-1.741-1.742-1.741' style='fill:%23838383'/%3E%3C/svg%3E") 1% 50% no-repeat; + border-style: inset; + border-width: 1px; + cursor: default; + padding-left: 20px; + + &:focus { + border-color: unset; + border-radius: unset; + } + } + } - .fg-row input[type="text"].flatpickr-input { - padding-left: calc( 1.5em + 10px ); - width: calc( 100% - 20px ); + input[type="text"].flatpickr-input { + padding-left: calc( 1.5em + 10px ); + width: calc( 100% - 20px ); + } + + input[type="checkbox"], + input[type="radio"] { + margin: .4em 0 0 0; + } + + textarea { + border: 1px solid #AAAAAA; + border-radius: 4px; + color: #495057; + padding: .375rem .75rem; + width: 100%; + } } .fg-row input[type="checkbox"] { - margin: 0; + margin: .4em .4em .4em 0; + } + + .fg-row + .fg-row { + margin-top: 1rem; } .fg-label, @@ -66,17 +151,55 @@ fieldset { .fg-text { padding: .375rem .75rem; + + label { + margin-right: 1rem; + } + } + + .form-control[type="file"]{ + background-color: #FFF; + border: 1px solid #aaa; + display: inline-block; + width: 80%; } - @media only screen and ( min-width: 608px ) { + @container form-grid ( width > 768px ) { .fg-row { column-gap: .7rem; display: grid; - grid-template-columns: 15% 50% 15%; + grid-template-columns: 25% 50% 15%; grid-template-rows: 1fr min-content; + .fg-input, + .fg-text { + grid-column-start: 2; + } + + &.input-md { + grid-template-columns: 25% 30% 15% + } + + &.input-sm { + grid-template-columns: 25% 15% 15% + } + &.wide { - grid-template-columns: 15% 85%; + grid-template-columns: 25% 85%; + } + + &.input-checkbox { + grid-template-columns: 25% 1.5rem 65%; + + .fg-label, + .fg-input { + grid-column: unset; + } + + .hint { + grid-column-end: unset; + grid-column-start: unset; + } } input[type="text"].flatpickr-input { @@ -91,15 +214,28 @@ fieldset { } } - @media only screen and ( min-width: 1700px ) { + @container form-grid ( width > 1700px ) { .fg-row { - grid-template-columns: 10% 35% 15%; + grid-template-columns: 20% 35% 15%; + + &.input-md { + grid-template-columns: 20% 30% 25% + } + + &.input-sm { + grid-template-columns: 20% 15% 25% + } + + &.wide { + grid-template-columns: 20% 80%; + } } } .hint { color: #666; font-size: 95%; + grid-column-end: 4; grid-column-start: 2; margin: .3rem 0; } 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..4cf9420229d 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt @@ -130,21 +130,21 @@ [% IF library %] [% END %] -
+
[% IF library %]
Library code:
-
+
-
[% library.branchcode | html %]
+ [% library.branchcode | html %]
[% ELSE %]
- +
Required
[% END %] @@ -155,9 +155,9 @@
[% IF library %] - + [% ELSE %] - + [% END %]
Required
@@ -189,7 +189,7 @@
- +
@@ -197,7 +197,7 @@
- +
@@ -205,7 +205,7 @@
- +
@@ -213,7 +213,7 @@
- +
@@ -221,15 +221,15 @@
- +
-
+
- +
@@ -237,7 +237,7 @@
- +
@@ -245,7 +245,7 @@
- +
@@ -253,7 +253,7 @@
- +
@@ -261,7 +261,7 @@
- +
[% IF (Koha.Preference('ILLModule')) %] @@ -270,7 +270,7 @@
- +
[% IF ( CAN_user_parameters_manage_sysprefs ) %] @@ -287,7 +287,7 @@
- +
[% IF ( CAN_user_parameters_manage_sysprefs ) %] @@ -303,7 +303,7 @@
- +
[% IF ( CAN_user_parameters_manage_sysprefs ) %] @@ -340,7 +340,7 @@
- +
@@ -357,21 +357,21 @@ [% END %]
-
+
- +
Enter as a single IP address, or a subnet such as 192.168.1.*
-
+
- +
[% IF ( CAN_user_parameters_manage_sysprefs ) %] @@ -388,7 +388,7 @@
- +
@@ -452,16 +452,16 @@ [% IF hr.open_time %] - + [% ELSE %] - + [% END %] [% IF hr.close_time %] - + [% ELSE %] - + [% END %] @@ -475,10 +475,10 @@ - + - + [% 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..e541a884b07 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 @@ -87,7 +87,7 @@ [% END %] [% END %] -