Commit 3cb86d13 authored by felix.herrmann's avatar felix.herrmann
Browse files

fix(searchfilter): add ui for search filters

parent 89b77f02
......@@ -31,6 +31,60 @@ body {
padding-left: 0;
}
.list-group-item {
user-select: none;
}
.list-group input[type="checkbox"] {
display: none;
}
.list-group input[type="checkbox"] + .list-group-item {
cursor: pointer;
}
.list-group input[type="checkbox"] + .list-group-item:after {
content: "\2713";
color: transparent;
font-weight: bold;
float:right;
}
.list-group input[type="checkbox"]:checked + .list-group-item {
/* background-color: theme-color("primary"); */
color: theme-color("primary");
font-weight: bold;
}
.list-group input[type="checkbox"]:checked + .list-group-item:after {
color: inherit;
}
.search-filter-button {
margin-bottom: .3rem!important;
text-align: left;
font-weight: 600;
min-height: 3rem;
}
.search-field-main {
min-height: 3rem;
font-size: large;
}
.search-filter-caret {
float:right;
font-weight: 600;
font-size: medium;
}
.search-filter-check {
float:right;
}
.data-citation {
padding: 2rem;
}
......
......@@ -8,8 +8,8 @@
<h2>{% trans "Search" %}</h2>
{# big search field #}
<div class="input-group mb-3">
<input id="search-middle" class="form-control"{% if query %}value={{ query }}{% else %}placeholder="Search"{% endif %} name="q" aria-label="Search">
<div class="input-group mb-3 search-field-main">
<input id="search-middle" class="form-control search-field-main"{% if query %}value={{ query }}{% else %}placeholder="Search"{% endif %} name="q" aria-label="Search">
<div class="input-group-append">
<button class="input-group-text" type="button" ic-action="click" ic-action-target="#searchsubmit"><i class="fas fa-search"></i></button>
</div>
......@@ -34,24 +34,26 @@
<input id="queryfield" hidden {% if query %}value={{ query }}{% else %}placeholder="Search"{% endif %} name="q">
<input id="searchsubmit" type="submit" hidden />
<h2>{% trans "Filters" %}</h2>
{# countries #}
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
All countries
<div class="form-check">
<input class="form-check-input position-static" name="countries" type="checkbox" value="all" aria-label="{% trans "All countries" %}">
<div class="list-group">
<button class="list-group-item active search-filter-button" type="button" data-toggle="collapse" data-target="#collapse-countries-filter" aria-expanded="false" aria-controls="collapseExample">
{% trans "Countries" %} <span class="search-filter-caret"><i class="fas fa-caret-down"></i></span>
</button>
</div>
</li>
<div class="collapse" id="collapse-countries-filter">
<div class="list-group">
{% for country in countries_all %}
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ country }}
<div class="form-check">
<input class="form-check-input position-static" name="countries" type="checkbox" value="{{ country.slug }}" aria-label="{% trans country.name %}"{% if country.slug in countries %} checked{% endif %}>
</div>
</li>
<input type="checkbox" name="countries" value="{{ country.slug }}" aria-label="{% trans country.name %}"{% if country.slug in countries %} checked{% endif %} id="search-filter-{{ country.slug }}" />
<label class="list-group-item" for="search-filter-{{ country.slug }}">{{ country.name }}</label>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
......
......@@ -11,7 +11,7 @@
<div class="input-group w-25 mx-auto">
<input id="search-top" class="form-control" type="text" {% if query %}value={{ query }}{% else %}placeholder="Search"{% endif %} name="q" aria-label="Search">
<div class="input-group-append">
<button class="input-group-text" type="button" ic-get-from="{% url 'ddusers:search' %}" ic-include="#search-top" ic-push-url="true" ic-push-params="q" ic-target="#content"><i class="fas fa-search"></i></button>
<button class="input-group-text" type="button" {% if query %}ic-action="click" ic-action-target="#searchsubmit"{% else %}ic-get-from="{% url 'ddusers:search' %}" ic-include="#search-top" ic-push-url="true" ic-push-params="q" ic-target="#content"{% endif %}><i class="fas fa-search"></i></button>
</div>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment