From 4ce84210c42d62d07310b4b12cb08e175927b289 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 12 Apr 2024 17:46:43 +0000 Subject: [PATCH] Bug 36545: (follow-up) Style tweaks for Select2 multiple fields This patch does some fine-tuning of Select2 style on fields which accept multiple selections. The patch also changes the way the form rows are displayed on this page. I thought that the Select2 fields should be wider to accpet multiple selections without the container wrapping onto another line. The patch also sets the Select2 "closeOnSelect" option to false on this page because I think that makes more sense in a situation where multiple selections might be made. To test, apply the patch and clear your browser cache. - Go to item search in the staff client - Confirm that the form looks good and adjusts well to various browser widths. - Make some selections to confirm that the style of selections looks good and that the dropdown stays open as you make multiple selections. Signed-off-by: Michaela Sieber Signed-off-by: Martin Renvoize --- .../intranet-tmpl/prog/css/itemsearchform.css | 40 ++++++++++++++++--- koha-tmpl/intranet-tmpl/prog/css/select2.css | 16 ++++++++ .../prog/en/modules/catalogue/itemsearch.tt | 4 +- 3 files changed, 54 insertions(+), 6 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/itemsearchform.css b/koha-tmpl/intranet-tmpl/prog/css/itemsearchform.css index 15c82a92e5a..30011ebcceb 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/itemsearchform.css +++ b/koha-tmpl/intranet-tmpl/prog/css/itemsearchform.css @@ -1,15 +1,27 @@ .form-field { - margin: 5px 0; + align-items: center; + display: flex; + gap: .5em; + margin: 5px 0; } .form-field > * { vertical-align: middle; } +#itemsearchform p { + margin-left: 6em; +} + +label { + margin-bottom: 0; +} + .form-field-label { - display: inline-block; - text-align: right; - width: 10em; + display: inline-block; + font-weight: bold; + text-align: right; + width: 10em; } .form-field-conjunction[disabled] { @@ -37,4 +49,22 @@ th select { th#items_title { min-width: 12em; -} \ No newline at end of file +} + +#itemsearchform select, +input[type="text"] { + background-color: #FFF; + border: 1px solid #AAAAAA; + border-radius: 4px; + color: #495057; + display: inline-block; + font-size: 1.5rem; + height: calc( 1.5em + .75rem + 2px ); + line-height: 1.5; + padding: .375rem .75rem; +} + +.select2.select2-container.select2-container--default { + flex-grow: 1; + max-width: 60%; +} diff --git a/koha-tmpl/intranet-tmpl/prog/css/select2.css b/koha-tmpl/intranet-tmpl/prog/css/select2.css index 13d578e07e4..8046026ea50 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/select2.css +++ b/koha-tmpl/intranet-tmpl/prog/css/select2.css @@ -28,3 +28,19 @@ .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #565656 transparent transparent transparent; } + +.select2-container--default .select2-selection--multiple .select2-selection__choice { + background-color: #F7F7F7; + margin-bottom: 2px; + padding: 3px 8px; +} + +.select2-container--default .select2-selection--multiple .select2-selection__clear { + color: #888; + font-size: 125%; + margin-top: 3px; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { + margin-right: 3px; +} diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/itemsearch.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/itemsearch.tt index eeb9145293f..3cc7bf87c89 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/itemsearch.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/itemsearch.tt @@ -728,7 +728,9 @@ let selectFields = document.querySelectorAll('select[multiple]'); selectFields.forEach((selectField) => { selectField.style.minWidth = '320px'; - $(selectField).select2(); + $(selectField).select2({ + closeOnSelect: false, + }); }); }); -- 2.44.0