From 061b38c735d7842e5c2cf68f18cd58ca076a45c8 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 23 Apr 2021 12:01:57 +0000
Subject: [PATCH] Bug 27113: (follow-up) Move new CSS to main SCSS files

This patch removes the separate CSS files added for the autocomplete
feature and puts them into the "main" SCSS files. I think a separate
file isn't necessary because the amount of CSS it adds is so small.

I've also tweaked the style of the autocomplete menu shown when you use
the arrow keys to navigate through the autocomplete choices. I think the
previous white-on-light-green didn't have enough contrast.

To test, follow the previous test plan, being careful to observe how it
works when the autocomplete menu has been triggered and you use the
arrow keys to navigate through the results.
---
 .../prog/css/elasticsearch/autocomplete.css        | 28 -----------------
 .../intranet-tmpl/prog/css/src/staff-global.scss   | 34 +++++++++++++++++++++
 .../prog/en/includes/doc-head-close.inc            |  5 ----
 .../css/opac-elasticsearch/opac-autocomplete.css   | 29 ------------------
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss    | 35 ++++++++++++++++++++++
 .../bootstrap/en/includes/doc-head-close.inc       |  5 ----
 6 files changed, 69 insertions(+), 67 deletions(-)
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/css/elasticsearch/autocomplete.css
 delete mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/opac-elasticsearch/opac-autocomplete.css

diff --git a/koha-tmpl/intranet-tmpl/prog/css/elasticsearch/autocomplete.css b/koha-tmpl/intranet-tmpl/prog/css/elasticsearch/autocomplete.css
deleted file mode 100644
index 40dfefb0d6..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/css/elasticsearch/autocomplete.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.autocomplete {
-  /*the container must be positioned relative:*/
-  position: relative;
-  display: inline-block;
-}
-.autocomplete-items {
-    position: absolute;
-    border: 1px solid #d4d4d4;
-    border-bottom: none;
-    border-top: none;
-    z-index: 99;
-    /*position the autocomplete items to be the same width as the container:*/
-  }
-  .autocomplete-items div {
-    padding: 10px;
-    cursor: pointer;
-    background-color: #fff;
-    border-bottom: 1px solid #d4d4d4;
-  }
-  .autocomplete-items div:hover {
-    /*when hovering an item:*/
-    background-color: #e9e9e9;
-  }
-  .autocomplete-active {
-    /*when navigating through the items using the arrow keys:*/
-    background-color: #cedfb1 !important;
-    color: #ffffff;
-  }
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 6d9db96973..5d7085825e 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -4426,6 +4426,40 @@ div .suggestion_note {
     }
 }
 
+/* Elasticsearch autocomplete menu */
+.autocomplete {
+    /*the container must be positioned relative:*/
+    position: relative;
+    display: inline-block;
+}
+
+.autocomplete-items {
+    position: absolute;
+    border: 1px solid #d4d4d4;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+    /*position the autocomplete items to be the same width as the container:*/
+
+    div {
+        padding: 10px;
+        cursor: pointer;
+        background-color: #fff;
+        border-bottom: 1px solid #d4d4d4;
+
+        &:hover {
+            /*when hovering an item:*/
+            background-color: #e9e9e9;
+        }
+
+        &.autocomplete-active {
+            /*when navigating through the items using the arrow keys:*/
+            background-color: lighten(#85CA11, 45%);
+        }
+    }
+}
+/* /Elasticsearch autocomplete menu */
+
 @media (min-width: 200px) {
 
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
index a2a5c5d258..c2833e3009 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
@@ -21,11 +21,6 @@
 [% Asset.css("css/print.css", { media = "print" }) | $raw %]
 [% INCLUDE intranetstylesheet.inc %]
 [% IF ( bidi ) %][% Asset.css("css/right-to-left.css") | $raw %][% END %]
-<!-- Intranet inc CSS IntranetAutocompleteElasticSearch -->
-[% IF ( Koha.Preference('IntranetAutocompleteElasticSearch') ) %]
-    [% SET Optylesheet = 'elasticsearch/autocomplete.css' %]
-    <link rel="stylesheet" type="text/css" href="[% interface | url %]/[% theme | url %]/css/[% Optylesheet | url %]" />
-[% END %]
 
 <script>
 var Koha = {};
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/opac-elasticsearch/opac-autocomplete.css b/koha-tmpl/opac-tmpl/bootstrap/css/opac-elasticsearch/opac-autocomplete.css
deleted file mode 100644
index 2b8a566568..0000000000
--- a/koha-tmpl/opac-tmpl/bootstrap/css/opac-elasticsearch/opac-autocomplete.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/* CSS file OPACAutocompleteElasticSearch */
-.autocomplete {
-  /*the container must be positioned relative:*/
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-.autocomplete-items {
-    position: absolute;
-    border: 1px solid #d4d4d4;
-    border-bottom: none;
-    border-top: none;
-    z-index: 99;
-  }
-  .autocomplete-items div {
-    padding: 10px;
-    cursor: pointer;
-    background-color: #fff;
-    border-bottom: 1px solid #d4d4d4;
-  }
-  .autocomplete-items div:hover {
-    /*when hovering an item:*/
-    background-color: #e9e9e9;
-  }
-  .autocomplete-active {
-    /*when navigating through the items using the arrow keys:*/
-    background-color: #cedfb1 !important;
-    color: #ffffff;
-  }
\ No newline at end of file
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 391a10f296..f6e8d768bb 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2626,4 +2626,39 @@ $star-selected: #EDB867;
     margin-bottom: 1rem;
 }
 
+/* Elasticsearch autocomplete menu */
+.autocomplete {
+    /*the container must be positioned relative:*/
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.autocomplete-items {
+    position: absolute;
+    border: 1px solid #d4d4d4;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+
+    div {
+        padding: 10px;
+        cursor: pointer;
+        background-color: #fff;
+        border-bottom: 1px solid #d4d4d4;
+
+        &:hover {
+            /*when hovering an item:*/
+            background-color: #e9e9e9;
+        }
+
+        &.autocomplete-active {
+            /*when navigating through the items using the arrow keys:*/
+            background-color: lighten( $input-btn-focus-color, 45% );
+        }
+    }
+}
+
+/* /Elasticsearch autocomplete menu */
+
 @import "responsive";
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
index c09b8a6d25..e0963ca5d3 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
@@ -23,11 +23,6 @@
         [% SET opaclayoutstylesheet = 'opac.css' %]
     [% END %]
 [% END %]
-<!-- OPAC inc CSS OPACAutocompleteElasticSearch -->
-[% IF ( Koha.Preference('OPACAutocompleteElasticSearch') ) %]
-    [% SET Optylesheet = 'opac-elasticsearch/opac-autocomplete.css' %]
-    <link rel="stylesheet" type="text/css" href="[% interface | url %]/[% theme | url %]/css/[% Optylesheet | url %]" />
-[% END %]
 [% IF (opaclayoutstylesheet.match('^https?:|^\/')) %]
     <link rel="stylesheet" type="text/css" href="[% opaclayoutstylesheet | url %]" />
 [% ELSE %]
-- 
2.11.0