From b478286f47f82dfa55a01be7edd5cfeeb034f4da Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Wed, 3 Jan 2024 15:13:54 +0100
Subject: [PATCH] Fix page layout

---
 nummi/main/static/main/css/main.css  | 30 ++++------
 nummi/main/templates/main/index.html | 86 ++++++++++++++--------------
 nummi/main/templates/main/list.html  | 34 +++++------
 3 files changed, 71 insertions(+), 79 deletions(-)

diff --git a/nummi/main/static/main/css/main.css b/nummi/main/static/main/css/main.css
index e5b4b07..d094d26 100644
--- a/nummi/main/static/main/css/main.css
+++ b/nummi/main/static/main/css/main.css
@@ -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;
 }
diff --git a/nummi/main/templates/main/index.html b/nummi/main/templates/main/index.html
index 0fe5318..f88b5b0 100644
--- a/nummi/main/templates/main/index.html
+++ b/nummi/main/templates/main/index.html
@@ -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>
diff --git a/nummi/main/templates/main/list.html b/nummi/main/templates/main/list.html
index 57adec0..ee3050e 100644
--- a/nummi/main/templates/main/list.html
+++ b/nummi/main/templates/main/list.html
@@ -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" %}
