From 56ddbcab8324d94286c3bfef2e9b33ceb912d6d1 Mon Sep 17 00:00:00 2001 From: Andreas Roussos 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. Signed-off-by: Roman Dolny --- 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 8db01af8b1..1932895284 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -658,14 +658,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 f36378be3d..07683eb0fe 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 = $(''); + let clearButton = $(''); $("#translControl1").attr("placeholder", search_placeholder).after(clearButton); -- 2.39.5