edpibu/nummi
1
Fork 0
Code Issues 4 Releases Activity

Fix account table display on small devices

Browse source
This commit is contained in:
Edgar P. Burkhart 2024-01-05 08:56:16 +01:00
parent a6e84fbc13
commit 0ff191e0a4
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
3 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -114,7 +114,7 @@ main {
display: grid; display: grid;
column-gap: var(--gap); column-gap: var(--gap);
row-gap: var(--gap); row-gap: var(--gap);
grid-template-columns: 1fr; grid-template-columns: 100%;
@media (width > 720px) { @media (width > 720px) {
grid-template-columns: max-content 1fr; grid-template-columns: max-content 1fr;
} }

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

@ -1,6 +1,7 @@
.table, .table,
form { form {
overflow-x: auto; overflow-x: auto;
width: 100%;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;

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

@ -11,40 +11,42 @@
<div class="split"> <div class="split">
<section class="accounts"> <section class="accounts">
<h2>{% translate "Accounts" %}</h2> <h2>{% translate "Accounts" %}</h2>
<table> <div class="table">
<thead> <table>
<tr> <thead>
<th colspan="2">{% translate "Account" %}</th>
<th>{% translate "Balance" %}</th>
<th>{% translate "Edit" %}</th>
</tr>
</thead>
<tbody>
{% for acc in accounts %}
<tr> <tr>
<td>{{ acc.icon|remix }}</td> <th colspan="2">{% translate "Account" %}</th>
<th class="l"> <th>{% translate "Balance" %}</th>
<a href="{{ acc.get_absolute_url }}">{{ acc }}</a> <th>{% translate "Edit" %}</th>
</th> </tr>
<td class="value">{{ acc.statement_set.first.value|value }}</td> </thead>
<td> <tbody>
<a href="{% url "edit_account" acc.pk %}">{% translate "Edit" %}</a> {% for acc in accounts %}
<tr>
<td>{{ acc.icon|remix }}</td>
<th class="l">
<a href="{{ acc.get_absolute_url }}">{{ acc }}</a>
</th>
<td class="value">{{ acc.statement_set.first.value|value }}</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 class="new">
<td colspan="4">
<a href="{% url "new_account" %}">{% translate "Create account" %}</a>
</td> </td>
</tr> </tr>
{% empty %} </tfoot>
<tr> </table>
<td class="empty" colspan="4">{% translate "No account" %}</td> </div>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="new">
<td colspan="4">
<a href="{% url "new_account" %}">{% translate "Create account" %}</a>
</td>
</tr>
</tfoot>
</table>
</section> </section>
<section class="categories"> <section class="categories">
<h2>{% translate "Categories" %}</h2> <h2>{% translate "Categories" %}</h2>