fixes bootstrap4 imports, statistiques templates and adds shadow effect on active links

statistiques/templates/statistiques/fiche_stats_details.html

@@ -1,4 +1,4 @@
-{% load boolean_icons bootstrap3 %}
+{% load boolean_icons bootstrap4 %}
   <table class="table">
     <tr>
       <th colspan="4" class="active">Problématiques</th>

statistiques/templates/statistiques/filter_form.html

@@ -1,8 +1,8 @@
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
-<h4>Période</h4>
-  <form action="" method="get">
-    {% bootstrap_form form layout="inline" %}
-    <input type="hidden" name="graph" value="{{active}}" />
-    {% bootstrap_button "Ok" button_type="submit" %}
-  </form>
+<h4 class="sidebar-heading mt-2 px-3">Période</h4>
+<form class="form px-3" action="" method="get">
+  {% bootstrap_form form layout="inline" %}
+  <input type="hidden" name="graph" value="{{active}}" />
+  {% bootstrap_button "Ok" button_type="submit" button_class="btn btn-dark btn-block" %}
+</form>

statistiques/templates/statistiques/index.html

@@ -7,11 +7,7 @@
 {% block sidebar %}
   {{ block.super }}
   <hr />
-  <div class="panel panel-primary">
-    <div class="panel-body text-right">
-      {% include "statistiques/filter_form.html" %}
-    </div>
-  </div>
+  {% include "statistiques/filter_form.html" %}
 {% endblock %}
 
 {% block breadcrumbs %}

statistiques/templates/statistiques/menu.html

@@ -1,18 +1,11 @@
 {% load navbar %}
-  <ul class="nav nav-pills nav-stacked text-right">
-    <li role="presentation" {% active namespace="statistiques" viewname="index" %}>
-      <a href="{% url "statistiques:index" %}?period={{year|default:0}}">Maraudes&nbsp;
-        <span class="glyphicon glyphicon-road"></span>
-      </a>
+  <hr/>
+  <h6 class="sidebar-heading mt-4 px-3">Sous-Catégories</h6>
+  <ul class="nav flex-column">
+    <li class="nav-item">
+      <a class="nav-link {% active namespace="statistiques" viewname="typologie" append=True %}" href="{% url "statistiques:typologie" %}?period={{year|default:0}}">Typologie</a>
     </li>
-    <li role="presentation" {% active namespace="statistiques" viewname="typologie" %}>
-      <a href="{% url "statistiques:typologie" %}?period={{year|default:0}}">Typologie&nbsp;
-        <span class="glyphicon glyphicon-user"></span>
-      </a>
-    </li>
-    <li role="presentation" {% active namespace="statistiques" viewname="frequentation" %}>
-      <a href="{% url "statistiques:frequentation" %}?period={{year|default:0}}">Fréquentation&nbsp;
-        <span class="glyphicon glyphicon-stats"></span>
-      </a>
+    <li role="nav-item"> 
+      <a class="nav-link {% active namespace="statistiques" viewname="frequentation"  append=True %}" href="{% url "statistiques:frequentation" %}?period={{year|default:0}}">Fréquentation</a>
     </li>
   </ul>

statistiques/templates/statistiques/multiple_charts.html

@@ -10,27 +10,24 @@
 
 {% block sidebar %}
   {{ block.super }}
-  {% if chart %}
   <hr />
-  <div class="panel panel-primary">
-    <div class="panel-body text-right">
-      {% include "statistiques/filter_form.html" with active=active %}
-      <hr />
-      <p>Échantillon : {{ queryset_count }} objets</p>
-    </div>
-  </div>
+  {% if chart %}
+  {% include "statistiques/filter_form.html" with active=active %}
+  <hr />
+  <p class="text-muted px-3">Échantillon : {{ queryset_count }} objets</p>
   {% endif %}
 {% endblock %}
 
 {% block page_content %}
- <ul class="nav nav-pills nav-justified">
+<div class="card card-body py-1">
+ <ul class="nav nav-pills justify-content-center">
   {% for name in chart_list %}
-     <li role="presentation" {%if name == active%} class="active" {%endif%}>
-         <a href="?graph={{name}}&period={{year}}">{{ name }}</a>
+     <li class="nav-item">
+         <a class="nav-link {%if name == active%}active{%endif%}" href="?graph={{name}}&period={{year}}">{{ name }}</a>
      </li>
   {% endfor %}
  </ul>
-
+</div>
   {% if chart %}
     {{ chart.as_html }}
   {% endif %}

statistiques/templates/statistiques/typologie.html

@@ -6,13 +6,8 @@
 
 {% block sidebar %}
   {{ block.super }}
-  <div class="panel panel-primary">
-    <div class="panel-body text-right">
-      {% include "statistiques/filter_form.html" %}
-      <hr />
-      <p>Échantillon : {{ queryset.count }} sujets</p>
-    </div>
-  </div>
+  {% include "statistiques/filter_form.html" %}
+  <p class="text-muted px-3">Échantillon : {{ queryset.count }} sujets</p>
 {% endblock %}
 
 {% block page_content %}
@@ -30,12 +25,15 @@
       $("#wrapper-" + id).show();
     }
   </script>
- <ul class="nav nav-tabs">
-  {% for title, graph in graphs %}<li role="presentation" id="tab-{{graph.get_html_id}}"><a href="#" onclick="showGraph('{{graph.get_html_id}}');">{{ title }}</a></li>{% endfor %}
+<ul class="nav nav-tabs">
+  {% for title, graph in graphs %}
+  <li class="nav-item" id="tab-{{graph.get_html_id}}">
+    <a class="nav-link" href="#" onclick="showGraph('{{graph.get_html_id}}');">{{ title }}</a>
+  </li>{% endfor %}
  </ul>
 
-  {% for title, graph in graphs %}
+ {% for title, graph in graphs %}
     {{ graph.as_html }}
-  {% endfor %}
+ {% endfor %}
 
 {% endblock %}