# 61 Filter frontend

* finished filter frontend

konova/filters.py

@@ -71,7 +71,8 @@ class GeoReferencedTableFilterMixin(django_filters.FilterSet):
         widget=forms.TextInput(
             attrs={
                 "placeholder": _("District"),
-                "title": _("Search for district")
+                "title": _("Search for district"),
+                "class": "form-control",
             }
         ),
     )
@@ -83,7 +84,8 @@ class GeoReferencedTableFilterMixin(django_filters.FilterSet):
         widget=forms.TextInput(
             attrs={
                 "placeholder": _("Parcel gmrkng"),
-                "title": _("Search for parcel gmrkng")
+                "title": _("Search for parcel gmrkng"),
+                "class": "form-control",
             }
         ),
     )
@@ -95,7 +97,8 @@ class GeoReferencedTableFilterMixin(django_filters.FilterSet):
         widget=forms.TextInput(
             attrs={
                 "placeholder": _("Parcel"),
-                "title": _("Search for parcel")
+                "title": _("Search for parcel"),
+                "class": "form-control",
             }
         ),
     )
@@ -107,7 +110,8 @@ class GeoReferencedTableFilterMixin(django_filters.FilterSet):
         widget=forms.TextInput(
             attrs={
                 "placeholder": _("Parcel counter"),
-                "title": _("Search for parcel counter")
+                "title": _("Search for parcel counter"),
+                "class": "form-control",
             }
         ),
     )
@@ -120,7 +124,8 @@ class GeoReferencedTableFilterMixin(django_filters.FilterSet):
         widget=forms.TextInput(
             attrs={
                 "placeholder": _("Parcel number"),
-                "title": _("Search for parcel number")
+                "title": _("Search for parcel number"),
+                "class": "form-control",
             }
         ),
     )
@@ -251,7 +256,11 @@ class ShareableTableFilterMixin(django_filters.FilterSet):
         method='filter_show_all',
         label=_("Show unshared"),
         label_suffix=_(""),
-        widget=forms.CheckboxInput()
+        widget=forms.CheckboxInput(
+            attrs={
+                "class": "form-check-input",
+            }
+        )
     )
 
     class Meta:
@@ -291,7 +300,11 @@ class RecordableTableFilterMixin(django_filters.FilterSet):
         method='filter_show_recorded',
         label=_("Show recorded"),
         label_suffix=_(""),
-        widget=forms.CheckboxInput()
+        widget=forms.CheckboxInput(
+            attrs={
+                "class": "form-check-input",
+            }
+        )
     )
 
     class Meta:

templates/filter/checkbox_filter.html

@@ -0,0 +1,5 @@
+{% for field in form %}
+    <div class="form-check form-check-inline">
+        {{field}}  <label class="form-check-label" for="id_{{field.name}}">{{field.label}}</label>
+    </div>
+{% endfor %}

templates/filter/query_filter.html

@@ -0,0 +1,10 @@
+<div class="form-row align-items-center">
+    {% for field in form %}
+        {% if not field.is_hidden %}
+        <div class="col-auto">
+            {{field}}
+        </div>
+        {% else %}
+        {% endif %}
+    {% endfor %}
+</div>

templates/generic_index.html

@@ -83,12 +83,17 @@
                         <div id="filter" class="collapse" aria-labelledby="filterHeader">
                             <div class="card-body">
                                 <div class="row">
-                                    {{table.filter.query_filter.form.as_p}}
+                                    {% with table.filter.query_filter.form as form %}
+                                        {% include 'filter/query_filter.html' %}
+                                    {% endwith %}
                                 </div>
-                                <div class="row">
+                                <div class="row mt-3">
-                                    {{table.filter.checkbox_filter.form.as_p}}
+                                    {% with table.filter.checkbox_filter.form as form %}
+                                        {% include 'filter/checkbox_filter.html' %}
+                                    {% endwith %}
                                 </div>
-                                <div class="row">
+                                <hr>
+                                <div class="row mt-3">
                                     <button class="btn btn-default" title="{% trans 'Filter' %}">
                                         {% fa5_icon 'filter' %}
                                         {% trans 'Apply filter' %}