Bugzilla – Attachment 191868 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: (follow-up) Move clear button inside form field
Bug-33668-follow-up-Move-clear-button-inside-form-.patch (text/plain), 6.24 KB, created by
Owen Leonard
on 2026-01-22 15:10:18 UTC
(
hide
)
Description:
Bug 33668: (follow-up) Move clear button inside form field
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2026-01-22 15:10:18 UTC
Size:
6.24 KB
patch
obsolete
>From 82edb2e8cff3e3f4b00d2fa77e6d3ca430e5ad9e Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Wed, 17 Dec 2025 09:43:54 -0500 >Subject: [PATCH] Bug 33668: (follow-up) Move clear button inside form field > >--- > .../opac-tmpl/bootstrap/css/src/opac.scss | 30 ++++++++++++-- > .../bootstrap/en/includes/masthead.inc | 40 +++++++++---------- > 2 files changed, 46 insertions(+), 24 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index 2a140f6a6b9..215a67e42a7 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -658,11 +658,33 @@ th { > margin: 0; > } > >- .clear-search { >+ .quick-search-wrapper { >+ position: relative; >+ } >+ >+ .quick-search-wrapper input:placeholder-shown + .clear-search { >+ opacity: 0; >+ pointer-events: none; >+ } >+ >+ .quick-search-wrapper .clear-search { >+ position: absolute; >+ border: none; >+ display: block; >+ width: 1em; >+ height: 1em; >+ line-height: 1.06em; >+ font-size: 1.2em; >+ border-radius: 50%; >+ top: 0; >+ bottom: 0; >+ right: 5px; >+ margin: auto; >+ background: #ddd; >+ padding: 0; >+ outline: none; > cursor: pointer; >- color: #548300; >- font-size: 2rem; >- display: inline-flex; >+ transition: 0.1s; > } > } > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >index c95f0d88524..54f6eb9503c 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >@@ -290,23 +290,26 @@ > <!-- /.col-sm-auto --> > > <div class="col order-4 order-sm-3"> >- [% IF ( !Koha.Preference( 'OpacAddMastheadLibraryPulldown' ) == 1 && mylibraryfirst ) %] >- <label for="translControl1" class="visually-hidden">Search the catalog in [% Branches.GetName( mylibraryfirst ) | html %]</label> >- <input >- type="text" >- class="transl1 form-control form-control-filtered" >- id="translControl1" >- name="q" >- value="[% ms_value | html %]" >- data-bs-toggle="tooltip" >- data-bs-placement="top" >- title="Searching in [% Branches.GetName( mylibraryfirst ) | html %] only" >- placeholder="Search the catalog" >- /><span id="translControl"></span> >- [% ELSE %] >- <label for="translControl1" class="visually-hidden">Search the catalog</label> >- <input type="text" class="transl1 form-control" id="translControl1" name="q" value="[% ms_value | html %]" placeholder="Search the catalog" /><span id="translControl"></span> >- [% END # /ms_value %] >+ <div class="quick-search-wrapper"> >+ [% IF ( !Koha.Preference( 'OpacAddMastheadLibraryPulldown' ) == 1 && mylibraryfirst ) %] >+ <label for="translControl1" class="visually-hidden">Search the catalog in [% Branches.GetName( mylibraryfirst ) | html %]</label> >+ <input >+ type="text" >+ class="transl1 form-control form-control-filtered" >+ id="translControl1" >+ name="q" >+ value="[% ms_value | html %]" >+ data-bs-toggle="tooltip" >+ data-bs-placement="top" >+ title="Searching in [% Branches.GetName( mylibraryfirst ) | html %] only" >+ placeholder="Search the catalog" >+ /><span id="translControl"></span> >+ [% ELSE %] >+ <label for="translControl1" class="visually-hidden">Search the catalog</label> >+ <input type="text" class="transl1 form-control" id="translControl1" name="q" value="[% ms_value | html %]" placeholder="Search the catalog" /><span id="translControl"></span> >+ [% END # /ms_value %] >+ <button class="clear-search" type="reset" title="Clear search" aria-label="Clear search"> × </button> >+ </div> > </div> > <!-- /.col --> > >@@ -364,9 +367,6 @@ > [% 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> >-- >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
|
191867
|
191868
|
192096
|
192097