Align tables in statistics (#535)

* Align tables in statistics

The table in sidebar is now aligned with the one in content, to avoid
redundant informations.
All tables are back to normal on small devices.

* fix test

* run black on tests

1 files changed, 33 insertions, 30 deletions

diff --git a/ihatemoney/templates/statistics.html b/ihatemoney/templates/statistics.html
index 539781f..7321188 100644
--- a/ihatemoney/templates/statistics.html
+++ b/ihatemoney/templates/statistics.html
@@ -1,12 +1,14 @@
 {% extends "sidebar_table_layout.html" %}
 
 {% block sidebar %}
-    <div id="table_overflow">
+    <div id="table_overflow" class="statistics mr-md-n3">
     <table class="balance table">
-    <tr>
-        <th></th>
-        <th class="balance-value">{{ _("Balance") }}</th>
-    </tr>
+    <thead>
+        <tr class="d-none d-md-table-row">
+            <th>{{ _("Who?") }}</th>
+            <th class="balance-value">{{ _("Balance") }}</th>
+        </tr>
+    </thead>
     {% for stat in members_stats| sort(attribute='member.name') %}
     <tr>
         <td class="balance-name">{{ stat.member.name }}</td>
@@ -21,30 +23,31 @@
 
 
 {% block content %}
-    <h2>{{ _("Balance") }}</h2>
-    <table id="bill_table" class="split_bills table table-striped">
-        <thead><tr><th>{{ _("Who?") }}</th><th>{{ _("Paid") }}</th><th>{{ _("Spent") }}</th></tr></thead>
-    <tbody>
-    {% for stat in members_stats %}
-    <tr>
-        <td>{{ stat.member.name }}</td>
-        <td>{{ "%0.2f"|format(stat.paid) }}</td>
-        <td>{{ "%0.2f"|format(stat.spent) }}</td>
-    </tr>
-    {% endfor %}
-    </tbody>
-    </table>
-    <h2>{{ _("Expenses by Month") }}</h2>
-    <table id="monthly_stats" class="table table-striped">
-        <thead><tr><th>{{ _("Period") }}</th><th>{{ _("Spent") }}</th></tr></thead>
-    <tbody>
-    {% for month in months %}
-            <tr>
-                <td>{{ _(month.strftime("%B")) }} {{ month.year }}</td>
-                <td>{{ "%0.2f"|format(monthly_stats[month.year][month.month]) }}</td>
-            </tr>
-    {% endfor %}
-    </tbody>
-    </table>
+    <div class="d-flex flex-column">
+        <table id="bill_table" class="split_bills table table-striped ml-md-n3">
+            <thead><tr><th class="d-md-none">{{ _("Who?") }}</th><th>{{ _("Paid") }}</th><th>{{ _("Spent") }}</th></tr></thead>
+        <tbody>
+        {% for stat in members_stats %}
+        <tr>
+            <td class="d-md-none">{{ stat.member.name }}</td>
+            <td>{{ "%0.2f"|format(stat.paid) }}</td>
+            <td>{{ "%0.2f"|format(stat.spent) }}</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+        </table>
+        <h2>{{ _("Expenses by Month") }}</h2>
+        <table id="monthly_stats" class="table table-striped">
+            <thead><tr><th>{{ _("Period") }}</th><th>{{ _("Spent") }}</th></tr></thead>
+        <tbody>
+        {% for month in months %}
+                <tr>
+                    <td>{{ _(month.strftime("%B")) }} {{ month.year }}</td>
+                    <td>{{ "%0.2f"|format(monthly_stats[month.year][month.month]) }}</td>
+                </tr>
+        {% endfor %}
+        </tbody>
+        </table>
+    </div>
 
 {% endblock %}