From 4369a65bd5093847f2d598d8ce7cf63b27386299 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
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 <michaela.sieber@kit.edu>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
---
 .../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 15c82a92e5..30011ebcce 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 13d578e07e..8046026ea5 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 eeb9145293..3cc7bf87c8 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,
+                });
             });
         });
     </script>
-- 
2.39.5