Add an "advanced search" toggle in result tabs

Adds a new advanced search icon alongside the result tabs for switching
to a different country from the result page.

This will obviously get populated with other methods of filtering
results, but for now it's just the country selector.
main
Ben Busby 2022-08-03 17:54:10 -06:00
parent 2eee0b87d5
commit cab1105169
No known key found for this signature in database
GPG Key ID: B9B7231E01D924A1
4 changed files with 65 additions and 28 deletions

View File

@ -14,7 +14,7 @@ header {
} }
.result-config { .result-config {
margin: 10px 0 10px 0; margin-bottom: 10px;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
} }
@ -128,6 +128,7 @@ a {
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18); box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18);
overflow: hidden; overflow: hidden;
margin-bottom: 10px;
} }
.header-tab-div-2 { .header-tab-div-2 {
@ -207,6 +208,24 @@ a.header-tab-a:visited {
border-left: 1px solid rgba(0, 0, 0, 0.12); border-left: 1px solid rgba(0, 0, 0, 0.12);
} }
.adv-search {
font-size: 30px;
}
.adv-search:hover {
cursor: pointer;
}
#adv-search-toggle {
display: none;
}
.result-collapsible {
max-height: 0px;
overflow: hidden;
transition: max-height .25s linear;
}
.search-bar-input { .search-bar-input {
display: block; display: block;
font-size: 16px; font-size: 16px;
@ -220,9 +239,12 @@ a.header-tab-a:visited {
overflow: hidden; overflow: hidden;
} }
#result-country {
max-width: 200px;
}
@media (max-width: 801px) { @media (max-width: 801px) {
.header-tab-div { .header-tab-div {
margin-bottom: 10px !important margin-bottom: 10px !important
} }
} }

View File

@ -1,4 +1,6 @@
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const advSearchToggle = document.getElementById("adv-search-toggle");
const advSearchDiv = document.getElementById("adv-search-div");
const searchBar = document.getElementById("search-bar"); const searchBar = document.getElementById("search-bar");
const countrySelect = document.getElementById("result-country"); const countrySelect = document.getElementById("result-country");
const arrowKeys = [37, 38, 39, 40]; const arrowKeys = [37, 38, 39, 40];
@ -9,11 +11,25 @@ document.addEventListener("DOMContentLoaded", () => {
n = str.lastIndexOf("/search"); n = str.lastIndexOf("/search");
if (n > 0) { if (n > 0) {
str = str.substring(0, n) + str = str.substring(0, n) +
`search?q=${searchBar.value}&country=${countrySelect.value}`; `/search?q=${searchBar.value}&country=${countrySelect.value}`;
window.location.href = str; window.location.href = str;
} }
} }
const toggleAdvancedSearch = on => {
if (on) {
advSearchDiv.style.maxHeight = "70px";
} else {
advSearchDiv.style.maxHeight = "0px";
}
localStorage.advSearchToggled = on;
}
toggleAdvancedSearch(JSON.parse(localStorage.advSearchToggled));
advSearchToggle.onclick = () => {
toggleAdvancedSearch(advSearchToggle.checked);
}
searchBar.addEventListener("keyup", function(event) { searchBar.addEventListener("keyup", function(event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
document.getElementById("search-form").submit(); document.getElementById("search-form").submit();

View File

@ -28,11 +28,5 @@
"href": "search?q={query}", "href": "search?q={query}",
"name": "News", "name": "News",
"selected": false "selected": false
},
"books": {
"tbm": "bks",
"href": "search?q={query}",
"name": "Books",
"selected": false
} }
} }

View File

@ -44,6 +44,8 @@
<a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a> <a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<label for="adv-search-toggle" id="adv-search-label" class="adv-search"></label>
<input id="adv-search-toggle" type="checkbox">
<div class="header-tab-div-end"></div> <div class="header-tab-div-end"></div>
</div> </div>
</div> </div>
@ -100,12 +102,17 @@
<a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a> <a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<label for="adv-search-toggle" id="adv-search-label" class="adv-search"></label>
<input id="adv-search-toggle" type="checkbox">
<div class="header-tab-div-end"></div> <div class="header-tab-div-end"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="" id="s">
</div>
{% endif %}
<div class="result-collapsible" id="adv-search-div">
<div class="result-config"> <div class="result-config">
<label for="config-country">{{ translation['config-country'] }}: </label> <label for="config-country">{{ translation['config-country'] }}: </label>
<select name="country" id="result-country"> <select name="country" id="result-country">
@ -123,8 +130,6 @@
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div class="" id="s">
</div> </div>
{% endif %}
<script type="text/javascript" src="{{ cb_url('header.js') }}"></script> <script type="text/javascript" src="{{ cb_url('header.js') }}"></script>