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