From 59281cf81bbceadb08514ecad43ea8bad1126c0b 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 | 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 %] [% END %] -
+
[% IF library %]
Library code: @@ -144,7 +144,7 @@
- +
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..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 @@
+
+ +
+
Displayed in the library group search dropdowns.
+
Required
+
+
+
- - - +
+
+ +
+
-
-

Features

-
-

+

+ Features +
+
-

-

+

+
+
+
-

-

+

+
+
+
-

-

+

+
+
+
-

-

+

+
+
+
-

-

+

+
+
+
-

+
-
+
+ +
+
- - - +
+
+ +
+
-
-

Features

-
-

+

+ Features +
+
-

-

+

+
+
+
-

-

+

+
+
+
-

-

+

+
+
+
-

-

+

+
+
+
-

-

+

+
+
+
-

+
-
+