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); row-gap: var(--gap);
grid-template-columns: 100%; grid-template-columns: 100%;
@media (width > 720px) { @media (width > 720px) {
grid-template-columns: max-content 1fr; grid-template-columns: minmax(20rem, max-content) 1fr;
} }
& > section > :first-child { & > 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; border-style: dashed;
} }
} }
&:not(.show-archive) tr.archived {
display: none;
}
td, td,
th { th {
padding: 0 var(--gap); 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 accounts = document.querySelector(".accounts");
let btn = table.querySelector("button.show-archive"); let toggle = accounts.querySelector("input#show-archived-accounts");
if (btn) { let dl = accounts.querySelector("dl");
btn.addEventListener("click", (event) => {
table.classList.toggle("show-archive"); 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"> <div class="split">
<section class="accounts"> <section class="accounts">
<h2>{% translate "Accounts" %}</h2> <h2>{% translate "Accounts" %}</h2>
<div class="table"> <dl>
<table> {% for acc in accounts %}
<thead> <div class="account {% if acc.archived %}archived{% endif %}">
<tr> <dt>
<th colspan="2">{% translate "Account" %}</th> {{ acc.icon|remix }} <a href="{{ acc.get_absolute_url }}">{{ acc }}</a>
<th>{% translate "Balance" %}</th> </dt>
<th>{% translate "Edit" %}</th> <dd>
</tr> {% if acc.statement_set.first %}{{ acc.statement_set.first.value|value }}{% endif %}
</thead> </dd>
<tbody> </div>
{% for acc in accounts %} {% endfor %}
<tr class="{% if acc.archived %}archived{% endif %}"> </dl>
<td>{{ acc.icon|remix }}</td> <div>
<th class="l"> <input type="checkbox" class="show-archived" id="show-archived-accounts" />
<a href="{{ acc.get_absolute_url }}">{{ acc }}</a> <label for="show-archived-accounts">{% translate "Show archived" %}</label>
</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>
</div> </div>
<a href="{% url "new_account" %}">{% translate "Create account" %}</a>
</section> </section>
<section class="categories"> <section class="categories">
<h2>{% translate "Categories" %}</h2> <h2>{% translate "Categories" %}</h2>