UI: better layer layout for simple tables. Rewrite of all dashboard (refs #1616)

2 files changed, 95 insertions, 64 deletions

diff --git a/archaeological_files/templates/ishtar/dashboards/dashboard_file.html b/archaeological_files/templates/ishtar/dashboards/dashboard_file.html
index de8be7d30..163f89bb8 100644
--- a/archaeological_files/templates/ishtar/dashboards/dashboard_file.html
+++ b/archaeological_files/templates/ishtar/dashboards/dashboard_file.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n range units %}
+{% load i18n range units humanize %}
 {% block extra_head %}
 {{form.media}}
 {% endblock %}
@@ -9,30 +9,33 @@
 
   <h3>{% trans "Global informations" %}</h3>
   <div>
-    <p><strong>{% trans "Total:" %}</strong> {{dashboard.total_number}}</p>
+    <p><label>{% trans "Total:" %}</label> <span class='value numeric'>{{dashboard.total_number|intcomma}}</span></p>
     {% for type in dashboard.types %}
-    <p><strong>{{type.file_type__label}}{% trans ":"%}</strong> {{type.number}}</p>
+    <p><label>{{type.file_type__label}}{% trans ":"%}</label> <span class='value numeric'>{{type.number|intcomma}}</span></p>
     {% endfor %}
-    <div class='table'>
-    <table>
-      <caption>{% trans "By year"%}</caption>
-      <tr>
-      {% for year in dashboard.by_year %}<th>{{year.date.year}}</th>{% endfor %}
-      </tr>
-      <tr>
-      {% for year in dashboard.by_year %}<td>{{year.number}}</td>{% endfor%}
-      </tr>
-    </table>
+
+    <div class='clean-table'>
+      <h4>{% trans "by year"%}</h4>
+      <div class='clean-table-wrap'>
+        <table>
+          <tr>
+          {% for year in dashboard.by_year %}<th>{% if year.date.year %}{{year.date.year}}{% else %}{% trans "no year" %}{% endif %}</th>{% endfor %}
+          </tr>
+          <tr>
+          {% for year in dashboard.by_year %}<td>{{year.number|intcomma}}</td>{% endfor%}
+          </tr>
+        </table>
+      </div>
     </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "by month"%}</h4>
     <table>
-      <caption>{% trans "By month"%}</caption>
       <tr>
-      {% for month in dashboard.by_month %}<th>{{month.date|date:"F Y"|capfirst}}</th>{% endfor %}
+      {% for month in dashboard.by_month %}<th>{{month.date|date:"N Y"|capfirst}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for month in dashboard.by_month %}<td>{{month.number}}</td>{% endfor%}
+      {% for month in dashboard.by_month %}<td>{{month.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
@@ -41,171 +44,191 @@
 
   <h3>{% trans "Research archaeology" %}</h3>
   <div>
-    <p><strong>{% trans "Total:" %}</strong> {{dashboard.research.total_number}}</p>
-    <div class='table'>
+    <p><label>{% trans "Total:" %}</label><span class='value numeric'>{{dashboard.research.total_number|intcomma}}</span></p>
+    <div class='clean-table'>
+    <h4>{% trans "by year"%}</h4>
     <table>
-      <caption>{% trans "By year"%}</caption>
       <tr>
       {% for year in dashboard.research.by_year %}<th>{{year.date.year}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for year in dashboard.research.by_year %}<td>{{year.number}}</td>{% endfor%}
+      {% for year in dashboard.research.by_year %}<td>{{year.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "by month"%}</h4>
     <table>
-      <caption>{% trans "By month"%}</caption>
       <tr>
       {% for month in dashboard.research.by_month %}<th>{{month.date|date:"F Y"|capfirst}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for month in dashboard.research.by_month %}<td>{{month.number}}</td>{% endfor%}
+      {% for month in dashboard.research.by_month %}<td>{{month.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "by department"%}</h4>
     <table>
-      <caption>{% trans "By department"%}</caption>
       <tr>
       {% for dpt in dashboard.research.by_dpt %}<th>{{dpt.department__label}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for dpt in dashboard.research.by_dpt %}<td>{{dpt.number}}</td>{% endfor%}
+      {% for dpt in dashboard.research.by_dpt %}<td>{{dpt.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "main towns"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "Main towns"%}</caption>
       <tr>
       {% for town in dashboard.research.towns %}<th>{{town.town__name}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for town in dashboard.research.towns %}<td>{{town.number}}</td>{% endfor%}
+      {% for town in dashboard.research.towns %}<td>{{town.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
+      </div>
     </div>
 
   </div>
 
   <h3>{% trans "Rescue archaeology" %}</h3>
   <div>
-    <p><strong>{% trans "Total:" %}</strong> {{dashboard.rescue.total_number}}</p>
+    <p><label>{% trans "Total:" %}</label> <span class='value numeric'>{{dashboard.rescue.total_number|intcomma}}</span></p>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "by saisine type"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "By saisine type"%}</caption>
       <tr>
       {% for saisine in dashboard.rescue.saisine %}<th>{{saisine.saisine_type__label}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for saisine in dashboard.rescue.saisine %}<td>{{saisine.number}}</td>{% endfor%}
+      {% for saisine in dashboard.rescue.saisine %}<td>{{saisine.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "by administrative act"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "By administrative act"%}</caption>
       <tr>
       {% for act in dashboard.rescue.administrative_act %}<th>{{act.act_type__label}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for act in dashboard.rescue.administrative_act %}<td>{{act.number}}</td>{% endfor%}
+      {% for act in dashboard.rescue.administrative_act %}<td>{{act.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "by year"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "By year"%}</caption>
       <tr>
       {% for year in dashboard.rescue.by_year %}<th>{{year.date.year}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for year in dashboard.rescue.by_year %}<td>{{year.number}}</td>{% endfor%}
+      {% for year in dashboard.rescue.by_year %}<td>{{year.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "by month"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "By month"%}</caption>
       <tr>
       {% for month in dashboard.rescue.by_month %}<th>{{month.date|date:"F Y"|capfirst}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for month in dashboard.rescue.by_month %}<td>{{month.number}}</td>{% endfor%}
+      {% for month in dashboard.rescue.by_month %}<td>{{month.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
-    <p><strong>{% trans "Archaeological files linked to at least one operation:" %}</strong> {{dashboard.rescue.with_associated_operation}}</p>
-    <p><strong>{% trans "Archaeological files linked to at least one operation (%):" %}</strong> {{dashboard.rescue.with_associated_operation_percent}}</p>
+    <p><label>{% trans "Archaeological files linked to at least one operation:" %}</label> <span class='value numeric'>{{dashboard.rescue.with_associated_operation|intcomma}}</span></p>
+    <p><label>{% trans "Archaeological files linked to at least one operation (%):" %}</label> <span class='value numeric'>{{dashboard.rescue.with_associated_operation_percent|intcomma}}</span></p>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "archaeological files linked to at least one operation (%)"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "Archaeological files linked to at least one operation (%)"%}</caption>
       <tr>
       {% for year in dashboard.rescue.operational_by_year %}<th>{{year.date.year}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for year in dashboard.rescue.operational_by_year %}<td>{{year.number}}</td>{% endfor%}
+      {% for year in dashboard.rescue.operational_by_year %}<td>{{year.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "by department"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "By department"%}</caption>
       <tr>
       {% for dpt in dashboard.rescue.by_dpt %}<th>{{dpt.department__label}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for dpt in dashboard.rescue.by_dpt %}<td>{{dpt.number}}</td>{% endfor%}
+      {% for dpt in dashboard.rescue.by_dpt %}<td>{{dpt.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "surface by department (ha)"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "Surface by department (ha)"%}</caption>
       <tr>
       {% for dpt in dashboard.rescue.surface_by_dpt %}<th>{{dpt.department__label}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for dpt in dashboard.rescue.surface_by_dpt %}<td>{{dpt.number|m2_to_ha}}</td>{% endfor%}
+      {% for dpt in dashboard.rescue.surface_by_dpt %}<td>{{dpt.number|m2_to_ha|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "main towns by number"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "Main towns by number"%}</caption>
       <tr>
       {% for town in dashboard.rescue.towns %}<th>{{town.town__name}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for town in dashboard.rescue.towns %}<td>{{town.number}}</td>{% endfor%}
+      {% for town in dashboard.rescue.towns %}<td>{{town.number|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
-    <div class='table'>
+    <div class='clean-table'>
+    <h4>{% trans "main towns by surface (ha)"%}</h4>
+      <div class='clean-table-wrap'>
     <table>
-      <caption>{% trans "Main towns by surface (ha)"%}</caption>
       <tr>
       {% for town in dashboard.rescue.surface_by_town %}<th>{{town.town__name}}</th>{% endfor %}
       </tr>
       <tr>
-      {% for town in dashboard.rescue.surface_by_town %}<td>{{town.number|m2_to_ha}}</td>{% endfor%}
+      {% for town in dashboard.rescue.surface_by_town %}<td>{{town.number|m2_to_ha|intcomma}}</td>{% endfor%}
       </tr>
     </table>
     </div>
+    </div>
 
   </div>
 </div>
diff --git a/archaeological_files/templates/ishtar/sheet_file.html b/archaeological_files/templates/ishtar/sheet_file.html
index 9ff6e8356..782a7656d 100644
--- a/archaeological_files/templates/ishtar/sheet_file.html
+++ b/archaeological_files/templates/ishtar/sheet_file.html
@@ -101,8 +101,10 @@
 {% trans "Administrative acts" as administrativeacts_label %}
 {% table_administrativact administrativeacts_label item.administrative_act.all %}
 
-<table class='simple'>
-  <caption>{%trans "Associated operations"%}</caption>
+<h4>{%trans "Associated operations"%}</h4>
+<div class='clean-table'>
+<div class='clean-table-wrap'>
+<table>
   <tr>
     <th>{% trans "Ref." %}</th>
     <th>Code Patriarche</th>
@@ -126,9 +128,13 @@
   <tr><td colspan="8" class='no_items'>{% trans "No operation associated to this archaelogical file" %}</td></tr>
   {% endfor %}
 </table>
+</div>
+</div>
 
-<table class='simple'>
-  <caption>{%trans "Admninistrative acts linked to associated operations"%}</caption>
+<h4>{%trans "Admninistrative acts linked to associated operations"%}</h4>
+<div class='clean-table'>
+<div class='clean-table-wrap'>
+<table>
   <tr>
     <th>{% trans "Year" %}</th>
     <th>{% trans "Ref." %}</th>
@@ -146,4 +152,6 @@
   <tr><td colspan="4" class='no_items'>{% trans "No administrative act linked to operations" %}</td></tr>
   {% endfor %}
 </table>
+</div>
+</div>
 {% endblock %}