Improve invoice list

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

@@ -261,7 +261,7 @@ footer {
     line-height: 1.5em;
   }
 
-  a &,
+  a:not(.i) &,
   .wi &,
   h2 & {
     &:first-child::after {
@@ -384,7 +384,8 @@ ul.messages {
   }
 }
 
-ul.statements {
+ul.statements,
+ul.invoices {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
   grid-auto-rows: 1fr;
@@ -395,10 +396,20 @@ ul.statements {
   li {
     display: grid;
     grid-row-gap: var(--gap);
-    padding: 0.75rem;
+    padding: var(--gap);
     border: var(--gray) 1px solid;
     text-align: right;
+    align-items: center;
 
+    &.new,
+    &.more {
+      border-style: dashed;
+    }
+  }
+}
+
+ul.statements {
+  li {
     > * {
       display: grid;
       align-items: center;
@@ -420,11 +431,6 @@ ul.statements {
         white-space: nowrap;
       }
     }
-
-    &.new,
-    &.more {
-      border-style: dashed;
-    }
   }
 }
 
@@ -449,7 +455,7 @@ ul.statements {
   > span:nth-child(3) {
     display: grid;
     border: var(--gray) 1px solid;
-    padding: 0.75rem;
+    padding: var(--gap);
 
     > .date {
       text-align: right;

nummi/statement/templates/statement/statement_table.html

@@ -11,7 +11,7 @@
         {% 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>{{ sta.date|date:"M y" }}</span></a>
                 <span class="value"><span>{{ sta.value|value }}</span>
                 <span>{{ sta.diff|pmvalue }}</span></span>
                 {% if not account %}

nummi/transaction/templates/transaction/invoice_table.html

@@ -1,38 +1,19 @@
 {% load main_extras %}
 {% load i18n %}
 <div id="invoices">
-    <table>
+    <ul class="invoices">
-        <colgroup>
-            <col class="desc" span="3">
-        </colgroup>
-        <thead>
-            <tr>
-                <th>{% translate "Invoice" %}</th>
-                <th class="wi">{{ "file-edit"|remix }}</th>
-            </tr>
-        </thead>
-        <tbody>
         {% for invoice in transaction.invoices %}
-                <tr>
+            <li>
-                    <th scope="row" class="l">
+                <a href="{{ invoice.file.url }}">{{ "file"|remix }}{{ invoice.name }} [{{ invoice.file|extension }}]</a>
-                        <a href="{{ invoice.file.url }}">{{ invoice.name }} [{{ invoice.file|extension }}]</a>
+                <a class="i"
-                    </th>
+                   href="{{ invoice.get_absolute_url }}"
-                    <td>
+                   title="{% translate "Edit" %}">{{ "file-edit"|remix }}</a>
-                        <a href="{{ invoice.get_absolute_url }}" title="{% translate "Edit" %}">{{ "file-edit"|remix }}</a>
+            </li>
-                    </td>
-                </tr>
-            {% empty %}
-                <tr>
-                    <td class="empty" colspan="2">{% translate "No invoice" %}</td>
-                </tr>
         {% endfor %}
-        </tbody>
+        <li class="new">
-        <tfoot>
+            <span>
-            <tr class="new">
+                <a href="{% url "new_invoice" transaction.pk %}">{{ "file-add"|remix }}{% translate "New invoice" %}</a>
-                <td colspan="3">
+            </span>
-                    <a href="{% url "new_invoice" transaction.pk %}">{% translate "Create invoice" %}</a>
+        </li>
-                </td>
+    </ul>
-            </tr>
-        </tfoot>
-    </table>
 </div>

nummi/transaction/templates/transaction/transaction_table.html

@@ -39,7 +39,7 @@
             {% for trans in transactions %}
                 <tr>
                     <td class="c">
-                        {% for invoice in trans.invoices %}<a href="{{ invoice.file.url }}">{{ "attachment"|remix }}</a>{% endfor %}
+                        {% for invoice in trans.invoices %}<a class="i" href="{{ invoice.file.url }}">{{ "attachment"|remix }}</a>{% endfor %}
                     </td>
                     <td class="date">
                         <time datetime="{{ trans.date|date:"Y-m-d" }}">