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

3 files changed, 66 insertions, 35 deletions

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index 9c02b28..135a684 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -325,6 +325,13 @@ footer .footer-left {
   margin-bottom: 30px;
 }
 
+@media (min-width: 768px) {
+  .split_bills, #table_overflow.statistics {
+    /* The table is shifted to left, so add the spacer width on the right to match */
+    width: calc(100% + 15px);
+  }
+}
+
 .project-actions > .delete,
 .project-actions > .edit {
   font-size: 0px;
@@ -397,6 +404,7 @@ tr.payer_line .balance-name {
 
 .balance.table {
   table-layout: fixed;
+  margin-top: 30px;
 }
 
 #bill-form > fieldset {
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 %}
diff --git a/ihatemoney/tests/tests.py b/ihatemoney/tests/tests.py
index a12613c..c4b1585 100644
--- a/ihatemoney/tests/tests.py
+++ b/ihatemoney/tests/tests.py
@@ -931,22 +931,42 @@ class BudgetTestCase(IhatemoneyTestCase):
         )
 
         response = self.client.get("/raclette/statistics")
+        first_cell = '<td class="d-md-none">'
+        indent = "\n            "
         self.assertIn(
-            "<td>alexis</td>\n        "
-            + "<td>20.00</td>\n        "
+            first_cell
+            + "alexis</td>"
+            + indent
+            + "<td>20.00</td>"
+            + indent
             + "<td>31.67</td>\n",
             response.data.decode("utf-8"),
         )
         self.assertIn(
-            "<td>fred</td>\n        " + "<td>20.00</td>\n        " + "<td>5.83</td>\n",
+            first_cell
+            + "fred</td>"
+            + indent
+            + "<td>20.00</td>"
+            + indent
+            + "<td>5.83</td>\n",
             response.data.decode("utf-8"),
         )
         self.assertIn(
-            "<td>tata</td>\n        " + "<td>0.00</td>\n        " + "<td>2.50</td>\n",
+            first_cell
+            + "tata</td>"
+            + indent
+            + "<td>0.00</td>"
+            + indent
+            + "<td>2.50</td>\n",
             response.data.decode("utf-8"),
         )
         self.assertIn(
-            "<td>toto</td>\n        " + "<td>0.00</td>\n        " + "<td>0.00</td>\n",
+            first_cell
+            + "toto</td>"
+            + indent
+            + "<td>0.00</td>"
+            + indent
+            + "<td>0.00</td>\n",
             response.data.decode("utf-8"),
         )