Replaced tables with CSS "display: grid" for the journal, ledger, and income and expenses, to allow using <a></a> as the table row.

This commit is contained in:
2023-03-06 08:15:10 +08:00
parent 898a1af7b5
commit aa669e9f53
4 changed files with 157 additions and 100 deletions

View File

@ -149,38 +149,48 @@ First written: 2023/3/5
{% if list %}
{% include "accounting/include/pagination.html" %}
<table class="table table-striped table-hover d-none d-md-table accounting-ledger-table">
<thead>
<tr>
<th scope="col">{{ A_("Date") }}</th>
<th scope="col">{{ A_("Summary") }}</th>
<th class="accounting-amount" scope="col">{{ A_("Debit") }}</th>
<th class="accounting-amount" scope="col">{{ A_("Credit") }}</th>
<th class="accounting-amount" scope="col">{{ A_("Balance") }}</th>
</tr>
</thead>
<tbody>
{% for item in list %}
<tr {% if item.transaction is not none %} class="accounting-clickable accounting-table-row-link" data-href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}" {% endif %}>
<td>{{ item.date|accounting_format_date }}</td>
<td>{{ item.summary|accounting_default }}</td>
<td class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</td>
<td class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</td>
<td class="accounting-amount">{{ item.balance|accounting_format_amount }}</td>
</tr>
{% endfor %}
</tbody>
{% if report.total_row is not none %}
<tfoot>
<tr>
<td colspan="2">{{ A_("Total") }}</td>
<td class="accounting-amount">{{ report.total_row.debit|accounting_format_amount }}</td>
<td class="accounting-amount">{{ report.total_row.credit|accounting_format_amount }}</td>
<td class="accounting-amount">{{ report.total_row.balance|accounting_format_amount }}</td>
</tr>
</tfoot>
{% endif %}
</table>
<div class="d-none d-md-block accounting-report-table accounting-ledger-table">
<div class="accounting-report-table-header">
<div class="accounting-report-table-row">
<div>{{ A_("Date") }}</div>
<div>{{ A_("Summary") }}</div>
<div class="accounting-amount">{{ A_("Debit") }}</div>
<div class="accounting-amount">{{ A_("Credit") }}</div>
<div class="accounting-amount">{{ A_("Balance") }}</div>
</div>
</div>
<div class="accounting-report-table-body">
{% for item in list %}
{% if item.transaction %}
<a class="accounting-report-table-row" href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
<div>{{ item.date|accounting_format_date }}</div>
<div>{{ item.summary|accounting_default }}</div>
<div class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</div>
<div class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</div>
<div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
</a>
{% else %}
<div class="accounting-report-table-row">
<div>{{ item.date|accounting_format_date }}</div>
<div>{{ item.summary|accounting_default }}</div>
<div class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</div>
<div class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</div>
<div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
</div>
{% endif %}
{% endfor %}
</div>
{% if report.total_row is not none %}
<div class="accounting-report-table-footer">
<div class="accounting-report-table-row">
<div>{{ A_("Total") }}</div>
<div class="accounting-amount">{{ report.total_row.debit|accounting_format_amount }}</div>
<div class="accounting-amount">{{ report.total_row.credit|accounting_format_amount }}</div>
<div class="accounting-amount">{{ report.total_row.balance|accounting_format_amount }}</div>
</div>
</div>
{% endif %}
</div>
<div class="list-group d-md-none">
{% for item in list %}