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 { ...@@ -31,6 +31,60 @@ body {
padding-left: 0; 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 { .data-citation {
padding: 2rem; padding: 2rem;
} }
......
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
<h2>{% trans "Search" %}</h2> <h2>{% trans "Search" %}</h2>
{# big search field #} {# big search field #}
<div class="input-group mb-3"> <div class="input-group mb-3 search-field-main">
<input id="search-middle" class="form-control"{% if query %}value={{ query }}{% else %}placeholder="Search"{% endif %} name="q" aria-label="Search"> <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"> <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> <button class="input-group-text" type="button" ic-action="click" ic-action-target="#searchsubmit"><i class="fas fa-search"></i></button>
</div> </div>
</div> </div>
{% if object_list %} {% if object_list %}
{% for object in object_list %} {% for object in object_list %}
{% if search_type %} {% if search_type %}
{% include 'ddusers/_user_detail_card.html' with object=object image_url=objectimage.url dsid=ds.uuid cardtype=search_type %} {% include 'ddusers/_user_detail_card.html' with object=object image_url=objectimage.url dsid=ds.uuid cardtype=search_type %}
...@@ -34,25 +34,27 @@ ...@@ -34,25 +34,27 @@
<input id="queryfield" hidden {% if query %}value={{ query }}{% else %}placeholder="Search"{% endif %} name="q"> <input id="queryfield" hidden {% if query %}value={{ query }}{% else %}placeholder="Search"{% endif %} name="q">
<input id="searchsubmit" type="submit" hidden /> <input id="searchsubmit" type="submit" hidden />
<h2>{% trans "Filters" %}</h2> <h2>{% trans "Filters" %}</h2>
{# countries #} {# countries #}
<ul class="list-group"> <div class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center"> <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">
All countries {% trans "Countries" %} <span class="search-filter-caret"><i class="fas fa-caret-down"></i></span>
<div class="form-check"> </button>
<input class="form-check-input position-static" name="countries" type="checkbox" value="all" aria-label="{% trans "All countries" %}"> </div>
</div> <div class="collapse" id="collapse-countries-filter">
</li> <div class="list-group">
{% for country in countries_all %} {% for country in countries_all %}
<li class="list-group-item d-flex justify-content-between align-items-center"> <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 }}" />
{{ country }} <label class="list-group-item" for="search-filter-{{ country.slug }}">{{ country.name }}</label>
<div class="form-check"> {% endfor %}
<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>
</div> </div>
</li> </div>
{% endfor %}
</ul> </div>
</form> </form>
</div> </div>
</div> </div>
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div class="input-group w-25 mx-auto"> <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"> <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"> <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>
</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