Default bootstrap tables

* refactors old table index template into bootstrap-fontawesome generic table

intervention/views.py

@@ -25,7 +25,9 @@ def index_view(request: HttpRequest):
     """
     template = "generic_index.html"
     user = request.user
-    interventions = Intervention # ToDo
+    interventions = Intervention.objects.filter(
+
+    )
     table = InterventionTable(
         request=request,
         queryset=interventions

konova/settings.py

@@ -24,16 +24,14 @@ STRF_DATE_TIME = "%d.%m.%Y %H:%M:%S"
 # Tables
 RESULTS_PER_PAGE_PARAM = "rpp"
 PAGE_PARAM = "page"
-PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 50, 75, 100]
+PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 50, 100]
 PAGE_SIZE_OPTIONS_TUPLES = [
     (5, 5),
     (10, 10),
     (15, 15),
     (20, 20),
     (25, 25),
-    (30, 30),
     (50, 50),
-    (75, 75),
     (100, 100),
 ]
 PAGE_SIZE_DEFAULT = 5

konova/static/css/konova.css

@@ -139,3 +139,14 @@ nav{
     */
     box-shadow: 1px 1px 3px var(--rlp-gray-dark);
 }
+
+.cursor-pointer{
+    cursor: pointer;
+}
+
+input:focus, textarea:focus, select:focus{
+    border: 1px solid var(--rlp-red) !important;
+    box-shadow: 0 0 3px var(--rlp-red) !important;
+    -moz-box-shadow: 0 0 3px var(--rlp-red) !important;
+    -webkit-box-shadow: 0 0 3px var(--rlp-red) !important;
+}

konova/templates/konova/home.html

@@ -34,7 +34,7 @@
                         </a>
                     </div>
                     <div class="row my-1">
-                        <a href="{% url 'home' %}">
+                        <a href="{% url 'intervention:index' %}">
                             <button class="btn btn-default">{% fa5_icon 'eye' %} {% trans 'Show' %}</button>
                         </a>
                     </div>

templates/navbar.html

@@ -15,7 +15,7 @@
                 </a>
             </li>
             <li class=" menu-elem">
-                <a class="nav-btn nav-link" href="{% url 'home' %}">
+                <a class="nav-btn nav-link" href="{% url 'intervention:index' %}">
                     {% fa5_icon 'pencil-ruler' %}
                     {% trans 'Intervention' %}
                 </a>

templates/table.html

@@ -1,44 +1,78 @@
 {% load django_tables2 %}
-{% load i18n static %}
-    <div class="rows">
+{% load i18n static fontawesome_5 %}
+    <div class="col-md">
         {% if table.title is not None %}
-            <div class="rows">
-                <h3>
-                    {{ table.title }}
-                </h3>
-            </div>
+        <div class="row">
+            <h3>
+                {{ table.title }}
+            </h3>
+        </div>
         {% endif %}
-        <div class="column large-2">
-            {% if table.user.is_superuser and table.add_new_entries %}
-            <a href="{{ table.add_new_url }}">
-                <button class="button small" title="{% trans 'New entry' %}">
-                    <i class="fas fa-plus"></i>
-                    {% trans 'New' %}
-                </button>
-            </a>
-            {% else %}
-                &nbsp;
+        <div class="row">
+            {% if table.add_new_entries %}
+            <div class="col-md">
+                <a href="{{ table.add_new_url }}">
+                    <button class="btn btn-default" title="{% trans 'New entry' %}">
+                        <i class="fas fa-plus mr-2"></i>
+                        {% trans 'New' %}
+                    </button>
+                </a>
+            </div>
             {% endif %}
         </div>
-        <div class="column large-8">
+        <div class="row my-1">
+            <div class="col-sm-12 col-md">
+                <form method="get" action="{{table.filter}}">
+                    <div class="input-group">
+                        <input type="text" class="form-control" aria-label="{% trans 'Search for keywords' %}" placeholder="{% trans 'Search' %}">
+                        <div class="input-group-append" title="{% trans 'Start search' %}">
+                            <button type="submit" class="btn btn-default input-group-text">
+                                <span class="">
+                                    {% fa5_icon 'search' %}
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="col-md d-flex justify-content-end">
+                <div class="dropdown show">
+                    <div class="btn btn-default dropdown-toggle" href="#" role="button" id="rppToggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        {% trans 'Results per page' %}
+                    </div>
+                    <div class="dropdown-menu dropdown-menu-right">
+                        {% for rpp_option in table.results_per_page_choices %}
+                            <a class="dropdown-item {% if table.results_per_page_chosen == rpp_option %}selected{% endif %}" href="{% querystring table.results_per_page_parameter=rpp_option %}">
+                                {{ rpp_option }}
+                            </a>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
                 &nbsp;
         </div>
-        <div class="column large-2 dropdown-area">
-            <form method="get">
-                {{ table.filter.form.as_p }}
-            </form>
-            <div class="header-meta-dropdown">
-                <button data-dropdown="rpp-choice" aria-controls="rpp-choice" aria-expanded="false" class="custom-dropdown left">{% trans 'Results per page' %}</button>
-                <ul id="rpp-choice" class="custom-dropdown-content" data-dropdown-content aria-hidden="true" style="position: absolute; left: -99999px; top: 25px; right: auto;">
-                {% for rpp_option in table.results_per_page_choices %}
-                    <li class="{% if table.results_per_page_chosen == rpp_option %}selected{% endif %}">
-                        <a class="" href="{% querystring table.results_per_page_parameter=rpp_option %}">{{ rpp_option }}</a>
-                    </li>
-                {% endfor %}
-                </ul>
+
+        <div class="row">
+            <div class="col-md">
+                <div class="card">
+                    <div id="filterHeader" class="card-header cursor-pointer" data-toggle="collapse" data-target="#filter" aria-expanded="true" aria-controls="filter">
+                        <h5>
+                            {% fa5_icon 'filter' %}
+                            {% trans 'Filter' %}
+                        </h5>
+                    </div>
+                    <div id="filter" class="collapse" aria-labelledby="filterHeader">
+                        <div class="card-body">
+                            <form method="get">
+                                {{ table.filter.form.as_p }}
+                            </form>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-    <div class="row">
+
+    <div class="table-container">
         {% render_table table %}
     </div>