From e0e357c4db6ab28743fded489c104fa56e81ea90 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 11 Feb 2026 15:18:24 -0500 Subject: [PATCH] Bug 41823: Update acquisitions admin pages to use grid layout for forms This patch updates acquisitions-related administration templates with new markup and CSS for layout forms using CSS grids. To test, apply the patch rebuild the staff interface CSS. Check the following pages, confirming that the "New" and "Edit" versions of the form look correct in each case: - Administration -> Currencies and exchange rates - Administration -> Budgets (New, Edit, and Duplicate) - Administration -> Contracts - Administration -> Funds -> Add sub fund to a budget - Administration -> EDI accounts - Administration -> Library EANs - Acquisitions -> Vendor -> Contracts Sponsored-by: Athens County Public Libraries --- .../intranet-tmpl/prog/css/src/_forms.scss | 206 +++++++++++++++--- .../prog/en/modules/admin/aqbudgetperiods.tt | 178 +++++++++------ .../prog/en/modules/admin/aqbudgets.tt | 146 +++++++++---- .../prog/en/modules/admin/aqcontract.tt | 69 +++--- .../prog/en/modules/admin/currency.tt | 115 ++++++---- .../prog/en/modules/admin/edi_accounts.tt | 146 ++++++++----- .../prog/en/modules/admin/edi_ean_accounts.tt | 36 ++- 7 files changed, 626 insertions(+), 270 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..fcb947cc758 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,100 @@ 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: .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; + justify-self: left; + text-align: left; + } + + .fg-input, + .fg-text { + grid-column: 1 / 1; + } + + .hint { + grid-row: 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; + } + } + } + + 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; + } - .fg-row input[type="text"].flatpickr-input { - padding-left: calc( 1.5em + 10px ); - width: calc( 100% - 20px ); + 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 +153,67 @@ 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-label { + justify-self: right; + text-align: right; + } + + .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 { + display: grid; + grid-template-columns: 25% 1.5rem 65%; + + .fg-label { + grid-column: 3 / 4; + grid-row: 1 / 2; + justify-self: left; + text-align: left; + } + + .fg-input, + .fg-text { + grid-column: 2 / 3; + } + + .hint { + grid-column: 3 / 4; + } } input[type="text"].flatpickr-input { @@ -84,23 +221,30 @@ fieldset { width: calc( 100% - 20px ); } } - - .fg-label { - justify-self: right; - text-align: right; - } } - @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-start: 2; + grid-column: 4 / 2; margin: .3rem 0; } } @@ -266,12 +410,12 @@ fieldset { width: auto; span { - margin-left:5px; - width:auto; + margin-left: 5px; + width: auto; } } - ul>li.hide-radio.selected { + ul > li.hide-radio.selected { background-color: initial; color: initial; } diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgetperiods.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgetperiods.tt index 6bf1da18ac4..0c618d4efc0 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgetperiods.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgetperiods.tt @@ -159,52 +159,76 @@

Duplicate budget

[% INCLUDE 'csrf-token.inc' %] -
+
-
    -
  1. +
    +
    - - Required -
    [% INCLUDE 'date-format.inc' %]
    -
  2. -
  3. + +
    + +
    +
    Required
    +
    [% INCLUDE 'date-format.inc' %]
    + +
    +
    - - Required -
    [% INCLUDE 'date-format.inc' %]
    -
  4. - -
  5. + +
    + +
    +
    Required
    +
    [% INCLUDE 'date-format.inc' %]
    + + +
    +
    +
    +
    - Required -
  6. - -
  7. - - % -
    (can be positive or negative)
    -
  8. - -
  9. + +
    Required
    + + +
    +
    + +
    +
    %
    +
    Can be positive or negative
    +
    + +
    +
    +
    +
    -
    (amounts will be rounded down)
    -
  10. + +
    Amounts will be rounded down
    + -
  11. +
    +
    +
    +
    -
  12. + + -
  13. +
    +
    +
    +
    -
  14. -
+ +
@@ -224,63 +248,85 @@ [% END %] [% INCLUDE 'csrf-token.inc' %] -
+
-
    -
  1. +
    +
    - - Required -
    [% INCLUDE 'date-format.inc' %]
    -
  2. -
  3. + +
    + +
    +
    Required
    +
    [% INCLUDE 'date-format.inc' %]
    + +
    +
    - - Required -
    [% INCLUDE 'date-format.inc' %]
    -
  4. - -
  5. - - + +
    + +
    +
    Required
    +
    [% INCLUDE 'date-format.inc' %]
    + + +
    + + +
    - - Required -
  6. - -
  7. - - + +
    + +
    +
    Required
    + + +
    + + +
    - -
  8. - -
  9. - - + +
    + +
    + + +
    + + +
    +
    +
    [% IF ( budget_period_active ) %] [% ELSE %] [% END %] -
  10. + + -
  11. - - +
    + + +
    +
    +
    [% IF ( budget_period_locked ) %] [% ELSE %] [% END %] -
  12. -
+ +
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgets.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgets.tt index 9e5af86256c..fdd4c21435d 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgets.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqbudgets.tt @@ -304,50 +304,76 @@ [% END %] [% END %] -
+
Fund details -
    - [% IF ( budget_parent_id ) %] -
  1. + [% IF ( budget_parent_id ) %] +
    +
    Fund parent: +
    +
    [% budget_parent_name | html %] [% budget_parent_id | html %] - [% budget_parent_name | html %] -
  2. - [% END %] -
  3. + + + [% END %] +
    +
    - -
  4. + +
    + +
    + -
  5. +
    +
    - -
  6. + +
    + +
    + -
  7. +
    +
    - -
  8. + +
    + +
    + -
  9. +
    +
    - - 0 to disable -
  10. + +
    + +
    +
    0 to disable
    + -
  11. +
    +
    - - 0 to disable -
  12. + +
    + +
    +
    0 to disable
    + -
  13. +
  14. + + - [% IF budget_has_children %] -
  15. + [% IF budget_has_children %] +
    +
    - Selecting this option will overwrite existing fund owners, if any -
  16. - [% END %] + +
    + +
    +
    Selecting this option will overwrite existing fund owners, if any
    + + [% END %] -
  17. +
    +
    Users: +
    +
      [% FOREACH user IN budget_users %]
    • @@ -384,48 +418,66 @@ >
    -
  18. -
  19. + + +
    +
    +
    +
    -
  20. + + -
  21. +
    +
    +
    +
    -
  22. + + -
  23. +
    +
    +
    +
    -
  24. + + -
  25. +
    +
    +
    +
    -
  26. -
  27. + + + +
    +
    +
    +
    -
  28. -
+ + [% IF ( budget_id ) %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqcontract.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqcontract.tt index 1743ad819cc..01c15343e5c 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqcontract.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqcontract.tt @@ -90,37 +90,56 @@ [% ELSE %]

New contract for [% booksellername | html %]

[% END %] -
-
    - [% IF ( contractnumber ) %] -
  1. Contract ID [% contractnumber | html %] +
    + [% IF ( contractnumber ) %] +
    +
    + Contract ID +
    +
    + [% contractnumber | html %] -
  2. - [% END %] -
  3.   + + + [% END %] +
    +
    + +
    +
    - Required -
  4. -
  5.   +
    Required
    + + +
    +
    + +
    +
    -
  6. -
  7.   + + +
    +
    + +
    +
    - Required -
    [% INCLUDE 'date-format.inc' %]
    -
  8. -
  9.   +
    Required
    + +
    [% INCLUDE 'date-format.inc' %]
    + +
    +
    + +
    +
    - Required -
    [% INCLUDE 'date-format.inc' %]
    -
  10. -
+
Required
+ +
[% INCLUDE 'date-format.inc' %]
+
Cancel diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/currency.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/currency.tt index 18ce99e98ff..971e20c39ac 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/currency.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/currency.tt @@ -108,58 +108,99 @@ [% INCLUDE 'csrf-token.inc' %] -
+
New currency entry form -
    -
  1. - [% IF currency %] +
    + [% IF currency %] +
    Currency: +
    +
    + [% currency.currency | html %] - [% currency.currency | html %] - [% ELSE %] + +
    + [% ELSE %] +
    - Required - [% END %] -
  2. -
  3. + +
    + +
    +
    Required
    + [% END %] + +
    +
    - Required -
  4. -
  5. + +
    + +
    +
    Required
    + +
    +
    - Required -
  6. -
  7. + +
    + +
    +
    Required
    + +
    +
    +
    +
    -
  8. -
  9. Last updated: [% currency.timestamp | $KohaDates %]
  10. -
  11. + + + [% IF ( currency ) %] +
    +
    + Last updated: +
    +
    [% currency.timestamp | $KohaDates %]
    +
    + [% END %] +
    +
    +
    +
    [% IF currency.p_sep_by_space %] [% ELSE %] [% END %] -
  12. -
  13. + + +
    +
    +
    +
    [% IF currency.p_cs_precedes %] [% ELSE %] [% END %] -
  14. -
  15. + + +
    +
    +
    +
    [% IF currency.active %] [% ELSE %] [% END %] - -
  16. -
+ +
+
@@ -266,30 +307,28 @@ [% MACRO jsinclude BLOCK %] [% Asset.js("js/admin-menu.js") | $raw %] [% INCLUDE 'datatables.inc' %] - -