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
main
Ben Busby 2021-04-21 11:38:19 -04:00
parent 7136197e5d
commit 01fe0c02a5
No known key found for this signature in database
GPG Key ID: 3B08611DF6E62ED2
4 changed files with 28 additions and 4 deletions

14
app/static/css/input.css Normal file
View File

@ -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;
}

View File

@ -57,4 +57,12 @@ const checkForTracking = () => {
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
checkForTracking(); 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 = "";
});
}); });

View File

@ -5,6 +5,7 @@
<link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search"> <link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer"> <meta name="referrer" content="no-referrer">
<link rel="stylesheet" href="static/css/input.css">
<link rel="stylesheet" href="static/css/search.css"> <link rel="stylesheet" href="static/css/search.css">
<link rel="stylesheet" href="static/css/variables.css"> <link rel="stylesheet" href="static/css/variables.css">
<link rel="stylesheet" href="static/css/header.css"> <link rel="stylesheet" href="static/css/header.css">

View File

@ -20,10 +20,11 @@
class="noHIxc" class="noHIxc"
name="q" name="q"
style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important; 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)' }}; 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;" border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '' }}; border-radius: 8px;"
type="text" type="text"
value="{{ query }}"> value="{{ query }}">
<input style="color: {{ 'var(--whoogle-dark-text)' if config.dark else 'var(--whoogle-text)' }}" id="search-reset" type="reset" value="x">
<input name="tbm" value="{{ search_type }}" style="display: none"> <input name="tbm" value="{{ search_type }}" style="display: none">
<input type="submit" style="display: none;"> <input type="submit" style="display: none;">
<div class="sc"></div> <div class="sc"></div>
@ -56,8 +57,8 @@
type="text" type="text"
value="{{ query }}" value="{{ query }}"
style="background-color: {{ 'var(--whoogle-dark-result-bg)' if config.dark else 'var(--whoogle-result-bg)' }} !important; 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)' }}; 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;"> border: {{ '2px solid var(--whoogle-dark-element-bg)' if config.dark else '0px' }}; border-radius: 8px;">
<input name="tbm" value="{{ search_type }}" style="display: none"> <input name="tbm" value="{{ search_type }}" style="display: none">
<input type="submit" style="display: none;"> <input type="submit" style="display: none;">
<div class="sc"></div> <div class="sc"></div>