From cb18bc6ccc7027f87a4043669dbcb31b78a32d75 Mon Sep 17 00:00:00 2001
From: Ben Busby <33362396+benbusby@users.noreply.github.com>
Date: Tue, 26 May 2020 10:58:37 -0600
Subject: [PATCH] Updated autocomplete styling

Added dark theme specific stylesheet to use if dark mode is active
---
 app/routes.py                  |  1 +
 app/static/css/search-dark.css | 35 ++++++++++++++++++++++++++++++++++
 app/templates/display.html     |  2 +-
 app/templates/index.html       |  2 +-
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 app/static/css/search-dark.css

diff --git a/app/routes.py b/app/routes.py
index 82b3147..3f50082 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -141,6 +141,7 @@ def search():
         'display.html',
         query=urlparse.unquote(q),
         search_type=search_type,
+        dark_mode=g.user_config.dark,
         response=formatted_results,
         search_header=render_template(
             'header.html',
diff --git a/app/static/css/search-dark.css b/app/static/css/search-dark.css
new file mode 100644
index 0000000..2ac5b47
--- /dev/null
+++ b/app/static/css/search-dark.css
@@ -0,0 +1,35 @@
+.autocomplete {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.autocomplete-items {
+    position: absolute;
+    border: 1px solid #685e79;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+
+    /*position the autocomplete items to be the same width as the container:*/
+    top: 100%;
+    left: 0;
+    right: 0;
+}
+
+.autocomplete-items div {
+    padding: 10px;
+    cursor: pointer;
+    color: #fff;
+    background-color: #000;
+    border-bottom: 1px solid #242424;
+}
+
+.autocomplete-items div:hover {
+    background-color: #404040;
+}
+
+.autocomplete-active {
+    background-color: #685e79 !important;
+    color: #ffffff;
+}
\ No newline at end of file
diff --git a/app/templates/display.html b/app/templates/display.html
index e66de6f..94ebed2 100644
--- a/app/templates/display.html
+++ b/app/templates/display.html
@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="referrer" content="no-referrer">
         <script type="text/javascript" src="/static/js/autocomplete.js"></script>
-        <link rel="stylesheet" href="/static/css/search.css">
+        <link rel="stylesheet" href="/static/css/{{ 'search-dark' if dark_mode else 'search' }}.css">
         <link rel="stylesheet" href="/static/css/header.css">
         <title>{{ query }} - Whoogle Search</title>
     </head>
diff --git a/app/templates/index.html b/app/templates/index.html
index b4edf12..9279031 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -21,7 +21,7 @@
         <script type="text/javascript" src="/static/js/controller.js"></script>
         <link rel="search" href="/opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="/static/css/search.css">
+        <link rel="stylesheet" href="/static/css/{{ 'search-dark' if dark_mode else 'search' }}.css">
         <link rel="stylesheet" href="/static/css/main.css">
 	<title>Whoogle Search</title>
     </head>