imacat/mia-accounting
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 41 Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/accounting/static/css/style.css
View File

@ -109,24 +109,60 @@
border-top: thick double slategray; border-top: thick double slategray;
} }
/* The accounting report */ /* The report table */
.accounting-ledger-table thead { .accounting-report-table-header, .accounting-report-table-footer {
font-size: 1.2rem;
font-weight: bolder;
}
.accounting-report-table-header {
border-bottom: thick double slategray; 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; text-align: right;
} }
td.accounting-amount { .accounting-report-table-body .accounting-amount {
font-style: italic; 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 { .accounting-mobile-journal-credit {
padding-left: 1rem; padding-left: 1rem;
} }
.accounting-ledger-table tfoot {
border-top: thick double slategray;
font-weight: bolder;
font-style: italic;
}
.accounting-report-row { .accounting-report-row {
border: none; border: none;
} }

75
src/accounting/templates/accounting/report/income-expenses.html
View File

@ -149,40 +149,51 @@ First written: 2023/3/5
{% if list %} {% if list %}
{% include "accounting/include/pagination.html" %} {% include "accounting/include/pagination.html" %}
<table class="table table-striped table-hover d-none d-md-table accounting-ledger-table"> <div class="d-none d-md-block accounting-report-table accounting-income-expenses-table">
<thead> <div class="accounting-report-table-header">
<tr> <div class="accounting-report-table-row">
<th scope="col">{{ A_("Date") }}</th> <div>{{ A_("Date") }}</div>
<th scope="col">{{ A_("Account") }}</th> <div>{{ A_("Account") }}</div>
<th scope="col">{{ A_("Summary") }}</th> <div>{{ A_("Summary") }}</div>
<th class="accounting-amount" scope="col">{{ A_("Income") }}</th> <div class="accounting-amount">{{ A_("Income") }}</div>
<th class="accounting-amount" scope="col">{{ A_("Expense") }}</th> <div class="accounting-amount">{{ A_("Expense") }}</div>
<th class="accounting-amount" scope="col">{{ A_("Balance") }}</th> <div class="accounting-amount">{{ A_("Balance") }}</div>
</tr> </div>
</thead> </div>
<tbody> <div class="accounting-report-table-body">
{% for item in list %} {% 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 %}> {% if item.transaction %}
<td>{{ item.date|accounting_format_date }}</td> <a class="accounting-report-table-row" href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
<td>{{ item.account.title|title }}</td> <div>{{ item.date|accounting_format_date }}</div>
<td>{{ item.summary|accounting_default }}</td> <div>{{ item.account.title|title }}</div>
<td class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</td> <div>{{ item.summary|accounting_default }}</div>
<td class="accounting-amount">{{ item.expense|accounting_format_amount|accounting_default }}</td> <div class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</div>
<td class="accounting-amount">{{ item.balance|accounting_format_amount }}</td> <div class="accounting-amount">{{ item.expense|accounting_format_amount|accounting_default }}</div>
</tr> <div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
{% endfor %} </a>
</tbody> {% else %}
{% if report.total_row is not none %} <div class="accounting-report-table-row">
<tfoot> <div>{{ item.date|accounting_format_date }}</div>
<tr> <div>{{ item.account.title|title }}</div>
<td colspan="3">{{ A_("Total") }}</td> <div>{{ item.summary|accounting_default }}</div>
<td class="accounting-amount">{{ report.total_row.income|accounting_format_amount }}</td> <div class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</div>
<td class="accounting-amount">{{ report.total_row.expense|accounting_format_amount }}</td> <div class="accounting-amount">{{ item.expense|accounting_format_amount|accounting_default }}</div>
<td class="accounting-amount">{{ report.total_row.balance|accounting_format_amount }}</td> <div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
</tr> </div>
</tfoot>
{% endif %} {% 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"> <div class="list-group d-md-none">
{% for item in list %} {% for item in list %}

46
src/accounting/templates/accounting/report/journal.html
View File

@ -24,7 +24,7 @@ First written: 2023/3/4
{% block accounting_scripts %} {% 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/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/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 %} {% endblock %}
{% block header %}{% block title %}{{ _("Journal %(period)s", period=report.period.desc|title) }}{% endblock %}{% 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 %} {% if list %}
{% include "accounting/include/pagination.html" %} {% include "accounting/include/pagination.html" %}
<table class="table table-striped table-hover d-none d-md-table accounting-ledger-table"> <div class="d-none d-md-block accounting-report-table accounting-journal-table">
<thead> <div class="accounting-report-table-header">
<tr> <div class="accounting-report-table-row">
<th scope="col">{{ A_("Date") }}</th> <div>{{ A_("Date") }}</div>
<th scope="col">{{ A_("Currency") }}</th> <div>{{ A_("Currency") }}</div>
<th scope="col">{{ A_("Account") }}</th> <div>{{ A_("Account") }}</div>
<th scope="col">{{ A_("Summary") }}</th> <div>{{ A_("Summary") }}</div>
<th class="accounting-amount" scope="col">{{ A_("Debit") }}</th> <div class="accounting-amount">{{ A_("Debit") }}</div>
<th class="accounting-amount" scope="col">{{ A_("Credit") }}</th> <div class="accounting-amount">{{ A_("Credit") }}</div>
</tr> </div>
</thead> </div>
<tbody> <div class="accounting-report-table-body">
{% for item in list %} {% 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 }}"> <a class="accounting-report-table-row" href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
<td>{{ item.transaction.date|accounting_format_date }}</td> <div>{{ item.transaction.date|accounting_format_date }}</div>
<td>{{ item.currency.name }}</td> <div>{{ item.currency.name }}</div>
<td>{{ item.account.title|title }}</td> <div>{{ item.account.title|title }}</div>
<td>{{ item.summary|accounting_default }}</td> <div>{{ item.summary|accounting_default }}</div>
<td class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</td> <div class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</div>
<td class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</td> <div class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</div>
</tr> </a>
{% endfor %} {% endfor %}
</tbody> </div>
</table> </div>
<div class="list-group d-md-none"> <div class="list-group d-md-none">
{% for item in list %} {% for item in list %}

70
src/accounting/templates/accounting/report/ledger.html
View File

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