Update statement display (cards instead of table)

nummi/account/templates/account/account_detail.html

@@ -16,10 +16,6 @@
         <h3>{% translate "Statements" %}</h3>
         {% include "statement/statement_table.html" %}
     </section>
-    <section>
-        <h3>{% translate "Transactions" %}</h3>
-        {% include "transaction/transaction_table.html" %}
-    </section>
     {% if history %}
         <section>
             <h3>{% translate "History" %}</h3>

nummi/account/views.py

@@ -35,15 +35,10 @@ class AccountDetailView(NummiDetailView):
     pk_url_kwarg = "account"
 
     def get_context_data(self, **kwargs):
-        _max = 8
+        _max = 6
         data = super().get_context_data(**kwargs)
         account = data.get("object")
 
-        _transactions = account.transaction_set.all()
-        if _transactions.count() > _max:
-            data["transactions_url"] = reverse_lazy(
-                "account_transactions", args=(account.pk,)
-            )
         _statements = account.statement_set.all()
         if _statements.count() > _max:
             data["statements_url"] = reverse_lazy(
@@ -51,11 +46,10 @@ class AccountDetailView(NummiDetailView):
             )
 
         return data | {
-            "transactions": _transactions[:8],
             "new_statement_url": reverse_lazy(
                 "new_statement", kwargs={"account": account.pk}
             ),
-            "statements": _statements[:8],
+            "statements": _statements[:_max],
             "history": history(account.transaction_set),
         }
 

nummi/main/static/main/css/main.css

@@ -103,6 +103,7 @@ footer {
   padding: 2rem;
 }
 main {
+  position: relative;
   grid-column: 2;
   grid-row: 1;
   overflow-x: hidden;
@@ -354,3 +355,50 @@ ul.messages {
     }
   }
 }
+
+ul.statements {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  grid-auto-rows: 1fr;
+  grid-gap: var(--gap);
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: grid;
+    grid-row-gap: var(--gap);
+    padding: var(--gap);
+    border: var(--gray) 1px solid;
+    text-align: right;
+
+    > * {
+      display: grid;
+      align-items: center;
+
+      &.date :first-child {
+        font-size: 2rem;
+      }
+      &.value :first-child {
+        font-weight: 650;
+      }
+      &.icon {
+        span {
+          margin: auto;
+        }
+      }
+      &.account a {
+        overflow: hidden;
+        text-overflow: ".";
+        white-space: nowrap;
+      }
+      a span::after {
+        content: "\a0";
+      }
+    }
+
+    &.new,
+    &.more {
+      border-style: dashed;
+    }
+  }
+}

nummi/main/static/main/css/table.css

@@ -48,20 +48,20 @@ table {
   tfoot tr:not(.new) {
     background: var(--bg-01);
   }
+  .l {
+    text-align: left;
+  }
+  .r,
+  .value {
+    text-align: right;
+  }
+  .c,
+  .date {
+    text-align: center;
+  }
 }
 
 .date,
 .value {
   font-feature-settings: var(--num);
 }
-.l {
-  text-align: left;
-}
-.r,
-.value {
-  text-align: right;
-}
-.c,
-.date {
-  text-align: center;
-}

nummi/main/templates/main/list.html

@@ -43,4 +43,5 @@
     {% include "main/pagination.html" %}
     {% block table %}{% endblock %}
     {% include "main/pagination.html" %}
+    {% block body_more %}{% endblock %}
 {% endblock %}

nummi/main/templatetags/main_extras.py

@@ -35,8 +35,13 @@ def pmrvalue(val):
 
 
 @register.filter
-def remix(icon, cls=""):
+def remix(icon, *args):
-    return mark_safe(f"""<span class="ri-{icon}-line {cls}"></span>""")
+    return remixnl(f"{icon}-line", *args)
+
+
+@register.filter
+def remixnl(icon, cls=""):
+    return mark_safe(f"""<span class="ri-{icon} {cls}"></span>""")
 
 
 @register.filter

nummi/statement/templates/statement/statement_table.html

@@ -1,71 +1,33 @@
 {% load i18n main_extras statement_extras %}
-<div id="statements" class="table">
+<div id="statements">
-    <table class="full-width {% if statements_url %}more{% endif %}">
+    <ul class="statements">
-        <colgroup>
+        {% if new_statement_url %}
-            <col class="icon" span="2">
+            <li class="new">
-            <col class="date">
+                <span>
-            {% if not account %}
+                    <a href="{{ new_statement_url }}">{{ "file-add"|remix }}{% translate "Create statement" %}</a>
-                <col class="icon">
+                </span>
-                <col class="desc">
+            </li>
-            {% endif %}
-            <col class="value" span="3">
-        </colgroup>
-        <thead>
-            {% if new_statement_url %}
-                <tr class="new">
-                    <td colspan="{% if account %}6{% else %}8{% endif %}">
-                        <a href="{{ new_statement_url }}">{% translate "Create statement" %}</a>
-                    </td>
-                </tr>
-            {% endif %}
-            <tr>
-                <th>{{ "check"|remix }}</th>
-                <th>{{ "attachment"|remix }}</th>
-                <th>{% translate "Date" %}</th>
-                {% if not account %}
-                    <th colspan="2">{% translate "Account" %}</th>
-                {% endif %}
-                <th>{% translate "Value" %}</th>
-                <th>{% translate "Difference" %}</th>
-                <th>{% translate "Transactions" %}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for snap in statements %}
-                <tr>
-                    <td class="c">{{ snap.sum|check:snap.diff }}</td>
-                    <td class="c">
-                        {% if snap.file %}<a href="{{ snap.file.url }}">{{ "attachment"|remix }}</a>{% endif %}
-                    </td>
-                    <th class="date" scope="row">
-                        <a href="{{ snap.get_absolute_url }}">
-                            <time datetime="{{ snap.date|date:"Y-m-d" }}">{{ snap.date|date:"Y-m-d" }}</time>
-                        </a>
-                    </th>
-                    {% if not account %}
-                        <td class="r">{{ snap.account.icon|remix }}</td>
-                        <td>
-                            <a href="{{ snap.account.get_absolute_url }}">{{ snap.account }}</a>
-                        </td>
-                    {% endif %}
-                    <td class="value">{{ snap.value|value }}</td>
-                    <td class="value">{{ snap.diff|pmvalue }}</td>
-                    <td class="value">{{ snap.sum|pmvalue }}</td>
-                </tr>
-            {% empty %}
-                <tr>
-                    <td class="empty" colspan="{% if account %}6{% else %}8{% endif %}">{% translate "No statement" %}</td>
-                </tr>
-            {% endfor %}
-        </tbody>
-        {% if statements_url %}
-            <tfoot>
-                <tr class="more">
-                    <td colspan="{% if account %}6{% else %}8{% endif %}">
-                        <a href="{{ statements_url }}">{% translate "View all statements" %}</a>
-                    </td>
-                </tr>
-            </tfoot>
         {% endif %}
-    </table>
+        {% for sta in statements %}
+            <li>
+                <a href="{{ sta.get_absolute_url }}" class="date"><span>{{ sta.date|date:"d" }}</span>
+                    <span>{{ sta.date|date:"F y" }}</span></a>
+                <span class="value"><span>{{ sta.value|value }}</span>
+                <span>{{ sta.diff|pmvalue }}</span></span>
+                {% if not account %}
+                    <span class="account">
+                        <a href="{{ sta.account.get_absolute_url }}">{{ sta.account.icon|remix }}{{ sta.account }}</a>
+                    </span>
+                {% endif %}
+                <span class="icon">{{ sta.sum|check:sta.diff }}</span>
+            </li>
+        {% endfor %}
+        {% if statements_url %}
+            <li class="more">
+                <span>
+                    <a href="{{ statements_url }}">{{ "gallery-view"|remixnl }}{% translate "View all statements" %}</a>
+                </span>
+            </li>
+        {% endif %}
+    </ul>
 </div>