edpibu/nummi
1
Fork 0
Code Issues 4 Releases Activity

Fix page layout

Browse source
This commit is contained in:
Edgar P. Burkhart 2024-01-03 15:13:54 +01:00
parent 6d14602dd2
commit b478286f47
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
3 changed files with 71 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -94,27 +94,21 @@ main {
grid-column: 2;
grid-row: 1;
overflow-x: hidden;
display: grid;
grid-template-columns: max-content 1fr;
grid-gap: var(--gap);
h2.new {
opacity: 0.8;
}
& > * {
grid-column: 1 / -1;
}
.split {
display: grid;
column-gap: var(--gap);
row-gap: var(--gap);
grid-template-columns: 1fr;
@media (width > 720px) {
grid-template-columns: max-content 1fr;
}
@media (width > 720px) {
& > section {
&.accounts {
grid-column: 1;
}
&.categories {
grid-column: 2;
}
& > section > :first-child {
margin-top: 0;
}
}
}
@ -159,7 +153,7 @@ nav {
}
}
:is(nav, main) > :first-child,
main > section > :first-child {
main > section:first-child > :first-child {
margin-top: 0;
}
footer {
@ -231,7 +225,7 @@ h1,
h2,
h3 {
font-weight: 300;
margin-top: var(--gap);
margin-top: 1em;
margin-bottom: 0.5em;
line-height: 1cap;
}

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

@ -8,53 +8,55 @@
{% css "main/css/plot.css" %}
{% endblock %}
{% block body %}
<section class="accounts">
<h2>{% translate "Accounts" %}</h2>
<table>
<thead>
<tr>
<th colspan="2">{% translate "Account" %}</th>
<th>{% translate "Balance" %}</th>
</tr>
</thead>
<tbody>
{% for acc in accounts %}
<div class="split">
<section class="accounts">
<h2>{% translate "Accounts" %}</h2>
<table>
<thead>
<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>
<th colspan="2">{% translate "Account" %}</th>
<th>{% translate "Balance" %}</th>
</tr>
{% empty %}
<tr>
<td class="empty" colspan="3">{% translate "No account" %}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="new">
<td colspan="3">
<a href="{% url "new_account" %}">{% translate "Create account" %}</a>
</td>
</tr>
</tfoot>
</table>
</section>
{% if categories %}
<section class="categories">
<h2>{% translate "Categories" %}</h2>
{% spaceless %}
<p>
{% for cat in categories %}
<a class="big-link" href="{{ cat.get_absolute_url }}">{{ cat.icon|remix }}{{ cat }}</a>
</thead>
<tbody>
{% 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>
</tr>
{% empty %}
{% translate "No category" %}
<tr>
<td class="empty" colspan="3">{% translate "No account" %}</td>
</tr>
{% endfor %}
</p>
{% endspaceless %}
</tbody>
<tfoot>
<tr class="new">
<td colspan="3">
<a href="{% url "new_account" %}">{% translate "Create account" %}</a>
</td>
</tr>
</tfoot>
</table>
</section>
{% endif %}
{% if categories %}
<section class="categories">
<h2>{% translate "Categories" %}</h2>
{% spaceless %}
<p>
{% for cat in categories %}
<a class="big-link" href="{{ cat.get_absolute_url }}">{{ cat.icon|remix }}{{ cat }}</a>
{% empty %}
{% translate "No category" %}
{% endfor %}
</p>
{% endspaceless %}
</section>
{% endif %}
</div>
{% if history %}
<section>
<h2>{% translate "History" %}</h2>

34
nummi/main/templates/main/list.html
View file

@ -19,25 +19,21 @@
<h2>
{% block h2 %}{% endblock %}
</h2>
<div class="backlinks">
{% block backlinks %}
{% if account %}
<p>
<a class="big-link" href="{{ account.get_absolute_url }}">{{ account.icon|remix }}{{ account }}</a>
</p>
{% endif %}
{% if category %}
<p>
<a class="big-link" href="{{ category.get_absolute_url }}">{{ category.icon|remix }}{{ category }}</a>
</p>
{% endif %}
{% if search %}
<p>
<a href="{% url "search" %}">{% translate "Search" %}</a>
</p>
{% endif %}
{% endblock %}
</div>
{% if account %}
<p>
<a class="big-link" href="{{ account.get_absolute_url }}">{{ account.icon|remix }}{{ account }}</a>
</p>
{% endif %}
{% if category %}
<p>
<a class="big-link" href="{{ category.get_absolute_url }}">{{ category.icon|remix }}{{ category }}</a>
</p>
{% endif %}
{% if search %}
<p>
<a href="{% url "search" %}">{% translate "Search" %}</a>
</p>
{% endif %}
{% include "main/pagination.html" %}
{% block table %}{% endblock %}
{% include "main/pagination.html" %}