Skip to content

Commit

Permalink
Merge pull request #368 from uchicago-cs/forums/search-bar-styling
Browse files Browse the repository at this point in the history
Search Bar Styling and Optimization
  • Loading branch information
majorsylvie authored Dec 5, 2023
2 parents 14f0f7b + 71ede17 commit 99734eb
Showing 1 changed file with 40 additions and 19 deletions.
59 changes: 40 additions & 19 deletions src/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,41 @@
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% translate "Sign In" %}</a>
</li>
{% endif %}
<li class="nav-item d-flex align-items-center">
<li class="nav-item">
<!-- Dynamically update search bar landing page depending on query_type-->
<form id="search-bar" action="{% url 'game-search-results' %}" method="get">
<select id="query-type" name="query_type">
<option value="games">Games</option>
<option value="users">Users</option>
<option value="forums">Forums</option>
<!-- Add more options here -->
</select>
<!-- Name must remain as "q" as django-machina expects that name -->
<div class="d-inline-flex align-items-center">
<input id="query-input" name="q" type="text" placeholder="Search..." />
<form id="search-bar"
action="{% url 'game-search-results' %}"
method="get"
class="d-flex align-items-center">
<div>
{% url 'forum:index' as forum_url %}
{% url 'forum_search:search' as forum_search_url %}
{% url 'games:index' as games_url %}
{% url 'game-search-results' as game_search_url %}
{% url 'users:user-search-results' as users_search_url %}
<select id="query-type" name="query_type" class="form-select">
<option value="games"
{% if request.path == games_url or request.path == games_search_url %}selected{% endif %}>
Games
</option>
<option value="users"
{% if request.path == users_search_url %}selected{% endif %}>Users</option>
<option value="forums"
{% if request.path == forum_url or request.path == forum_search_url %}selected{% endif %}>
Forums
</option>
<!-- Add more options here -->
</select>
</div>
<div>
<!-- Name must remain as "q" as django-machina expects that name -->
<input id="query-input"
name="q"
type="text"
placeholder="Search..."
class="form-control me-2" />
</div>
<div>
<button id="advanced-search-button"
class="btn btn-large btn-primary ms-2 d-none"
type="button">{% trans "Advanced Search" %}</button>
Expand Down Expand Up @@ -212,11 +235,11 @@
});

// if the query type changes, update the landing page and autocomplete options
query_type.addEventListener("change", function() {
function updateFormAction() {
if (query_type.value === "games") {
search_bar.action = "{% url 'game-search-results' %}";

{% get_games as games %} // fetch game names for autocomplete
{% get_games as games %} // fetch game names for autocomplete
var game_names = [
{% for game in games %}
{
Expand Down Expand Up @@ -256,13 +279,11 @@
source: [] // placeholder; replace with list of forums
});
}
advancedSearchButton.classList.toggle('d-none', query_type.value !== "forums"); // hide advanced search button if not searching forums
}

if (query_type.value === "forums") {
advancedSearchButton.classList.remove('d-none'); // Show the advanced search button
} else {
advancedSearchButton.classList.add('d-none'); // Hide the advanced search button
}
});
updateFormAction();
query_type.addEventListener("change", updateFormAction);

advancedSearchButton.addEventListener("click", function(event) {
query_input.value = ''; // Clear the input field
Expand Down

0 comments on commit 99734eb

Please sign in to comment.