01fe0c02a5
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
73 lines
3.5 KiB
HTML
73 lines
3.5 KiB
HTML
{% if mobile %}
|
|
<header>
|
|
<div class="bz1lBb">
|
|
<form class="Pg70bf" id="search-form" method="POST">
|
|
<a class="logo-link mobile-logo"
|
|
href="/"
|
|
style="display:flex; justify-content:center; align-items:center;">
|
|
<div style="height: 1.75em;">
|
|
{{ logo|safe }}
|
|
</div>
|
|
</a>
|
|
<div class="H0PQec" style="width: 100%;">
|
|
<div class="sbc esbc autocomplete">
|
|
<input
|
|
id="search-bar"
|
|
autocapitalize="none"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
spellcheck="false"
|
|
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;"
|
|
type="text"
|
|
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 type="submit" style="display: none;">
|
|
<div class="sc"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
{% else %}
|
|
<header>
|
|
<div class="logo-div">
|
|
<a class="logo-link" href="/">
|
|
<div style="height: 1.65em;">
|
|
{{ logo|safe }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="search-div">
|
|
<form id="search-form" class="search-form" id="sf" method="POST">
|
|
<div class="autocomplete" style="width: 100%; flex: 1">
|
|
<div style="width: 100%; display: flex">
|
|
<input
|
|
id="search-bar"
|
|
autocapitalize="none"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
class="noHIxc"
|
|
name="q"
|
|
spellcheck="false"
|
|
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 '0px' }}; border-radius: 8px;">
|
|
<input name="tbm" value="{{ search_type }}" style="display: none">
|
|
<input type="submit" style="display: none;">
|
|
<div class="sc"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
{% endif %}
|
|
|
|
<script type="text/javascript" src="static/js/header.js"></script>
|