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

@@ -1,14 +1,12 @@
 table {
 	border-collapse: collapse;
-}
-table.full-width {
 	width: 100%;
 }
 thead {
 	background: var(--bg-01);
 }
-table.full-width col {width: 8rem}
+col {width: 8rem}
-table col.icon {width: 1ch}
+col.icon {width: 1ch}
 tr {
 	border: .1rem solid var(--gray);
 	height: 2rem;

nummi/main/templates/main/plot/category.html

@@ -1,7 +1,7 @@
 {% load main_extras %}
 {% load i18n %}
 <div class="plot">
-    <table class="full-width">
+    <table>
         <colgroup>
             <col class="desc">
             <col class="icon">

nummi/main/templates/main/plot/history.html

@@ -1,7 +1,7 @@
 {% load main_extras %}
 {% load i18n %}
 <div class="plot">
-    <table class="full-width">
+    <table>
         <colgroup>
             <col class="desc">
             <col class="value">

nummi/main/templates/main/table/invoice.html

@@ -1,36 +0,0 @@
-{% load main_extras %}
-{% load i18n %}
-<div id="invoices">
-    <table>
-        <colgroup>
-            <col class="desc" span="3">
-        </colgroup>
-        <thead>
-            <th>{% translate "Name" %}</th>
-            <th>{% translate "File" %}</th>
-            <th>{% translate "Delete" %}</th>
-        </thead>
-        <tbody>
-            {% for invoice in transaction.invoices %}
-                <tr>
-                    <th scope="row" class="l">
-                        <a href="{{ invoice.get_absolute_url }}">{{ invoice.name }}</a>
-                    </th>
-                    <td>
-                        <a href="{{ invoice.file.url }}">{% translate "File" %}</a>
-                    </td>
-                    <td>
-                        <a href="{{ invoice.get_delete_url }}">{% translate "Delete" %}
-                        </td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td colspan="3">
-                        <a href="{% url "invoice" transaction.pk %}">{% translate "New invoice" %}</a>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
-    </div>

nummi/main/templates/main/table/snapshot.html

@@ -1,74 +1,56 @@
 {% load main_extras %}
 {% load i18n %}
-<div id="snapshots">
+<div id="snapshots"
-    <table class="full-width">
+     class="table {% if account %}col2-4{% else %}col2-5{% endif %}">
-        <colgroup>
+    <div class="header">
-            <col class="icon" span="2">
+        <strong class="diff center"><i class="fa fa-check"></i></strong>
-            <col class="date">
+        <strong class="attach center"><i class="fa fa-paperclip"></i></strong>
+        <strong class="date center">{% translate "Date" %}</strong>
         {% if not account %}
-                <col class="icon">
+            <strong class="account center">{% translate "Account" %}</strong>
-                <col class="desc">
         {% endif %}
-            <col class="value" span="3">
+        <strong class="value center">{% translate "Value" %}</strong>
-        </colgroup>
+        <strong class="diff center">{% translate "Difference" %}</strong>
-        <thead>
+        <strong class="diff center">{% translate "Transactions" %}</strong>
-            <th>
-                <i class="fa fa-check"></i>
-            </th>
-            <th>
-                <i class="fa fa-paperclip"></i>
-            </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>
-        </thead>
-        <tbody>
-            {% for snap in snapshots %}
-                <tr>
-                    <td class="c">
-                        <i class="fa fa-{% if snap.sum == snap.diff %}check green{% else %}xmark red{% endif %}"></i>
-                    </td>
-                    <td class="c">
-                        {% if snap.file %}
-                            <a href="{{ snap.file.url }}">
-                                <i class="fa fa-paperclip"></i>
-                            </a>
-                        {% endif %}
-                    </td>
-                    <th class="date" scope="row">
-                        <a href="{% url "snapshot" pk=snap.id %}">{{ snap.date|date:"Y-m-d" }}</a>
-                    </th>
-                    {% if not account %}
-                        <td class="r">
-                            <i class="fa fa-{{ snap.account.icon }}"></i>
-                        </td>
-                        <td>
-                            <a href="{% url "account" pk=snap.account.id %}">{{ snap.account }}</a>
-                        </td>
-                        <td class="value">{{ snap.value|value }}</td>
-                        <td class="value">{{ snap.diff|pmvalue }}</td>
-                        <td class="value">{{ snap.sum|pmvalue }}</td>
-                    {% endif %}
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
     </div>
-{% comment %}
-<div id="snapshots" class="table {% if account %}col2-4{% else %}col2-5{% endif %}">
     {% if new_snapshot_url %}
         <div class="full-line">
             <a href="{{ new_snapshot_url }}">{% translate "New statement" %}</a>
         </div>
     {% endif %}
+    {% for snap in snapshots %}
+        <div class="snapshot">
+            <span class="valid center">
+                {% if snap.sum == snap.diff %}
+                    <i class="fa fa-check green"></i>
+                {% else %}
+                    <i class="fa fa-xmark red"></i>
+                {% endif %}
+            </span>
+            <span class="attach center">
+                {% if snap.file %}
+                    <a href="{{ snap.file.url }}">
+                        <i class="fa fa-paperclip"></i>
+                    </a>
+                {% endif %}
+            </span>
+            <span class="date num center">
+                <a href="{% url 'snapshot' pk=snap.id %}">{{ snap.date|date:"Y-m-d" }}</a>
+            </span>
+            {% if not account %}
+                <span class="account text center">
+                    <i class="fa fa-{{ snap.account.icon }}"></i>
+                    <a href="{% url 'account' pk=snap.account.id %}">{{ snap.account }}</a>
+                </span>
+            {% endif %}
+            <span class="value num right">{{ snap.value|value }}</span>
+            <span class="diff num right">{{ snap.diff|pmvalue }}</span>
+            <span class="sum num right">{{ snap.sum|pmvalue }}</span>
+        </div>
+    {% endfor %}
     {% if snapshots_url %}
         <div class="full-line">
             <a href="{{ snapshots_url }}">{% translate "View all statements" %}</a>
         </div>
     {% endif %}
 </div>
-{% endcomment %}

nummi/main/templates/main/table/transaction.html

@@ -1,21 +1,17 @@
 {% load main_extras %}
 {% load i18n %}
 <div id="transactions">
-    <table class="full-width">
+    <table>
         <colgroup>
-            <col class="icon">
+            <col class="icon c">
             <col class="date">
             <col class="desc">
             <col class="value">
             <col class="desc">
-            {% if not category %}
             <col class="icon">
             <col class="desc">
-            {% endif %}
-            {% if not account %}
             <col class="icon">
             <col class="desc">
-            {% endif %}
         </colgroup>
         <thead>
             <th>
@@ -54,7 +50,7 @@
                                 <i class="fa fa-{{ trans.category.icon }}"></i>
                             </td>
                             <td>
-                                <a href="{% url "category" pk=trans.category.id %}">{{ trans.category }}</a>
+                                <a href="{% url 'category' pk=trans.category.id %}">{{ trans.category }}</a>
                             </td>
                         {% else %}
                             <td class="c" colspan="2">–</td>
@@ -66,7 +62,7 @@
                         <i class="fa fa-{{ trans.account.icon }}"></i>
                     </td>
                     <td>
-                        <a href="{% url "account" pk=trans.account.id %}">{{ trans.account }}</a>
+                        <a href="{% url 'account' pk=trans.account.id %}">{{ trans.account }}</a>
                     </td>
                 {% endif %}
             </tr>

nummi/main/templates/main/transaction_form.html

@@ -22,6 +22,23 @@
     {% endspaceless %}
     {% if not form.instance.adding %}
         <h2>{% translate "Invoices" %}</h2>
-        {% include "main/table/invoice.html" %}
+        <div id="invoices" class="table col1-1-1">
+            <div class="header">
+                <strong class="attach center"><i class="fa fa-file"></i></strong>
+                <strong class="name">{% translate "Name" %}</strong>
+                <strong class="attach right"><i class="fa fa-trash-can"></i></strong>
+            </div>
+            {% for inv in transaction.invoices %}
+                <div class="invoice">
+                    <a href="{{ inv.file.url }}" class="center"><i class="fa-regular fa-file"></i></a>
+                    <a href="{{ inv.get_absolute_url }}">{{ inv.name }}</a>
+                    <a href="{{ inv.get_delete_url }}" class="right">{% translate "Delete" %}</a>
+                </div>
+            {% endfor %}
+            <div class="invoice new">
+                <span class="center"><i class="fa fa-file-circle-plus"></i></span>
+                <a href="{% url "invoice" transaction.pk %}">{% translate "New invoice" %}</a>
+            </div>
+        </div>
     {% endif %}
 {% endblock %}