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; 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 > .delete,
.project-actions > .edit { .project-actions > .edit {
font-size: 0px; font-size: 0px;
@ -388,6 +395,7 @@ tr.payer_line .balance-name {
.balance.table { .balance.table {
table-layout: fixed; table-layout: fixed;
margin-top: 30px;
} }
#bill-form > fieldset { #bill-form > fieldset {

63
ihatemoney/templates/statistics.html
View file

@ -1,12 +1,14 @@
{% extends "sidebar_table_layout.html" %} {% extends "sidebar_table_layout.html" %}
{% block sidebar %} {% block sidebar %}
<div id="table_overflow"> <div id="table_overflow" class="statistics mr-md-n3">
<table class="balance table"> <table class="balance table">
<tr> <thead>
<th></th> <tr class="d-none d-md-table-row">
<th class="balance-value">{{ _("Balance") }}</th> <th>{{ _("Who?") }}</th>
</tr> <th class="balance-value">{{ _("Balance") }}</th>
</tr>
</thead>
{% for stat in members_stats| sort(attribute='member.name') %} {% for stat in members_stats| sort(attribute='member.name') %}
<tr> <tr>
<td class="balance-name">{{ stat.member.name }}</td> <td class="balance-name">{{ stat.member.name }}</td>
@ -21,30 +23,31 @@
{% block content %} {% block content %}
<h2>{{ _("Balance") }}</h2> <div class="d-flex flex-column">
<table id="bill_table" class="split_bills table table-striped"> <table id="bill_table" class="split_bills table table-striped ml-md-n3">
<thead><tr><th>{{ _("Who?") }}</th><th>{{ _("Paid") }}</th><th>{{ _("Spent") }}</th></tr></thead> <thead><tr><th class="d-md-none">{{ _("Who?") }}</th><th>{{ _("Paid") }}</th><th>{{ _("Spent") }}</th></tr></thead>
<tbody> <tbody>
{% for stat in members_stats %} {% for stat in members_stats %}
<tr> <tr>
<td>{{ stat.member.name }}</td> <td class="d-md-none">{{ stat.member.name }}</td>
<td>{{ "%0.2f"|format(stat.paid) }}</td> <td>{{ "%0.2f"|format(stat.paid) }}</td>
<td>{{ "%0.2f"|format(stat.spent) }}</td> <td>{{ "%0.2f"|format(stat.spent) }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
<h2>{{ _("Expenses by Month") }}</h2> <h2>{{ _("Expenses by Month") }}</h2>
<table id="monthly_stats" class="table table-striped"> <table id="monthly_stats" class="table table-striped">
<thead><tr><th>{{ _("Period") }}</th><th>{{ _("Spent") }}</th></tr></thead> <thead><tr><th>{{ _("Period") }}</th><th>{{ _("Spent") }}</th></tr></thead>
<tbody> <tbody>
{% for month in months %} {% for month in months %}
<tr> <tr>
<td>{{ _(month.strftime("%B")) }} {{ month.year }}</td> <td>{{ _(month.strftime("%B")) }} {{ month.year }}</td>
<td>{{ "%0.2f"|format(monthly_stats[month.year][month.month]) }}</td> <td>{{ "%0.2f"|format(monthly_stats[month.year][month.month]) }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
{% endblock %} {% endblock %}