From ceffdb1e4e08e39cc3b6354e21ad9d40ffd53122 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 21 Apr 2021 10:26:54 -0400 Subject: [PATCH 01/10] Bump py from 1.8.1 to 1.10.0 (#293) Bumps [py](https://github.com/pytest-dev/py) from 1.8.1 to 1.10.0. - [Release notes](https://github.com/pytest-dev/py/releases) - [Changelog](https://github.com/pytest-dev/py/blob/master/CHANGELOG.rst) - [Commits](https://github.com/pytest-dev/py/compare/1.8.1...1.10.0) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- requirements.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/requirements.txt b/requirements.txt index 0e4cdf0..ad18435 100644 --- a/requirements.txt +++ b/requirements.txt @@ -16,7 +16,7 @@ MarkupSafe==1.1.1 more-itertools==8.3.0 packaging==20.4 pluggy==0.13.1 -py==1.8.1 +py==1.10.0 pycodestyle==2.6.0 pycparser==2.19 pyOpenSSL==19.1.0 From 05133bca3ad89ec679ae8d25ee7aa9bc99d2f22a Mon Sep 17 00:00:00 2001 From: Ben Busby Date: Wed, 21 Apr 2021 10:48:26 -0400 Subject: [PATCH 02/10] Disable autocorrect on mobile search inputs Fixes #292 --- app/templates/header.html | 28 ++++++++++++++++++++++------ app/templates/index.html | 22 ++++++++++++++++++++-- 2 files changed, 42 insertions(+), 8 deletions(-) diff --git a/app/templates/header.html b/app/templates/header.html index 5973274..e9ab529 100644 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -11,11 +11,19 @@
- + type="text" + value="{{ query }}">
@@ -37,9 +45,17 @@
- diff --git a/app/templates/index.html b/app/templates/index.html index ee7cd2b..fa2b2ab 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -42,7 +42,16 @@
- +
@@ -138,7 +147,16 @@
- +
  From 449ab74cc3c7562bb0401ef99a6a6e49f2bfebdc Mon Sep 17 00:00:00 2001 From: Ben Busby Date: Wed, 21 Apr 2021 10:49:27 -0400 Subject: [PATCH 03/10] Fix missing text style for active search suggestions --- app/static/css/light-theme.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/static/css/light-theme.css b/app/static/css/light-theme.css index de76eb6..9221b02 100644 --- a/app/static/css/light-theme.css +++ b/app/static/css/light-theme.css @@ -122,6 +122,7 @@ input { .autocomplete-items div:hover { background-color: var(--whoogle-element-bg); + color: var(--whoogle-contrast-text) !important; } .autocomplete-active { From a1ca5aa97b07d5284c8252968d4d4a551e265758 Mon Sep 17 00:00:00 2001 From: Ben Busby Date: Wed, 21 Apr 2021 11:38:19 -0400 Subject: [PATCH 04/10] Add button to clear search input on mobile This was unfortunately a bit more complex than just adding an HTML reset button, since reset buttons only "reset" input content to its original value rather than clearing it. This doesn't work for Whoogle's needs, since inputs on search result pages are auto populated with the search content as their default value. A reset button was introduced anyways, but is controlled by a few lines of javascript to allow completely clearing the search input. The button will only appear on mobile searches. At the moment, it isn't particularly pretty, but is functional. It uses just a plain "x" character and is always visible on mobile search result pages. This leaves plenty of room for improvement moving forward. Fixes #291 --- app/static/css/input.css | 14 ++++++++++++++ app/static/js/utils.js | 8 ++++++++ app/templates/display.html | 1 + app/templates/header.html | 9 +++++---- 4 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 app/static/css/input.css diff --git a/app/static/css/input.css b/app/static/css/input.css new file mode 100644 index 0000000..96cc108 --- /dev/null +++ b/app/static/css/input.css @@ -0,0 +1,14 @@ +#search-bar { + background: transparent !important; + padding-right: 50px; +} + +#search-reset { + all: unset; + margin-left: -50px; + text-align: center; + background-color: transparent !important; + cursor: pointer; + height: 40px; + width: 50px; +} diff --git a/app/static/js/utils.js b/app/static/js/utils.js index 56e052f..3cf4a5d 100644 --- a/app/static/js/utils.js +++ b/app/static/js/utils.js @@ -57,4 +57,12 @@ const checkForTracking = () => { document.addEventListener("DOMContentLoaded", function() { checkForTracking(); + + // Clear input if reset button tapped + const search = document.getElementById("search-bar"); + const resetBtn = document.getElementById("search-reset"); + resetBtn.addEventListener("click", event => { + event.preventDefault(); + search.value = ""; + }); }); diff --git a/app/templates/display.html b/app/templates/display.html index d21bd6b..398e276 100644 --- a/app/templates/display.html +++ b/app/templates/display.html @@ -5,6 +5,7 @@ + diff --git a/app/templates/header.html b/app/templates/header.html index e9ab529..1e0cbd3 100644 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -20,10 +20,11 @@ class="noHIxc" name="q" style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important; - color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; - border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;" + color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; + border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;" type="text" value="{{ query }}"> +
@@ -56,8 +57,8 @@ type="text" value="{{ query }}" style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important; - color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; - border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"> + color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}; + border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }}; border-radius: 8px;">
From 4209ce1a4b59054de7d234a9e4ce6194e652ed24 Mon Sep 17 00:00:00 2001 From: Ben Busby Date: Thu, 22 Apr 2021 10:02:15 -0400 Subject: [PATCH 05/10] Focus search input after clearing w/ reset btn See #291 --- app/static/js/utils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/static/js/utils.js b/app/static/js/utils.js index 3cf4a5d..d13bac9 100644 --- a/app/static/js/utils.js +++ b/app/static/js/utils.js @@ -64,5 +64,6 @@ document.addEventListener("DOMContentLoaded", function() { resetBtn.addEventListener("click", event => { event.preventDefault(); search.value = ""; + search.focus(); }); }); From 270794481c859276a4bf7636f2837d253ca42128 Mon Sep 17 00:00:00 2001 From: Ben Busby Date: Thu, 22 Apr 2021 16:23:00 -0400 Subject: [PATCH 06/10] Remove gap between input and result types Enforces 0 margin for the search input form on the result page, which removes the weird gap that is seen by default. Also made minor changes to the border styling. Desktop searches now have a single bottom border in dark mode rather than an all around border, and the border around the mobile search result input was removed entirely. --- app/static/css/dark-theme.css | 2 +- app/static/css/header.css | 7 ++++++- app/templates/header.html | 9 ++++----- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/app/static/css/dark-theme.css b/app/static/css/dark-theme.css index 1994869..e8ef1f5 100644 --- a/app/static/css/dark-theme.css +++ b/app/static/css/dark-theme.css @@ -66,7 +66,7 @@ select { } #search-bar { - border: 2px solid var(--whoogle-dark-element-bg) !important; + border-color: var(--whoogle-dark-element-bg) !important; color: var(--whoogle-dark-text) !important; } diff --git a/app/static/css/header.css b/app/static/css/header.css index a7c8461..61f6479 100644 --- a/app/static/css/header.css +++ b/app/static/css/header.css @@ -27,6 +27,11 @@ header { font-smoothing: antialiased; } +.search-bar-desktop { + border-radius: 8px 8px 0 0; + height: 40px !important; +} + .search-div { border-radius: 8px 8px 0 0; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18); @@ -37,6 +42,7 @@ header { height: 39px; display: flex; width: 100%; + margin: 0px; } .search-input { @@ -61,7 +67,6 @@ header { display: block; } - #main>div:focus-within { border-radius: 8px; box-shadow: 0 0 6px 1px #2375e8; diff --git a/app/templates/header.html b/app/templates/header.html index 1e0cbd3..4eb7822 100644 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -1,7 +1,7 @@ {% if mobile %}
-
- +
+