edpibu/nummi
1
Fork 0
Code Issues 5 Releases Activity

Improve account list

Browse source 
Closes #19
This commit is contained in:
Edgar P. Burkhart 2024-12-30 16:11:43 +01:00
parent cf25fd1826
commit 93c4b43fa3
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
4 changed files with 46 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
nummi/main/static/main/css/main.css
View file

@ -116,7 +116,7 @@ main {
row-gap: var(--gap);
grid-template-columns: 100%;
@media (width > 720px) {
grid-template-columns: max-content 1fr;
grid-template-columns: minmax(20rem, max-content) 1fr;
}
& > section > :first-child {
@ -334,3 +334,23 @@ ul.messages {
}
}
}
.accounts {
display: grid;
grid-row-gap: 0.5rem;
dl {
margin: 0;
.account {
padding: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid var(--gray);
display: grid;
grid-template-columns: 1fr min-content;
}
&:not(.show-archive) .account.archived {
display: none;
}
}
}

3
nummi/main/static/main/css/table.css
View file

@ -33,9 +33,6 @@ table {
border-style: dashed;
}
}
&:not(.show-archive) tr.archived {
display: none;
}
td,
th {
padding: 0 var(--gap);

16
nummi/main/static/main/js/index.js
View file

@ -1,8 +1,10 @@
for (let table of document.querySelectorAll("table")) {
let btn = table.querySelector("button.show-archive");
if (btn) {
btn.addEventListener("click", (event) => {
table.classList.toggle("show-archive");
});
}
let accounts = document.querySelector(".accounts");
let toggle = accounts.querySelector("input#show-archived-accounts");
let dl = accounts.querySelector("dl");
dl.classList.toggle("show-archive", toggle.checked);
if (toggle) {
toggle.addEventListener("change", (event) => {
dl.classList.toggle("show-archive", toggle.checked);
});
}

64
nummi/main/templates/main/index.html
View file

@ -12,55 +12,23 @@
<div class="split">
<section class="accounts">
<h2>{% translate "Accounts" %}</h2>
<div class="table">
<table>
<thead>
<tr>
<th colspan="2">{% translate "Account" %}</th>
<th>{% translate "Balance" %}</th>
<th>{% translate "Edit" %}</th>
</tr>
</thead>
<tbody>
{% for acc in accounts %}
<tr class="{% if acc.archived %}archived{% endif %}">
<td>{{ acc.icon|remix }}</td>
<th class="l">
<a href="{{ acc.get_absolute_url }}">{{ acc }}</a>
</th>
<td class="value">
{% if acc.statement_set.first %}{{ acc.statement_set.first.value|value }}{% endif %}
</td>
<td>
<a href="{% url "edit_account" acc.pk %}">{% translate "Edit" %}</a>
</td>
</tr>
{% empty %}
<tr>
<td class="empty" colspan="4">{% translate "No account" %}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<td>{{ "functions"|remix }}</td>
<th class="l">{% translate "Total" %}</th>
<td class="value">{{ accounts|balance|value }}</td>
<td></td>
</tr>
<tr class="new">
<td colspan="4">
<a href="{% url "new_account" %}">{% translate "Create account" %}</a>
</td>
</tr>
<tr>
<td colspan="4">
<button class="show-archive">{% translate "Show archived" %}</button>
</td>
</tr>
</tfoot>
</table>
<dl>
{% for acc in accounts %}
<div class="account {% if acc.archived %}archived{% endif %}">
<dt>
{{ acc.icon|remix }} <a href="{{ acc.get_absolute_url }}">{{ acc }}</a>
</dt>
<dd>
{% if acc.statement_set.first %}{{ acc.statement_set.first.value|value }}{% endif %}
</dd>
</div>
{% endfor %}
</dl>
<div>
<input type="checkbox" class="show-archived" id="show-archived-accounts" />
<label for="show-archived-accounts">{% translate "Show archived" %}</label>
</div>
<a href="{% url "new_account" %}">{% translate "Create account" %}</a>
</section>
<section class="categories">
<h2>{% translate "Categories" %}</h2>