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

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

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

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

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