1
1

style data with tables and improve headings

This commit is contained in:
2020-02-18 20:45:29 +01:00
parent daf9f51bf4
commit 96ca72001b
2 changed files with 89 additions and 19 deletions

View File

@@ -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;
}

View File

@@ -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 %}