Improve account list

Closes #19

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;
+    }
+  }
+}

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);

nummi/main/static/main/js/index.js

@@ -1,8 +1,10 @@
-for (let table of document.querySelectorAll("table")) {
+let accounts = document.querySelector(".accounts");
-  let btn = table.querySelector("button.show-archive");
+let toggle = accounts.querySelector("input#show-archived-accounts");
-  if (btn) {
+let dl = accounts.querySelector("dl");
-    btn.addEventListener("click", (event) => {
+
-      table.classList.toggle("show-archive");
+dl.classList.toggle("show-archive", toggle.checked);
+if (toggle) {
+  toggle.addEventListener("change", (event) => {
+    dl.classList.toggle("show-archive", toggle.checked);
   });
 }
-}

nummi/main/templates/main/index.html

@@ -12,55 +12,23 @@
     <div class="split">
         <section class="accounts">
             <h2>{% translate "Accounts" %}</h2>
-            <div class="table">
+            <dl>
-                <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 %}">
+                    <div class="account {% if acc.archived %}archived{% endif %}">
-                                <td>{{ acc.icon|remix }}</td>
+                        <dt>
-                                <th class="l">
+                            {{ acc.icon|remix }} <a href="{{ acc.get_absolute_url }}">{{ acc }}</a>
-                                    <a href="{{ acc.get_absolute_url }}">{{ acc }}</a>
+                        </dt>
-                                </th>
+                        <dd>
-                                <td class="value">
                             {% if acc.statement_set.first %}{{ acc.statement_set.first.value|value }}{% endif %}
-                                </td>
+                        </dd>
-                                <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>
                     </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>