style data with tables and improve headings
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user