From 93c4b43fa39f0875de95c3b9e3a705d832b9b86b Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Mon, 30 Dec 2024 16:11:43 +0100
Subject: [PATCH] Improve account list Closes #19

---
 nummi/main/static/main/css/main.css  | 22 +++++++++-
 nummi/main/static/main/css/table.css |  3 --
 nummi/main/static/main/js/index.js   | 16 ++++---
 nummi/main/templates/main/index.html | 64 +++++++---------------------
 4 files changed, 46 insertions(+), 59 deletions(-)

diff --git a/nummi/main/static/main/css/main.css b/nummi/main/static/main/css/main.css
index f562459..602f2de 100644
--- a/nummi/main/static/main/css/main.css
+++ b/nummi/main/static/main/css/main.css
@@ -116,7 +116,7 @@ main {
     row-gap: var(--gap);
     grid-template-columns: 100%;
     @media (width > 720px) {
-      grid-template-columns: max-content 1fr;
+      grid-template-columns: minmax(20rem, max-content) 1fr;
     }
 
     & > 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;
+    }
+  }
+}
diff --git a/nummi/main/static/main/css/table.css b/nummi/main/static/main/css/table.css
index 478dd33..e93c777 100644
--- a/nummi/main/static/main/css/table.css
+++ b/nummi/main/static/main/css/table.css
@@ -33,9 +33,6 @@ table {
       border-style: dashed;
     }
   }
-  &:not(.show-archive) tr.archived {
-    display: none;
-  }
   td,
   th {
     padding: 0 var(--gap);
diff --git a/nummi/main/static/main/js/index.js b/nummi/main/static/main/js/index.js
index d506bf1..88438b2 100644
--- a/nummi/main/static/main/js/index.js
+++ b/nummi/main/static/main/js/index.js
@@ -1,8 +1,10 @@
-for (let table of document.querySelectorAll("table")) {
-  let btn = table.querySelector("button.show-archive");
-  if (btn) {
-    btn.addEventListener("click", (event) => {
-      table.classList.toggle("show-archive");
-    });
-  }
+let accounts = document.querySelector(".accounts");
+let toggle = accounts.querySelector("input#show-archived-accounts");
+let dl = accounts.querySelector("dl");
+
+dl.classList.toggle("show-archive", toggle.checked);
+if (toggle) {
+  toggle.addEventListener("change", (event) => {
+    dl.classList.toggle("show-archive", toggle.checked);
+  });
 }
diff --git a/nummi/main/templates/main/index.html b/nummi/main/templates/main/index.html
index 5a55b85..01006f1 100644
--- a/nummi/main/templates/main/index.html
+++ b/nummi/main/templates/main/index.html
@@ -12,55 +12,23 @@
     <div class="split">
         <section class="accounts">
             <h2>{% translate "Accounts" %}</h2>
-            <div class="table">
-                <table>
-                    <thead>
-                        <tr>
-                            <th colspan="2">{% translate "Account" %}</th>
-                            <th>{% translate "Balance" %}</th>
-                            <th>{% translate "Edit" %}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for acc in accounts %}
-                            <tr class="{% if acc.archived %}archived{% endif %}">
-                                <td>{{ acc.icon|remix }}</td>
-                                <th class="l">
-                                    <a href="{{ acc.get_absolute_url }}">{{ acc }}</a>
-                                </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>
+            <dl>
+                {% for acc in accounts %}
+                    <div class="account {% if acc.archived %}archived{% endif %}">
+                        <dt>
+                            {{ acc.icon|remix }} <a href="{{ acc.get_absolute_url }}">{{ acc }}</a>
+                        </dt>
+                        <dd>
+                            {% if acc.statement_set.first %}{{ acc.statement_set.first.value|value }}{% endif %}
+                        </dd>
+                    </div>
+                {% endfor %}
+            </dl>
+            <div>
+                <input type="checkbox" class="show-archived" id="show-archived-accounts" />
+                <label for="show-archived-accounts">{% translate "Show archived" %}</label>
             </div>
+            <a href="{% url "new_account" %}">{% translate "Create account" %}</a>
         </section>
         <section class="categories">
             <h2>{% translate "Categories" %}</h2>