chore: simplify search form CSS and HTML

Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-04-03 17:51:20 +02:00
parent e24695b68c
commit 80a969917a
2 changed files with 30 additions and 19 deletions

View file

@ -19,6 +19,18 @@ input:-moz-placeholder, :-moz-placeholder {
.search-form {
display: flex;
align-items: baseline;
gap: calc(var(--gutter) / 2);
max-width: 800px;
margin: 0 auto;
}
.search-form select {
max-width: 200px;
}
.search-form input[type=submit] {
min-width: 200px;
}
.flex-break {
justify-content: center;
}
@ -555,4 +567,9 @@ dialog::backdrop {
.mhide {
display: none;
}
.flex-break {
flex-direction: column;
align-items: center;
}
}

View file

@ -4,25 +4,19 @@
{% trans "Search maps" as default_placeholder %}
<div class="wrapper search_wrapper">
<div class="row">
<form class="search-form" action="{% firstof action search_url %}" method="get">
<div class="col half mwide">
<input name="q"
type="search"
placeholder="{% firstof placeholder default_placeholder %}"
aria-label="{% firstof placeholder default_placeholder %}"
value="{{ request.GET.q|default:"" }}" />
</div>
<div class="col quarter mwide">
<select name="tags">
<option value="">{% trans "Any category" %}</option>
{% for value, label in UMAP_TAGS %}
<option value="{{ value }}" {% if request.GET.tags == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
</div>
<div class="col quarter mwide">
<input type="submit" value="{% trans "Search" %}" class="neutral" />
</div>
<form class="search-form flex-break" action="{% firstof action search_url %}" method="get">
<input name="q"
type="search"
placeholder="{% firstof placeholder default_placeholder %}"
aria-label="{% firstof placeholder default_placeholder %}"
value="{{ request.GET.q|default:"" }}" />
<select name="tags">
<option value="">{% trans "Any category" %}</option>
{% for value, label in UMAP_TAGS %}
<option value="{{ value }}" {% if request.GET.tags == value %}selected{% endif %}>{{ label }}</option>
{% endfor %}
</select>
<input type="submit" value="{% trans "Search" %}" class="neutral" />
</form>
</div>
</div>