Replaced the <ul></ul> list with CSS "display: grid" for the trial balance, to allow using <a></a> as the table row.

This commit is contained in:
依瑪貓 2023-03-06 08:24:05 +08:00
parent aa669e9f53
commit 22bae7f766
2 changed files with 21 additions and 41 deletions

View File

@ -158,37 +158,14 @@ a.accounting-report-table-row {
.accounting-income-expenses-table .accounting-report-table-footer .accounting-report-table-row { .accounting-income-expenses-table .accounting-report-table-footer .accounting-report-table-row {
grid-template-columns: 7fr 1fr 1fr 1fr; grid-template-columns: 7fr 1fr 1fr 1fr;
} }
.accounting-trial-balance-table .accounting-report-table-row {
grid-template-columns: 3fr 1fr 1fr;
}
/* The accounting report */ /* The accounting report */
.accounting-mobile-journal-credit { .accounting-mobile-journal-credit {
padding-left: 1rem; padding-left: 1rem;
} }
.accounting-report-row {
border: none;
}
a.accounting-report-row:hover {
color: inherit;
}
.accounting-trial-balance-row.accounting-trial-balance-header {
border-bottom: thick double slategray;
font-weight: bolder;
font-size: 1.2rem;
}
.accounting-trial-balance-row.accounting-trial-balance-header .accounting-amount {
font-style: normal;
}
.accounting-trial-balance-row > div {
width: 50%;
}
.accounting-trial-balance-row .accounting-amount {
width: 50%;
font-style: italic;
}
.accounting-trial-balance-row.accounting-trial-balance-total {
border-top: thick double slategray;
font-weight: bolder;
font-size: 1.2rem;
}
/* The Material Design text field (floating form control in Bootstrap) */ /* The Material Design text field (floating form control in Bootstrap) */
.accounting-material-text-field { .accounting-material-text-field {

View File

@ -122,26 +122,29 @@ First written: 2023/3/5
<h2 class="text-center">{{ _("Trial Balance of %(currency)s %(period)s", currency=report.currency.name|title, period=report.period.desc|title) }}</h2> <h2 class="text-center">{{ _("Trial Balance of %(currency)s %(period)s", currency=report.currency.name|title, period=report.period.desc|title) }}</h2>
</div> </div>
<div class="list-group accounting-list-group-stripped accounting-list-group-hover"> <div class="accounting-report-table accounting-trial-balance-table">
<div class="list-group-item d-flex justify-content-between accounting-report-row accounting-trial-balance-row accounting-trial-balance-header"> <div class="accounting-report-table-header">
<div class="accounting-report-table-row">
<div>{{ A_("Account") }}</div> <div>{{ A_("Account") }}</div>
<div class="d-flex justify-content-between">
<div class="accounting-amount">{{ A_("Debit") }}</div> <div class="accounting-amount">{{ A_("Debit") }}</div>
<div class="accounting-amount">{{ A_("Credit") }}</div> <div class="accounting-amount">{{ A_("Credit") }}</div>
</div> </div>
</div> </div>
<div class="accounting-report-table-body">
{% for item in list %} {% for item in list %}
<a class="list-group-item d-flex justify-content-between accounting-report-row accounting-trial-balance-row" href="{{ item.url }}"> <a class="accounting-report-table-row" href="{{ item.url }}">
<div>{{ item.account|title }}</div> <div>
<div class="d-flex justify-content-between"> <span class="d-none d-md-inline">{{ item.account.code }}</span>
{{ item.account.title|title }}
</div>
<div class="accounting-amount">{{ item.debit|accounting_format_amount|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.credit|accounting_format_amount|accounting_default }}</div>
</div>
</a> </a>
{% endfor %} {% endfor %}
<div class="list-group-item d-flex justify-content-between accounting-report-row accounting-trial-balance-row accounting-trial-balance-total"> </div>
<div class="accounting-report-table-footer">
<div class="accounting-report-table-row">
<div>{{ A_("Total") }}</div> <div>{{ A_("Total") }}</div>
<div class="d-flex justify-content-between">
<div class="accounting-amount">{{ report.total_row.debit|accounting_format_amount }}</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.credit|accounting_format_amount }}</div>
</div> </div>