Bugzilla – Attachment 169533 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) Improve the appearance of the 'Clear search' button
Bug-33668-follow-up-Improve-the-appearance-of-the-.patch (text/plain), 2.49 KB, created by
Andreas Roussos
on 2024-07-24 23:46:27 UTC
(
hide
)
Description:
Bug 33668: (follow-up) Improve the appearance of the 'Clear search' button
Filename:
MIME Type:
Creator:
Andreas Roussos
Created:
2024-07-24 23:46:27 UTC
Size:
2.49 KB
patch
obsolete
>From 029d673768027c081e9579f6db2d062d810d3c23 Mon Sep 17 00:00:00 2001 >From: Andreas Roussos <a.roussos@dataly.gr> >Date: Wed, 24 Jul 2024 21:34:24 +0000 >Subject: [PATCH] Bug 33668: (follow-up) Improve the appearance of the 'Clear > search' button > >Changed fa-circle-xmark to fa-square-xmark to match the >appearance of the adjacent search button which is square >in very wide viewports and rectangular in narrower ones. > >Increased the size of the 'Clear search' button to 2rem. > >Improved the vertical & horizontal alignment to be as >pixel-perfect as possible. > >Used the same background colour as the Search button. > >Increased padding to alleviate the problem of search >keywords getting hidden behind the 'Clear search' button. > >Test plan: > >1) Apply the patch and run `yarn build`. >2) In the OPAC, type some text in the search box, and use > the 'X' icon to clear it. >3) Try to resize your browser window to different sizes, > and observe that the 'X' icon adjusts itself correctly. >--- > koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 11 ++++++++--- > koha-tmpl/opac-tmpl/bootstrap/js/global.js | 2 +- > 2 files changed, 9 insertions(+), 4 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index 19b72f42cf..1a7eda5d87 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -689,14 +689,19 @@ th { > } > .clear-search { > position: absolute; >- right: 20px; >- top: 50%; >+ right: .625rem; >+ top: 1.25rem; > transform: translateY( -50% ); > cursor: pointer; >- color: #999; >+ color: #548300; >+ font-size: 2rem; > } > } > >+#translControl1 { >+ padding-right: 2.5rem; >+} >+ > #cart-list-nav { > flex-grow: 2; > } >diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js >index 4e501773b1..0f939c3d24 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js >+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js >@@ -251,7 +251,7 @@ var facetHandler = function (e) { > > function setPlaceholder(){ > let search_placeholder = $("#masthead_search option:selected").data("placeholder"); >- let clearButton = $('<span class="clear-search"><i class="fa-solid fa-circle-xmark"></i></span>'); >+ let clearButton = $('<span class="clear-search"><i class="fa-solid fa-square-xmark"></i></span>'); > > $("#translControl1").attr("placeholder", search_placeholder).after(clearButton); > >-- >2.39.2
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