Align tables in statistics

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

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 {

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>{{ _("Who?") }}</th>
<th class="balance-value">{{ _("Balance") }}</th> <th class="balance-value">{{ _("Balance") }}</th>
</tr> </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,13 +23,13 @@
{% 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>
@ -46,5 +48,6 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
{% endblock %} {% endblock %}