Bugzilla – Attachment 188654 Details for
Bug 33668
Add a 'clear search' button/icon inside the search input box on the OPAC
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 33668: Add clear search button to the opac
Bug-33668-Add-clear-search-button-to-the-opac.patch (text/plain), 3.03 KB, created by
Nick Clemens (kidclamp)
on 2025-10-30 13:40:21 UTC
(
hide
)
Description:
Bug 33668: Add clear search button to the opac
Filename:
MIME Type:
Creator:
Nick Clemens (kidclamp)
Created:
2025-10-30 13:40:21 UTC
Size:
3.03 KB
patch
obsolete
>From 5cdde25af0e1b8478abb70b914c8c4aebfcf8ea2 Mon Sep 17 00:00:00 2001 >From: Laura_Escamilla <laura.escamilla@bywatersolutions.com> >Date: Tue, 23 Jul 2024 20:37:48 +0000 >Subject: [PATCH] Bug 33668: Add clear search button to the opac > >This patch adds the button to the masthead after the input box and before >the search button >--- > .../opac-tmpl/bootstrap/css/src/opac.scss | 11 +++++++++++ > .../bootstrap/en/includes/masthead.inc | 3 +++ > koha-tmpl/opac-tmpl/bootstrap/js/global.js | 19 +++++++++++++++++++ > 3 files changed, 33 insertions(+) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index d407c017594..ce54b8d3198 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -662,6 +662,17 @@ th { > font-weight: bold; > margin: 0; > } >+ >+ .clear-search { >+ cursor: pointer; >+ color: #548300; >+ font-size: 2rem; >+ display: inline-flex; >+ } >+} >+ >+#translControl1 { >+ padding-right: 2.5rem; > } > > #cart-list-nav { >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >index c136dfeb29a..9c98a49ebb3 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >@@ -364,6 +364,9 @@ > [% END # / opac_limit_override %] > [% END # / OpacAddMastheadLibraryPulldown %] > >+ <div class="order-5 col-sm-auto clear-search"> >+ <i class="fa-solid fa-circle-xmark" aria-hidden="true" title="Clear search" aria-label="Clear search"></i> >+ </div> > <div class="order-5 col-sm-auto"> > <button type="submit" id="searchsubmit" class="btn btn-primary" title="Search" aria-label="Search"> > <i class="fa fa-search" aria-hidden="true"></i> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js >index 15fc44db361..1739f51ce4b 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js >+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js >@@ -262,7 +262,26 @@ function setPlaceholder() { > let search_placeholder = $("#masthead_search option:selected").data( > "placeholder" > ); >+ let clearButton = $(".clear-search"); >+ > $("#translControl1").attr("placeholder", search_placeholder); >+ >+ if ($("#translControl1").val() == "") { >+ clearButton.hide(); >+ } >+ >+ clearButton.click(function () { >+ $("#translControl1").val("").focus(); >+ $(this).hide(); >+ }); >+ >+ $("#translControl1").on("input", function () { >+ if ($(this).val() !== "") { >+ clearButton.show(); >+ } else { >+ clearButton.hide(); >+ } >+ }); > } > > $(document).ready(function () { >-- >2.39.5
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 33668
:
150602
|
169443
|
169444
|
169445
|
169446
|
169525
|
169526
|
169527
|
169528
|
169529
|
169530
|
169531
|
169532
|
169533
|
169534
|
169716
|
169717
|
169755
|
169756
|
169757
|
169758
|
169759
|
169760
|
169761
|
176579
|
176580
|
176813
|
176814
|
176815
|
176816
|
176817
|
176818
|
176819
| 188654