Update statement display (cards instead of table)
This commit is contained in:
parent
886e682650
commit
63f1cf4e4d
GPG key ID:
9833D3C5A25BD227
7 changed files with 99 additions and 93 deletions
|
|
@ -16,10 +16,6 @@
|
|||
<h3>{% translate "Statements" %}</h3>
|
||||
{% include "statement/statement_table.html" %}
|
||||
</section>
|
||||
<section>
|
||||
<h3>{% translate "Transactions" %}</h3>
|
||||
{% include "transaction/transaction_table.html" %}
|
||||
</section>
|
||||
{% if history %}
|
||||
<section>
|
||||
<h3>{% translate "History" %}</h3>
|
||||
|
|
|
|||
|
|
@ -35,15 +35,10 @@ class AccountDetailView(NummiDetailView):
|
|||
pk_url_kwarg = "account"
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
_max = 8
|
||||
_max = 6
|
||||
data = super().get_context_data(**kwargs)
|
||||
account = data.get("object")
|
||||
|
||||
_transactions = account.transaction_set.all()
|
||||
if _transactions.count() > _max:
|
||||
data["transactions_url"] = reverse_lazy(
|
||||
"account_transactions", args=(account.pk,)
|
||||
)
|
||||
_statements = account.statement_set.all()
|
||||
if _statements.count() > _max:
|
||||
data["statements_url"] = reverse_lazy(
|
||||
|
|
@ -51,11 +46,10 @@ class AccountDetailView(NummiDetailView):
|
|||
)
|
||||
|
||||
return data | {
|
||||
"transactions": _transactions[:8],
|
||||
"new_statement_url": reverse_lazy(
|
||||
"new_statement", kwargs={"account": account.pk}
|
||||
),
|
||||
"statements": _statements[:8],
|
||||
"statements": _statements[:_max],
|
||||
"history": history(account.transaction_set),
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@ footer {
|
|||
padding: 2rem;
|
||||
}
|
||||
main {
|
||||
position: relative;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -354,3 +355,50 @@ ul.messages {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.statements {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: var(--gap);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: grid;
|
||||
grid-row-gap: var(--gap);
|
||||
padding: var(--gap);
|
||||
border: var(--gray) 1px solid;
|
||||
text-align: right;
|
||||
|
||||
> * {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
|
||||
&.date :first-child {
|
||||
font-size: 2rem;
|
||||
}
|
||||
&.value :first-child {
|
||||
font-weight: 650;
|
||||
}
|
||||
&.icon {
|
||||
span {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
&.account a {
|
||||
overflow: hidden;
|
||||
text-overflow: ".";
|
||||
white-space: nowrap;
|
||||
}
|
||||
a span::after {
|
||||
content: "\a0";
|
||||
}
|
||||
}
|
||||
|
||||
&.new,
|
||||
&.more {
|
||||
border-style: dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,20 +48,20 @@ table {
|
|||
tfoot tr:not(.new) {
|
||||
background: var(--bg-01);
|
||||
}
|
||||
.l {
|
||||
text-align: left;
|
||||
}
|
||||
.r,
|
||||
.value {
|
||||
text-align: right;
|
||||
}
|
||||
.c,
|
||||
.date {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.date,
|
||||
.value {
|
||||
font-feature-settings: var(--num);
|
||||
}
|
||||
.l {
|
||||
text-align: left;
|
||||
}
|
||||
.r,
|
||||
.value {
|
||||
text-align: right;
|
||||
}
|
||||
.c,
|
||||
.date {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,4 +43,5 @@
|
|||
{% include "main/pagination.html" %}
|
||||
{% block table %}{% endblock %}
|
||||
{% include "main/pagination.html" %}
|
||||
{% block body_more %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,13 @@ def pmrvalue(val):
|
|||
|
||||
|
||||
@register.filter
|
||||
def remix(icon, cls=""):
|
||||
return mark_safe(f"""<span class="ri-{icon}-line {cls}"></span>""")
|
||||
def remix(icon, *args):
|
||||
return remixnl(f"{icon}-line", *args)
|
||||
|
||||
|
||||
@register.filter
|
||||
def remixnl(icon, cls=""):
|
||||
return mark_safe(f"""<span class="ri-{icon} {cls}"></span>""")
|
||||
|
||||
|
||||
@register.filter
|
||||
|
|
|
|||
|
|
@ -1,71 +1,33 @@
|
|||
{% load i18n main_extras statement_extras %}
|
||||
<div id="statements" class="table">
|
||||
<table class="full-width {% if statements_url %}more{% endif %}">
|
||||
<colgroup>
|
||||
<col class="icon" span="2">
|
||||
<col class="date">
|
||||
{% if not account %}
|
||||
<col class="icon">
|
||||
<col class="desc">
|
||||
{% endif %}
|
||||
<col class="value" span="3">
|
||||
</colgroup>
|
||||
<thead>
|
||||
{% if new_statement_url %}
|
||||
<tr class="new">
|
||||
<td colspan="{% if account %}6{% else %}8{% endif %}">
|
||||
<a href="{{ new_statement_url }}">{% translate "Create statement" %}</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<th>{{ "check"|remix }}</th>
|
||||
<th>{{ "attachment"|remix }}</th>
|
||||
<th>{% translate "Date" %}</th>
|
||||
{% if not account %}
|
||||
<th colspan="2">{% translate "Account" %}</th>
|
||||
{% endif %}
|
||||
<th>{% translate "Value" %}</th>
|
||||
<th>{% translate "Difference" %}</th>
|
||||
<th>{% translate "Transactions" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for snap in statements %}
|
||||
<tr>
|
||||
<td class="c">{{ snap.sum|check:snap.diff }}</td>
|
||||
<td class="c">
|
||||
{% if snap.file %}<a href="{{ snap.file.url }}">{{ "attachment"|remix }}</a>{% endif %}
|
||||
</td>
|
||||
<th class="date" scope="row">
|
||||
<a href="{{ snap.get_absolute_url }}">
|
||||
<time datetime="{{ snap.date|date:"Y-m-d" }}">{{ snap.date|date:"Y-m-d" }}</time>
|
||||
</a>
|
||||
</th>
|
||||
{% if not account %}
|
||||
<td class="r">{{ snap.account.icon|remix }}</td>
|
||||
<td>
|
||||
<a href="{{ snap.account.get_absolute_url }}">{{ snap.account }}</a>
|
||||
</td>
|
||||
{% endif %}
|
||||
<td class="value">{{ snap.value|value }}</td>
|
||||
<td class="value">{{ snap.diff|pmvalue }}</td>
|
||||
<td class="value">{{ snap.sum|pmvalue }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td class="empty" colspan="{% if account %}6{% else %}8{% endif %}">{% translate "No statement" %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
{% if statements_url %}
|
||||
<tfoot>
|
||||
<tr class="more">
|
||||
<td colspan="{% if account %}6{% else %}8{% endif %}">
|
||||
<a href="{{ statements_url }}">{% translate "View all statements" %}</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<div id="statements">
|
||||
<ul class="statements">
|
||||
{% if new_statement_url %}
|
||||
<li class="new">
|
||||
<span>
|
||||
<a href="{{ new_statement_url }}">{{ "file-add"|remix }}{% translate "Create statement" %}</a>
|
||||
</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</table>
|
||||
{% for sta in statements %}
|
||||
<li>
|
||||
<a href="{{ sta.get_absolute_url }}" class="date"><span>{{ sta.date|date:"d" }}</span>
|
||||
<span>{{ sta.date|date:"F y" }}</span></a>
|
||||
<span class="value"><span>{{ sta.value|value }}</span>
|
||||
<span>{{ sta.diff|pmvalue }}</span></span>
|
||||
{% if not account %}
|
||||
<span class="account">
|
||||
<a href="{{ sta.account.get_absolute_url }}">{{ sta.account.icon|remix }}{{ sta.account }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="icon">{{ sta.sum|check:sta.diff }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if statements_url %}
|
||||
<li class="more">
|
||||
<span>
|
||||
<a href="{{ statements_url }}">{{ "gallery-view"|remixnl }}{% translate "View all statements" %}</a>
|
||||
</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue