From e4946853e3da57f0186dd20034dc6becc316b549 Mon Sep 17 00:00:00 2001
From: Adrien CLERC <adrien@antipoul.fr>
Date: Mon, 17 Feb 2020 21:51:28 +0100
Subject: [PATCH] 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.
---
 ihatemoney/static/css/main.css       |  8 ++++
 ihatemoney/templates/statistics.html | 63 +++++++++++++++-------------
 2 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index 1a7dc1fb..eaafd7ba 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -316,6 +316,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;
@@ -388,6 +395,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 539781ff..73211883 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 %}