klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-22 14:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

forum: improve search bar UX behavior

Browse Source
This commit is contained in:
Antoine Bartuccio 2018-12-12 15:45:05 +01:00 committed by Skia
parent e421a2b4cd
commit 721b22a1e9
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
forum/templates/forum/macros.jinja
View File

@ -157,9 +157,31 @@
{% macro display_search_bar() %} {% macro display_search_bar() %}
<form class="search_bar" action="{{ url('forum:search') }}" method="GET"> <form class="search_bar" action="{{ url('forum:search') }}" method="GET">
<input type="text" placeholder="{% trans %}Search{% endtrans %}" name="query"/> <input type="text" id="forum_search_input" placeholder="{% trans %}Search{% endtrans %}" name="query"/>
<input type="checkbox" class="sreach_check" name="order" value="date" checked> {% trans %}Order by date{% endtrans %}<br> <input type="checkbox" id="forum_search_order_date" class="sreach_check" name="order" value="date" checked> {% trans %}Order by date{% endtrans %}<br>
<input type="submit" class="search_bouton" value="{% trans %}Search{% endtrans %}"/> <input type="submit" class="search_bouton" value="{% trans %}Search{% endtrans %}"/>
<script type="text/javascript">
// Uncheck the order by date checkbox if previously unchecked
const searchParams = new URLSearchParams(window.location.search);
var waitForJQuery = setInterval(function () {
if (typeof $ != 'undefined'){
fillSearchBar();
clearInterval(waitForJQuery);
}
}, 10);
function fillSearchBar() {
if (searchParams.has('query')){
$('#forum_search_input').val(searchParams.get('query'));
}
if (
(!searchParams.has('order') && searchParams.has('query') )||
(searchParams.has('order') && searchParams.get('order') != 'date')
) {
$('#forum_search_order_date').removeAttr('checked');
clearInterval(waitForJQuery);
}
}
</script>
</form> </form>
{% endmacro %} {% endmacro %}