From c528154f50848995c03d922a48d2ec0de57b34d3 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 28 Mar 2025 17:43:08 +0000 Subject: [PATCH] Bug 39483: Update library edit form to use grid layout 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:
/* fg = form grid */
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 --- .../prog/css/src/_flatpickr.scss | 7 +- .../intranet-tmpl/prog/css/src/_forms.scss | 87 +++++ .../prog/css/src/staff-global.scss | 7 +- .../prog/en/modules/admin/branches.tt | 358 ++++++++++++------ .../prog/en/modules/catalogue/advsearch.tt | 2 +- 5 files changed, 344 insertions(+), 117 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss index 5596befb485..58162e62cba 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss @@ -949,7 +949,6 @@ span.flatpickr-weekday { input, .flatpickr-am-pm { - &:hover, &:focus { background: lighten($dayHoverBackground, 3); @@ -958,12 +957,12 @@ span.flatpickr-weekday { } .flatpickr-input { + background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23369' class='bi bi-calendar3' viewBox='0 0 32 32'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M25 4H7a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3ZM5.5 9.786c0-.71.672-1.286 1.5-1.286h18c.828 0 1.5.576 1.5 1.286v15.428c0 .71-.672 1.286-1.5 1.286H7c-.828 0-1.5-.576-1.5-1.286z'/%3E%3Cpath d='M13.75 14.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4.5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4.5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM9.25 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4.5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4.5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4.5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-13.5 4.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4.5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4.5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/g%3E%3C/svg%3E" ); + background-position: 0; background-repeat: no-repeat; - background-position: 3px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23369' class='bi bi-calendar3'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M10.5 0h-9A1.5 1.5 0 0 0 0 1.5v9A1.5 1.5 0 0 0 1.5 12h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 10.5 0zM.75 2.893c0-.355.336-.643.75-.643h9c.414 0 .75.288.75.643v7.714c0 .355-.336.643-.75.643h-9c-.414 0-.75-.288-.75-.643z'/%3E%3Cpath d='M4.875 5.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM2.625 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-6.75 2.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/g%3E%3C/svg%3E"); border-style: inset; border-width: 1px; - padding: 3px 3px 3px 20px; + padding: 3px 3px 3px 25px; &.flatpickr-mobile { height: 2rem; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss index ce631535eec..7e33197abe6 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss @@ -18,6 +18,93 @@ fieldset { padding: 0; } + &.fg { + .btn.btn-link { + padding: .175rem 0; + } + + .fg-checkbox { + grid-column-start: 2; + } + + .fg-row { + display: block; + margin-bottom: .7rem; + + label, + .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%; + } + + .fg-row input[type="text"].flatpickr-input { + padding-left: calc( 1.5em + 10px ); + width: calc( 100% - 20px ); + } + + .fg-row input[type="checkbox"] { + margin: 0; + } + + .fg-label, + .fg-row .required { + margin: .3rem 0; + } + + .fg-text { + padding: .375rem .75rem; + } + + @media only screen and ( min-width: 608px ) { + .fg-row { + column-gap: .7rem; + display: grid; + grid-template-columns: 15% 50% 15%; + grid-template-rows: 1fr min-content; + + &.wide { + grid-template-columns: 15% 85%; + } + + input[type="text"].flatpickr-input { + padding-left: calc( 1.5em + 10px ); + width: calc( 100% - 20px ); + } + } + + .fg-label { + justify-self: right; + text-align: right; + } + } + + @media only screen and ( min-width: 1700px ) { + .fg-row { + grid-template-columns: 10% 35% 15%; + } + } + + .hint { + color: #666; + font-size: 95%; + grid-column-start: 2; + margin: .3rem 0; + } + } + &.rows { clear: left; float: left; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index d8a1d8aca37..aff38e7a35d 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -3498,6 +3498,11 @@ a.browse-button { } } +.required { + color: $warning-text-color; + font-style: italic; +} + span { &.browse-button { color: #999; @@ -3519,8 +3524,6 @@ span { } &.required { - color: $warning-text-color; - font-style: italic; margin-left: .5em; } 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 f1d875fa3eb..1443571f9b5 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt @@ -125,104 +125,200 @@
[% INCLUDE 'csrf-token.inc' %] -
+
[% IF library %] [% END %] -
    -
  1. - [% IF library %] +
    + [% IF library %] +
    Library code: +
    +
    - [% library.branchcode | html %] - [% ELSE %] +
    [% library.branchcode | html %]
    +
    + [% ELSE %] +
    +
    +
    - Required - [% END %] -
  2. -
  3. + +
    Required
    + [% END %] + +
    +
    +
    +
    [% IF library %] [% ELSE %] [% END %] - Required -
  4. -
+ +
Required
+
[% IF categories %] -
Group(s): -
    - [% FOREACH category IN categories %] -
  1. + [% FOREACH category IN categories %] +
    +
    +
    +
    [% IF category and selected_categorycodes.grep(category.categorycode).size %] [% ELSE %] [% END %] -
    [% category.codedescription | html %]
    -
  2. - [% END %] -
+ +
[% category.codedescription | html %]
+ + [% END %]
[% END %] -
-
    -
  1. -
  2. -
  3. -
  4. -
  5. -
  6. -
  7. -
  8. -
  9. -
  10. - [% IF (Koha.Preference('ILLModule')) %] -
  11. +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + [% IF (Koha.Preference('ILLModule')) %] +
    +
    +
    +
    -
    - [% IF ( CAN_user_parameters_manage_sysprefs ) %] - [% pref_ILLDefaultStaffEmail_link = BLOCK %]ILLDefaultStaffEmail[% END %] - Default: [% pref_ILLDefaultStaffEmail_link | $raw | $KohaSpan %] system preference - [% ELSE %] - Default: ILLDefaultStaffEmail system preference - [% END %] -
    -
  12. - [% END %] -
  13. - - +
    [% IF ( CAN_user_parameters_manage_sysprefs ) %] - [% pref_ReplyToDefault_link = BLOCK %]ReplyToDefault[% END %] - Default: [% pref_ReplyToDefault_link | $raw | $KohaSpan %] system preference + [% pref_ILLDefaultStaffEmail_link = BLOCK %]ILLDefaultStaffEmail[% END %] + Default: [% pref_ILLDefaultStaffEmail_link | $raw | $KohaSpan %] system preference [% ELSE %] - Default: ReplyToDefault system preference + Default: ILLDefaultStaffEmail system preference [% END %]
    -
  14. -
  15. + + [% END %] +
    +
    + +
    +
    + +
    +
    + [% IF ( CAN_user_parameters_manage_sysprefs ) %] + [% pref_ReplyToDefault_link = BLOCK %]ReplyToDefault[% END %] + Default: [% pref_ReplyToDefault_link | $raw | $KohaSpan %] system preference + [% ELSE %] + Default: ReplyToDefault system preference + [% END %] +
    +
    +
    +
    +
    +
    -
    - [% IF ( CAN_user_parameters_manage_sysprefs ) %] - [% pref_ReturnpathDefault_link = BLOCK %]ReturnpathDefault[% END %] - Default: [% pref_ReturnpathDefault_link | $raw | $KohaSpan %] system preference - [% ELSE %] - Default: ReturnpathDefault system preference - [% END %] -
    -
  16. -
  17. + +
    + [% IF ( CAN_user_parameters_manage_sysprefs ) %] + [% pref_ReturnpathDefault_link = BLOCK %]ReturnpathDefault[% END %] + Default: [% pref_ReturnpathDefault_link | $raw | $KohaSpan %] system preference + [% ELSE %] + Default: ReturnpathDefault system preference + [% END %] +
    + +
    +
    + +
    +
    -
  18. -
  19. -
  20. + + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    [% IF OpacLibraryInfo %]
    [% OpacLibraryInfo.content | $raw %]
    - + Edit HTML content [% ELSE %] - Add HTML content + Add HTML content [% END %] -
  21. -
  22. + + +
    +
    +
    +
    -
    Enter as a single IP address, or a subnet such as 192.168.1.*
    -
  23. -
  24. + +
    Enter as a single IP address, or a subnet such as 192.168.1.*
    + +
    +
    +
    +
    -
    - [% IF ( CAN_user_parameters_manage_sysprefs ) %] - [% pref_MARCOrgCode_link = BLOCK %]MARCOrgCode[% END %] - Default: [% pref_MARCOrgCode_link | $raw | $KohaSpan %] system preference. - [% ELSE %] - Default: MARCOrgCode system preference. - [% END %] - Obtain a library code from the Library of Congress. -
    -
  25. -
  26. -
  27. + +
    + [% IF ( CAN_user_parameters_manage_sysprefs ) %] + [% pref_MARCOrgCode_link = BLOCK %]MARCOrgCode[% END %] + Default: [% pref_MARCOrgCode_link | $raw | $KohaSpan %] system preference. + [% ELSE %] + Default: MARCOrgCode system preference. + [% END %] + Obtain a library code from the Library of Congress. +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    -
  28. -
  29. + + +
    +
    + +
    +
    -
    Set to 'Yes' to show this library as a search option and on the libraries page in the OPAC.
    -
  30. -
  31. + +
    Set to 'Yes' to show this library as a search option and on the libraries page in the OPAC.
    + +
    +
    +
    +
    @@ -351,24 +485,28 @@ [% END %]
    -
  32. -
  33. + + +
    +
    -
    - Edit - - -
    -
  34. -
  35. + +
    + Edit + + +
    + +
    +
    -
    - Edit - - -
    -
  36. -
+ +
+ Edit + + +
+
[% IF additional_fields.size %] [% INCLUDE 'additional-fields-entry.inc' available=additional_fields values=additional_field_values wrap_fieldset=1 %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt index 5e71518f4bc..c9b603d563f 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/advsearch.tt @@ -46,7 +46,7 @@ [% IF edit_filter %]
Editing filter: [% edit_filter.name | html %] -
+
[% IF edit_filter.opac %] -- 2.39.5