Bugzilla – Attachment 165867 Details for
Bug 36545
Use select2 to improve multi-select in item search
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 36545: (follow-up) Style tweaks for Select2 multiple fields
Bug-36545-follow-up-Style-tweaks-for-Select2-multi.patch (text/plain), 4.17 KB, created by
Martin Renvoize (ashimema)
on 2024-04-30 12:01:03 UTC
(
hide
)
Description:
Bug 36545: (follow-up) Style tweaks for Select2 multiple fields
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2024-04-30 12:01:03 UTC
Size:
4.17 KB
patch
obsolete
>From 4ce84210c42d62d07310b4b12cb08e175927b289 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> >--- > .../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, >+ }); > }); > }); > </script> >-- >2.44.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 36545
:
164561
|
164861
|
164862
|
165018
|
165019
|
165838
|
165866
| 165867 |
165868