flo/financeplanner
1
1
Fork 0
Code Releases Activity

style data with tables and improve headings

Browse Source
This commit is contained in:
Flo Ha
2020-02-18 20:45:29 +01:00
parent daf9f51bf4
commit 96ca72001b
2 changed files with 89 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
financeplanner/static/financeplanner/style.css
View File

@@ -21,7 +21,15 @@ body {
h1 { h1 {
margin-top: 18px; margin-top: 18px;
margin-bottom: 6px; 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; font-weight: normal;
color: #FFCC99; color: #FFCC99;
} }
@@ -36,8 +44,31 @@ a:hover, a:focus {
color: #CC6622; 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 { .mini-link {
font-size: 14px; font-size: 0.9em;
} }
.flex-col-centering { .flex-col-centering {
@@ -210,3 +241,4 @@ a:hover, a:focus {
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
} }

72
financeplanner/templates/financeplanner/index.html
View File

@@ -19,7 +19,7 @@
<div class="main-container flex-col-centering"> <div class="main-container flex-col-centering">
{% if graph_data %} {% if graph_data %}
<p>Data from {{ range_start }} til {{ range_end }}:</p> <h2>Data from {{ range_start }} til {{ range_end }}</h2>
<div id="graph"> <div id="graph">
{% for date, stat in graph_data.items %} {% for date, stat in graph_data.items %}
{% if stat.div_percentage is None %} {% if stat.div_percentage is None %}
@@ -35,47 +35,85 @@
{% endfor %} {% endfor %}
</div> </div>
{% else %} {% 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 %} {% endif %}
</div> </div>
<div class="main-container"> <div class="main-container">
<p>relevant balances:</p> <h2>Relevant Balances</h2>
{% if balance_list %} {% if balance_list %}
<ul> <table>
<thead>
<tr>
<td>date</td>
<td>amount</td>
</tr>
</thead>
<tbody>
{% for balance in balance_list %} {% for balance in balance_list %}
<li>{{ balance }}</li> <tr>
<td>{{ balance.date }}</td>
<td>{{ balance.amount }}</td>
</tr>
{% endfor %} {% endfor %}
</ul> </tbody>
</table>
{% else %} {% else %}
<p>-</p> <p>-</p>
{% endif %} {% endif %}
</div> </div>
<div class="main-container"> <div class="main-container">
<p>relevant stored transactions:</p> <h2>Relevant Stored Transactions</h2>
{% if transaction_list %} {% 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 %} {% 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 %} {% endfor %}
</ul> </tbody>
</table>
{% else %} {% else %}
<p>-</p> <p>-</p>
{% endif %} {% endif %}
</div> </div>
<div class="main-container"> <div class="main-container">
<p>calculated actual transactions:</p> <h2>Calculated Actual Transactions</h2>
{% if actual_transactions %} {% 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 %} {% for date, subject, amount in actual_transactions %}
<li>{{ date }} - {{ subject }} - {{ amount }}</li> <tr>
<td>{{ date }}</td>
<td>{{ subject }}</td>
<td>{{ amount }}</td>
</tr>
{% endfor %} {% endfor %}
</ul> </tbody>
</table>
{% else %} {% else %}
<p>-</p> <p>-</p>
{% endif %} {% endif %}