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

maraudes/templates/maraudes/finalize.html

@@ -1,5 +1,5 @@
 {% extends "maraudes/base.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 {% block title %} {{ block.super }} Compte-rendu du {{ object.date }} {% endblock %}
 
 {% block breadcrumbs %}
@@ -22,8 +22,8 @@
           {% bootstrap_form form %}
         </div>
         <div class="panel-footer text-right">
-          {% bootstrap_button "Pas de message" icon="remove" button_type="link" href="?no_mail=True" button_class="btn btn-danger btn-sm" %}
-          <button class="btn btn-success btn-sm" id="send-button" data-loading-text="Envoi en cours..." type="submit"><span class="glyphicon glyphicon-send"></span> Envoyer</button>
+          {% bootstrap_button "Pas de message" button_type="link" href="?no_mail=True" button_class="btn btn-danger btn-sm" %}
+          <button class="btn btn-success btn-sm" id="send-button" data-loading-text="Envoi en cours..." type="submit">Envoyer</button>
         </div>
       </div>
     </form>
@@ -37,7 +37,7 @@
             <td>
               <a href="{% url "notes:details-sujet" observation.sujet.pk %}" id="sujet-name-{{observation.sujet.pk}}">{{observation.sujet}}</a>
               <a class="btn btn-link btn-xs" nohref onclick="UpdateStats({{observation.sujet.pk}});return false;">
-              {% bootstrap_icon "stats" %} Mise à jour</a>
+              Mise à jour</a>
             </td></tr>
             <tr><td>{{observation.text}}</td></tr>{% endfor %}{% endfor %}
       </table>

maraudes/templates/maraudes/index.html

@@ -9,9 +9,9 @@
 
 {% block page_content %}
 {% load tables %}
-<div class="col-lg-6 col-md-12">
+<div class="col-lg-7 col-md-12">
     <div class="card rounded-bottom">
-      <div class="card-header rounded-0 py-2 bg-dark text-white">Planning</div>
+      <h6 class="card-header rounded-0 py-2 bg-dark text-white">Planning</h6>
       <div class="card-body">
         <h6 class="card-title">Prochaine maraude</h6>
 	<p class="card-text">
@@ -30,22 +30,34 @@
         <a href="{% url 'notes:liste-maraude' %}" class="card-link text-primary">Toutes les maraudes</a>
       </div>
     </div>
+    <div class="row">
     {% if derniers_sujets_rencontres %}
-    <div class="card card-body">
-	{% table derniers_sujets_rencontres cols=3 cell_template="maraudes/table_cell_derniers_sujets.html" header="Ces derniers temps..." %}
+    <div class="col">
+    <div class="card rounded-bottom my-3">
+        <div class="card-header rounded-0 py-1 text-white bg-dark">En ce moment nous croisons...</div>
+        <div class="card-body">
+          {% for sujet in derniers_sujets_rencontres %}
+             {{ sujet }},
+          {% endfor %}
+        </div>
+    </div>
     </div>
     {% endif %}
     {% if derniers_sujets_signales %}
+    <div class="col">
     <div class="card rounded-bottom my-3">
-      <div class="card-header rounded-0 py-1 text-white bg-dark">Signalements récents</div>
+      <div class="card-header rounded-0 py-1 text-white bg-dark">
+          Signalements récents
+      </div>
       <div class="card-body">
         {% for sjt in derniers_sujets_signales %}
             {{ sjt }}
         {% endfor %}
       </div>
     </div>
+    </div>
     {% endif %}
-
+    </div>
 {% if user.is_superuser and missing_cr %}
     <div class="card border-warning rounded-bottom my-3">
       <div class="card-header py-2 bg-dark text-warning rounded-0">
@@ -55,7 +67,7 @@
     </div>
 {% endif %}
 </div>
-<div class="col-md-12 col-lg-6">
+<div class="col-md-12 col-lg-5">
   <div class="card shadow">
     <div class="card-header bg-dark text-white">
         <ul class="nav nav-tabs card-header-tabs" id="addNote" role="tablist">

maraudes/views.py

@@ -238,13 +238,13 @@ class FinalizeView(MaraudeurMixin,
         return self.finalize()
 
     def get_context_data(self, **kwargs):
-        obj = self.get_object()
+        self.object = self.get_object()
         context = super().get_context_data(**kwargs)
-        if obj.est_terminee is True:
+        if self.object.est_terminee is True:
             context['form'] = None  # Useless form
             return context
         # Link there so that "Compte-rendu" menu item is not disabled
-        context['prochaine_maraude'] = obj
+        context['prochaine_maraude'] = self.object
         return context
 
 

notes/templates/notes/details.html

@@ -1,5 +1,5 @@
 {% extends "notes/base.html" %}
-{% load bootstrap3 notes %}
+{% load bootstrap4 notes %}
 
 {% block page_content %}
 <div class="col-lg-8 col-md-12">

notes/templates/notes/details_sujet.html

@@ -1,5 +1,5 @@
 {% extends "notes/details.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block title %}
   {{ block.super }} {{ sujet }}
@@ -29,7 +29,7 @@
     <div class="panel-heading" role="tab" id="notesAjoutHeading">
       <h4 class="panel-title">
         <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNotesAjout" aria-expanded="false" aria-controls="collapseTwo">
-          {% bootstrap_icon "plus" %} Ajouter une note
+          Ajouter une note
         </a>
       </h4>
     </div>
@@ -60,11 +60,11 @@
     </div>
     <div class="panel-footer text-right">
       <span class="text-right" id="normal-buttons">
-        <p>{% bootstrap_icon "tasks" %} {{ sujet.statistiques.info_completed }}%&nbsp;
+        <p>{{ sujet.statistiques.info_completed }}%&nbsp;
         <span class="btn btn-primary btn-sm" id="update-stats">Mettre à jour</span></p>
       </span>
       <span class="text-right" id="update-buttons">
-        <label for="submit-form" class="btn btn-primary">{% bootstrap_icon "floppy-save" %} Enregistrer</label>
+        <label for="submit-form" class="btn btn-primary">Enregistrer</label>
         <span class="btn btn-primary btn-sm" id="cancel">Annuler</span>
       </span>
 
@@ -94,8 +94,8 @@
     <div class="panel panel-primary text-right"><div class="panel-heading"><h4 class="panel-title"><strong>Administration :</strong></h4></div>
     <div class="panel-body text-center">
     <div class="btn-group-vertical" role="group" aria-label="...">
-      <a href="{% url 'admin:notes_note_changelist' %}?sujet__exact={{sujet.pk}}" class="btn btn-primary">{% bootstrap_icon "pencil" %} Éditer les notes</a>
-      <a href="{% url 'notes:sujets-merge' pk=object.pk %}" class="btn btn-danger">{% bootstrap_icon "paste" %} Fusionner</a>
+      <a href="{% url 'admin:notes_note_changelist' %}?sujet__exact={{sujet.pk}}" class="btn btn-primary">Éditer les notes</a>
+      <a href="{% url 'notes:sujets-merge' pk=object.pk %}" class="btn btn-danger">Fusionner</a>
     </div>
     </div>
     </div>

notes/templates/notes/liste.html

@@ -5,12 +5,13 @@
 {{ block.super }}
 {% block sidebar_insert %}{% endblock %}
 {% if filters %}
-<div class="well">
-  <h4 class="text-right"><span class="glyphicon glyphicon-filter"></span> <strong>Filtres</strong></h4>
-  <ul class="nav nav-pills nav-stacked text-right">
+  <h4 class="sidebar-heading mt-4 px-3">Filtrer</h4>
+  <ul class="nav flex-column">
   {% for filter in filters %}
-    <li role="presentation" {% if filter.active %} class="active" {% endif %}>
-        <a href="?filter={{filter.parameter_name}}">{{ filter.title }}</a>
+  <li role="presentation" class="nav-item">
+        <a href="?filter={{filter.parameter_name}}" class="nav-link {% if filter.active %}active{% endif %}">
+          {{ filter.title }}
+        </a>
     </li>
   {% endfor %}
   </ul>

notes/templates/notes/liste_sujets.html

@@ -9,21 +9,18 @@
 {% endblock %}
 
 {% block sidebar_insert %}
-  <div class="panel panel-primary text-right">
-    <div class="panel-body">
-    <h4><strong>Rechercher</strong></h4>
-      <form action="{% url "notes:liste-sujet" %}" method="POST" class="form form-group">{% csrf_token %}
-      <div class="input-group">
+  <h4 class="sidebar-heading mt-4 px-3">Rechercher</h4>
+  <form action="{% url "notes:liste-sujet" %}" method="POST" class="form form-group">
+    {% csrf_token %}
+    <div class="input-group">
       <input type="text" name="q" class="form-control" placeholder="Chercher un sujet" aria-describedby="basic-addon1">
       <span class="input-group-btn">
-        <button type="submit" class="btn btn-primary"><span class=" glyphicon glyphicon-search"></span> </button>
+        <button type="submit" class="btn btn-primary">C</button>
       </span>
-      </div>
-      </form>
-        <hr/>
-    <h4><strong>Outils</strong></h4>
-   <a class="btn btn-primary" href="{% url "notes:create-sujet" %}">
-    <span class="glyphicon glyphicon-plus"></span> Ajouter un sujet</a> </div></div>
+    </div>
+  </form>
+  <h4 class="sidebar-heading mt-4 px-3">Outils</h4>
+  <a class="btn btn-primary btn-block" href="{% url "notes:create-sujet" %}">Ajouter un sujet</a> 
 {% endblock %}
 
 {% block search %}

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 %}

website/templates/base.html

@@ -35,26 +35,20 @@
       <div class="row">
         <nav class="col-md-2 d-none d-md-block bg-light sidebar">
           <div class="sidebar-sticky">
-            {% if user.is_authenticated %}
             <h6 class="sidebar-heading px-3 mt-4 text-muted">Menu</h6>
             <ul class="nav flex-column">
+            {% if user.is_authenticated %}
               <li class="nav-item">
                   <a href="{% url 'maraudes:index' %}" class="nav-link {% active namespace="maraudes" append=True %}">Maraudes</a>
               </li>
               <li class="nav-item">
                 <a href="{% url 'notes:liste-sujet' %}" class="nav-link {% active namespace="notes" append=True %}">Suivi</a>
               </li>
-            </ul>
-            {% else %}
-            <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
-              <span>Menu</span>
-            </h6>
-            <ul class="nav flex-column">
+            {% endif %}
               <li class="nav-item">
                   <a class="nav-link {% active namespace="statistiques" append=True %}" href="{% url "statistiques:index" %}">Statistiques</a>
               </li>
             </ul>
-            {% endif %}
             {% block sidebar %}{% endblock %}
           </div>
         </nav>

website/templatetags/navbar.py

@@ -15,7 +15,7 @@ def active(context, namespace=None, viewname=None, append=False):
     except:
         (cur_namespace, cur_viewname) = (None, context.request.resolver_match.view_name)
 
-    string = "class=\"active\"" if not append else "active"
+    string = "class=\"active shadow\"" if not append else "active shadow"
 
     if namespace == cur_namespace:
         if not viewname or viewname == cur_viewname: