almet/ihatemoney
1
0
Fork 0
mirror of https://github.com/spiral-project/ihatemoney.git synced 2025-05-06 05:01:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Align tables in statistics

Browse source 
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.
This commit is contained in:
Adrien CLERC 2020-02-17 21:51:28 +01:00
parent 32d76178c0
commit e4946853e3
2 changed files with 41 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ihatemoney/static/css/main.css
View file

@ -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 {

63
ihatemoney/templates/statistics.html
View file

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