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:
parent
898a1af7b5
commit
aa669e9f53
@ -109,24 +109,60 @@
|
||||
border-top: thick double slategray;
|
||||
}
|
||||
|
||||
/* The accounting report */
|
||||
.accounting-ledger-table thead {
|
||||
/* The report table */
|
||||
.accounting-report-table-header, .accounting-report-table-footer {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.accounting-report-table-header {
|
||||
border-bottom: thick double slategray;
|
||||
}
|
||||
.accounting-amount {
|
||||
.accounting-report-table-footer {
|
||||
font-style: italic;
|
||||
border-top: thick double slategray;
|
||||
}
|
||||
.accounting-report-table-row {
|
||||
display: grid;
|
||||
}
|
||||
a.accounting-report-table-row {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.accounting-report-table-row > div {
|
||||
padding: .5rem;
|
||||
}
|
||||
.accounting-report-table .accounting-amount {
|
||||
text-align: right;
|
||||
}
|
||||
td.accounting-amount {
|
||||
.accounting-report-table-body .accounting-amount {
|
||||
font-style: italic;
|
||||
}
|
||||
.accounting-report-table-body .accounting-report-table-row:nth-child(2n+1) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.accounting-report-table-body .accounting-report-table-row:hover {
|
||||
background-color: rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.accounting-journal-table .accounting-report-table-row {
|
||||
grid-template-columns: 1fr 1fr 2fr 4fr 1fr 1fr;
|
||||
}
|
||||
.accounting-ledger-table .accounting-report-table-row {
|
||||
grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
|
||||
}
|
||||
.accounting-ledger-table .accounting-report-table-footer .accounting-report-table-row {
|
||||
grid-template-columns: 5fr 1fr 1fr 1fr;
|
||||
}
|
||||
.accounting-income-expenses-table .accounting-report-table-row {
|
||||
grid-template-columns: 1fr 2fr 4fr 1fr 1fr 1fr;
|
||||
}
|
||||
.accounting-income-expenses-table .accounting-report-table-footer .accounting-report-table-row {
|
||||
grid-template-columns: 7fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
/* The accounting report */
|
||||
.accounting-mobile-journal-credit {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.accounting-ledger-table tfoot {
|
||||
border-top: thick double slategray;
|
||||
font-weight: bolder;
|
||||
font-style: italic;
|
||||
}
|
||||
.accounting-report-row {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -149,40 +149,51 @@ 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_("Account") }}</th>
|
||||
<th scope="col">{{ A_("Summary") }}</th>
|
||||
<th class="accounting-amount" scope="col">{{ A_("Income") }}</th>
|
||||
<th class="accounting-amount" scope="col">{{ A_("Expense") }}</th>
|
||||
<th class="accounting-amount" scope="col">{{ A_("Balance") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<div class="d-none d-md-block accounting-report-table accounting-income-expenses-table">
|
||||
<div class="accounting-report-table-header">
|
||||
<div class="accounting-report-table-row">
|
||||
<div>{{ A_("Date") }}</div>
|
||||
<div>{{ A_("Account") }}</div>
|
||||
<div>{{ A_("Summary") }}</div>
|
||||
<div class="accounting-amount">{{ A_("Income") }}</div>
|
||||
<div class="accounting-amount">{{ A_("Expense") }}</div>
|
||||
<div class="accounting-amount">{{ A_("Balance") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accounting-report-table-body">
|
||||
{% 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.account.title|title }}</td>
|
||||
<td>{{ item.summary|accounting_default }}</td>
|
||||
<td class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</td>
|
||||
<td class="accounting-amount">{{ item.expense|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="3">{{ A_("Total") }}</td>
|
||||
<td class="accounting-amount">{{ report.total_row.income|accounting_format_amount }}</td>
|
||||
<td class="accounting-amount">{{ report.total_row.expense|accounting_format_amount }}</td>
|
||||
<td class="accounting-amount">{{ report.total_row.balance|accounting_format_amount }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
{% 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.account.title|title }}</div>
|
||||
<div>{{ item.summary|accounting_default }}</div>
|
||||
<div class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</div>
|
||||
<div class="accounting-amount">{{ item.expense|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.account.title|title }}</div>
|
||||
<div>{{ item.summary|accounting_default }}</div>
|
||||
<div class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</div>
|
||||
<div class="accounting-amount">{{ item.expense|accounting_format_amount|accounting_default }}</div>
|
||||
<div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</table>
|
||||
{% 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.income|accounting_format_amount }}</div>
|
||||
<div class="accounting-amount">{{ report.total_row.expense|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 %}
|
||||
|
||||
@ -24,7 +24,7 @@ First written: 2023/3/4
|
||||
{% block accounting_scripts %}
|
||||
<script src="{{ url_for("accounting.static", filename="js/material-fab-speed-dial.js") }}"></script>
|
||||
<script src="{{ url_for("accounting.static", filename="js/period-chooser.js") }}"></script>
|
||||
<script src="{{ url_for("accounting.static", filename="js/table-row-link.js") }}"></script>
|
||||
{# <script src="{{ url_for("accounting.static", filename="js/table-row-link.js") }}"></script> #}
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}{% block title %}{{ _("Journal %(period)s", period=report.period.desc|title) }}{% endblock %}{% endblock %}
|
||||
@ -91,30 +91,30 @@ First written: 2023/3/4
|
||||
{% 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_("Currency") }}</th>
|
||||
<th scope="col">{{ A_("Account") }}</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<div class="d-none d-md-block accounting-report-table accounting-journal-table">
|
||||
<div class="accounting-report-table-header">
|
||||
<div class="accounting-report-table-row">
|
||||
<div>{{ A_("Date") }}</div>
|
||||
<div>{{ A_("Currency") }}</div>
|
||||
<div>{{ A_("Account") }}</div>
|
||||
<div>{{ A_("Summary") }}</div>
|
||||
<div class="accounting-amount">{{ A_("Debit") }}</div>
|
||||
<div class="accounting-amount">{{ A_("Credit") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accounting-report-table-body">
|
||||
{% for item in list %}
|
||||
<tr class="accounting-clickable accounting-table-row-link" data-href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
|
||||
<td>{{ item.transaction.date|accounting_format_date }}</td>
|
||||
<td>{{ item.currency.name }}</td>
|
||||
<td>{{ item.account.title|title }}</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>
|
||||
</tr>
|
||||
<a class="accounting-report-table-row" href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
|
||||
<div>{{ item.transaction.date|accounting_format_date }}</div>
|
||||
<div>{{ item.currency.name }}</div>
|
||||
<div>{{ item.account.title|title }}</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>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group d-md-none">
|
||||
{% for item in list %}
|
||||
|
||||
@ -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>
|
||||
<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 %}
|
||||
<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>
|
||||
{% 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 %}
|
||||
</table>
|
||||
{% 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 %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user