Attachment 121558 Details for Bug 27113 – Bug 27113: (follow-up) Move new CSS to main SCSS files

[patch] Bug 27113: (follow-up) Move new CSS to main SCSS files

Bug-27113-follow-up-Move-new-CSS-to-main-SCSS-file.patch (text/plain), 7.79 KB, created by David Nind on 2021-06-03 00:51:04 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: David Nind

Created: 2021-06-03 00:51:04 UTC

Size: 7.79 KB

patch

obsolete

>From 77044b864e5ba858a39b88b7b7686478fd74ac77 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 you must rebuild the OPAC and staff client CSS:
>https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client
>
>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.
>
>Signed-off-by: David Nind <david@davidnind.com>
>---
> .../prog/css/elasticsearch/autocomplete.css   | 28 ---------------
> .../prog/css/src/staff-global.scss            | 34 ++++++++++++++++++
> .../prog/en/includes/doc-head-close.inc       |  5 ---
> .../opac-elasticsearch/opac-autocomplete.css  | 29 ---------------
> .../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 c026bae8b1..8f42529cf7 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
>@@ -22,11 +22,6 @@
> [% Asset.css("css/print.css", { media = "print" }) | $raw %]
> [% INCLUDE intranetstylesheet.inc %]
> [% IF ( bidi ) %][% Asset.css("css/right-to-left.css") | $raw %][% END %]
>-
>-[% 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 7bab9bc9b6..c4b590b805 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 %]
>-
>-[% 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.20.1

Actions: View | Diff | Splinter Review

Attachments on bug 27113: 114168 | 114169 | 114945 | 115117 | 116293 | 119979 | 120028 | 120029 | 120084 | 120088 | 120109 | 120140 | 120141 | 120806 | 121497 | 121498 | 121555 | 121556 | 121557 | 121558 | 131207 | 131208 | 131209 | 131210 | 131211 | 132360 | 132361 | 132362 | 132363 | 132364 | 132808 | 132945 | 132946 | 133042 | 133045 | 133407 | 133409 | 133410 | 136312 | 136456 | 136457 | 136464 | 136465 | 136653 | 136657 | 136658 | 136659 | 136660 | 137436 | 137437 | 137438 | 137439 | 137780 | 137781 | 137782 | 137783 | 139624 | 141466 | 145167 | 146015 | 159769 | 159770 | 159771 | 159772 | 159773 | 159774 | 159775 | 160134 | 160135 | 160136 | 160137 | 160138 | 160139 | 160140 | 160141 | 160142 | 161076 | 161077 | 163826 | 165895 | 165896 | 165897 | 165898 | 165899 | 165900 | 165901 | 165902 | 165903 | 165904 | 165913 | 165922