From 96ca72001b14324d2c44c1dc8d6bb3f7905701cf Mon Sep 17 00:00:00 2001
From: Florian Hartmann <flo.ha@posteo.net>
Date: Tue, 18 Feb 2020 20:45:29 +0100
Subject: [PATCH] style data with tables and improve headings

---
 .../static/financeplanner/style.css           | 36 +++++++++-
 .../templates/financeplanner/index.html       | 72 ++++++++++++++-----
 2 files changed, 89 insertions(+), 19 deletions(-)

diff --git a/financeplanner/static/financeplanner/style.css b/financeplanner/static/financeplanner/style.css
index 78ea7e5..24b84f0 100644
--- a/financeplanner/static/financeplanner/style.css
+++ b/financeplanner/static/financeplanner/style.css
@@ -21,7 +21,15 @@ body {
 h1 {
     margin-top: 18px;
     margin-bottom: 6px;
-    font-size: 24px;
+    font-size: 1.4em;
+    font-weight: normal;
+    color: #FFCC99;
+}
+
+h2 {
+    margin-top: 6px;
+    margin-bottom: 12px;
+    font-size: 1.1em;
     font-weight: normal;
     color: #FFCC99;
 }
@@ -36,8 +44,31 @@ a:hover, a:focus {
     color: #CC6622;
 }
 
+table {
+    margin: 6px;
+    border-collapse: collapse;
+}
+
+td {
+    padding: 3px 12px 3px 6px;
+    border: 1px solid #3F3D3B;
+}
+
+thead {
+    font-variant: small-caps;
+}
+
+tr {
+    background-color: rgba(255, 255, 255, 0);
+    transition: background-color 100ms;
+}
+
+tr:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
 .mini-link {
-    font-size: 14px;
+    font-size: 0.9em;
 }
 
 .flex-col-centering {
@@ -210,3 +241,4 @@ a:hover, a:focus {
 .tooltip:hover .tooltiptext {
     visibility: visible;
 }
+
diff --git a/financeplanner/templates/financeplanner/index.html b/financeplanner/templates/financeplanner/index.html
index 3d59eab..8d04fb6 100644
--- a/financeplanner/templates/financeplanner/index.html
+++ b/financeplanner/templates/financeplanner/index.html
@@ -19,7 +19,7 @@
 
 <div class="main-container flex-col-centering">
     {% if graph_data %}
-        <p>Data from {{ range_start }} til {{ range_end }}:</p>
+        <h2>Data from {{ range_start }} til {{ range_end }}</h2>
         <div id="graph">
             {% for date, stat in graph_data.items %}
                 {% if stat.div_percentage is None %}
@@ -35,47 +35,85 @@
             {% endfor %}
         </div>
     {% else %}
-        <p>No data available from {{ range_start }} til {{ range_end }}.</p>
+        <p>No enough data from {{ range_start }} til {{ range_end }} to show a graph.</p>
     {% endif %}
 </div>
 
 <div class="main-container">
-    <p>relevant balances:</p>
-
+    <h2>Relevant Balances</h2>
     {% if balance_list %}
-        <ul>
+        <table>
+            <thead>
+            <tr>
+                <td>date</td>
+                <td>amount</td>
+            </tr>
+            </thead>
+            <tbody>
             {% for balance in balance_list %}
-                <li>{{ balance }}</li>
+                <tr>
+                    <td>{{ balance.date }}</td>
+                    <td>{{ balance.amount }}</td>
+                </tr>
             {% endfor %}
-        </ul>
+            </tbody>
+        </table>
     {% else %}
         <p>-</p>
     {% endif %}
 </div>
 
 <div class="main-container">
-    <p>relevant stored transactions:</p>
-
+    <h2>Relevant Stored Transactions</h2>
     {% if transaction_list %}
-        <ul>
+        <table>
+            <thead>
+            <tr>
+                <td>subject</td>
+                <td>amount</td>
+                <td>booking date</td>
+                <td>recurring months</td>
+                <td>not recurring after</td>
+            </tr>
+            </thead>
+            <tbody>
             {% for transaction in transaction_list %}
-                <li>{{ transaction }}</li>
+                <tr>
+                    <td>{{ transaction.subject }}</td>
+                    <td>{{ transaction.amount }}</td>
+                    <td>{{ transaction.booking_date }}</td>
+                    <td>{{ transaction.recurring_months }}</td>
+                    <td>{{ transaction.not_recurring_after }}</td>
+                </tr>
             {% endfor %}
-        </ul>
+            </tbody>
+        </table>
     {% else %}
         <p>-</p>
     {% endif %}
 </div>
 
 <div class="main-container">
-    <p>calculated actual transactions:</p>
-
+    <h2>Calculated Actual Transactions</h2>
     {% if actual_transactions %}
-        <ul>
+        <table>
+            <thead>
+            <tr>
+                <td>date</td>
+                <td>subject</td>
+                <td>amount</td>
+            </tr>
+            </thead>
+            <tbody>
             {% for date, subject, amount in actual_transactions %}
-                <li>{{ date }} - {{ subject }} - {{ amount }}</li>
+                <tr>
+                    <td>{{ date }}</td>
+                    <td>{{ subject }}</td>
+                    <td>{{ amount }}</td>
+                </tr>
             {% endfor %}
-        </ul>
+            </tbody>
+        </table>
     {% else %}
         <p>-</p>
     {% endif %}