Use html tables, update design

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

@@ -1,31 +1,4 @@
-.plot table {
+col.bar {width: auto}
-	border-collapse: collapse;
-	width: 100%;
-	table-layout: auto;
-}
-.plot thead {
-	background: var(--bg-01);
-}
-.plot col.desc, .plot col.value {width: 8rem}
-.plot col.icon {width: 1ch}
-.plot tr {
-	padding-bottom: .5rem;
-	border: .1rem solid var(--gray);
-}
-.plot th {text-align: left}
-.plot th.r {text-align: right}
-.plot th.l {text-align: left}
-.plot td.c {text-align: center}
-
-.plot td, .plot th, .plot td.bar div {
-	position: relative;
-	height: 2rem;
-	line-height: 2rem;
-	white-space: nowrap;
-}
-.plot td, .plot th {
-	padding: .5rem var(--gap);
-}
 
 .plot td.bar {
 	position: relative;
@@ -33,17 +6,8 @@
 }
 .plot td.bar div {
 	position: absolute;
-	top: .5rem;
+	height: .5rem;
-}
+	top: 0;
-.plot td.m {
-	text-align: right;
-}
-.plot tbody th {
-	font-feature-settings: var(--num);
-}
-.plot td.value {
-	font-feature-settings: var(--num);
-	text-align: right;
 }
 
 .plot td.bar div:not(.tot) {

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

@@ -1,60 +1,26 @@
-.table {
+table {
-	display: grid;
+	border-collapse: collapse;
-	margin: 2em 0;
+	width: 100%;
-	border-radius: var(--radius);
-	overflow: hidden;
-	border-bottom: var(--border) solid var(--theme);
 }
-.table.col2 {grid-template-columns: repeat(2, auto)}
+thead {
-.table.col3 {grid-template-columns: repeat(3, auto)}
+	background: var(--bg-01);
-.table.col4 {grid-template-columns: repeat(4, auto)}
-.table.col5 {grid-template-columns: repeat(5, auto)}
-.table.col6 {grid-template-columns: repeat(6, auto)}
-.table.col1-1 {grid-template-columns: min-content auto}
-.table.col1-1-1 {grid-template-columns: min-content auto min-content}
-.table.col2-4 {grid-template-columns: repeat(2, min-content) repeat(4, auto)}
-.table.col1-5 {grid-template-columns: min-content repeat(5, auto)}
-.table.col2-5 {grid-template-columns: repeat(2, min-content) repeat(5, auto)}
-.table.col1-6 {grid-template-columns: min-content repeat(6, auto)}
-.table.col1-7 {grid-template-columns: min-content repeat(7, auto)}
-
-.table > div {
-	display: contents;
 }
-
+col {width: 8rem}
-.table > div > * {
+col.icon {width: 1ch}
-	padding: 1em;
+tr {
+	border: .1rem solid var(--gray);
+	height: 2rem;
+	line-height: 2rem;
+}
+td, th {
+	padding: 0 var(--gap);
+	position: relative;
 	white-space: nowrap;
-}
-.table > div:nth-child(odd) > * {background: var(--bg-01)}
-.table > div:nth-child(even) > * {background: var(--bg)}
-
-.table > div.header > * {
-	background: var(--theme);
-}
-
-.table > div > .center {
-	text-align: center;
-}
-.table > div > .right {
-	text-align: right;
-}
-.table > div > .num {
-	font-feature-settings: var(--num);
-}
-.table > div > span.value {
-	filter: brightness(95%);
-	font-weight: 600;
-}
-
-.table > div > span.text {
-	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.table > div.full-line > * {
+.date, .value {
-	grid-column: 1 / -1;
+	font-feature-settings: var(--num);
-	text-align: center;
-}
-.table > .invoice.new > a {
-	grid-column: 2 / -1;
 }
+.l {text-align: left}
+.r, .value {text-align: right}
+.c, .date {text-align: center}

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

@@ -12,8 +12,8 @@
         <thead>
             <tr>
                 <th scope="col" colspan="2">{% translate "Category" %}</th>
-                <th class="l" scope="col" colspan="2">{% translate "Expenses" %}</th>
+                <th scope="col" colspan="2">{% translate "Expenses" %}</th>
-                <th class="r" scope="col" colspan="2">{% translate "Income" %}</th>
+                <th scope="col" colspan="2">{% translate "Income" %}</th>
             </tr>
         </thead>
         <tbody>

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

@@ -11,15 +11,15 @@
         <thead>
             <tr>
                 <th scope="col">{% translate "Month" %}</th>
-                <th class="l" scope="col" colspan="2">{% translate "Expenses" %}</th>
+                <th scope="col" colspan="2">{% translate "Expenses" %}</th>
-                <th class="r" scope="col" colspan="2">{% translate "Income" %}</th>
+                <th scope="col" colspan="2">{% translate "Income" %}</th>
             </tr>
         </thead>
         <tbody>
             {% spaceless %}
                 {% for date in history.data %}
                     <tr>
-                        <th scope="row">{{ date.month|date:"Y-m" }}</th>
+                        <th class="date" scope="row">{{ date.month|date:"Y-m" }}</th>
                         <td class="value">{{ date.sum_m|pmrvalue }}</td>
                         <td class="bar m">
                             <div style="width: {% widthratio date.sum_m history.max -100 %}%"></div>

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

@@ -1,21 +1,77 @@
 {% load main_extras %}
 {% load i18n %}
-<div id="transactions"
+<div id="transactions">
-     class="table col1-{% if account or category %}6{% else %}7{% endif %}">
+    <table>
-    <div class="header">
+        <colgroup>
-        <strong class="attach center"><i class="fa fa-paperclip"></i></strong>
+            <col class="icon c">
-        <strong class="date center">{% translate "Date" %}</strong>
+            <col class="date">
-        <strong class="name">{% translate "Name" %}</strong>
+            <col class="desc">
-        <strong class="value center">{% translate "Value" %}</strong>
+            <col class="value">
-        <strong class="trader center">{% translate "Trader" %}</strong>
+            <col class="desc">
+            <col class="icon">
+            <col class="desc">
+            <col class="icon">
+            <col class="desc">
+        </colgroup>
+        <thead>
+            <th>
+                <i class="fa fa-paperclip"></i>
+            </th>
+            <th>{% translate "Date" %}</th>
+            <th>{% translate "Name" %}</th>
+            <th>{% translate "Value" %}</th>
+            <th>{% translate "Trader" %}</th>
             {% if not category %}
-            <strong class="category center">{% translate "Category" %}</strong>
+                <th colspan="2">{% translate "Category" %}</th>
             {% endif %}
             {% if not account %}
-            <strong class="account center">{% translate "Account" %}</strong>
+                <th colspan="2">{% translate "Account" %}</th>
             {% endif %}
-        <strong class="description">{% translate "Description" %}</strong>
+        </thead>
+        <tbody>
+            {% for trans in transactions %}
+                <tr>
+                    <td class="c">
+                        {% for invoice in trans.invoices %}
+                            <a href="{{ invoice.file.url }}">
+                                <i class="fa fa-paperclip"></i>
+                            </a>
+                        {% endfor %}
+                    </td>
+                    <td class="date">{{ trans.date|date:"Y-m-d" }}</td>
+                    <th scope="row" class="l">
+                        <a href="{% url "transaction" pk=trans.id %}">{{ trans.name }}</a>
+                    </th>
+                    <td class="value">{{ trans.value|pmvalue }}</td>
+                    <td>{{ trans.trader|default_if_none:"–" }}</td>
+                    {% if not category %}
+                        {% if trans.category %}
+                            <td class="r">
+                                <i class="fa fa-{{ trans.category.icon }}"></i>
+                            </td>
+                            <td>
+                                <a href="{% url 'category' pk=trans.category.id %}">{{ trans.category }}</a>
+                            </td>
+                        {% else %}
+                            <td class="c" colspan="2">–</td>
+                        {% endif %}
+                    </td>
+                {% endif %}
+                {% if not account %}
+                    <td class="r">
+                        <i class="fa fa-{{ trans.account.icon }}"></i>
+                    </td>
+                    <td>
+                        <a href="{% url 'account' pk=trans.account.id %}">{{ trans.account }}</a>
+                    </td>
+                {% endif %}
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
 </div>
+{% comment %}
+<div id="transactions" class="table col1-{% if account or category %}6{% else %}7{% endif %}">
     {% if new_transaction_url %}
         <div class="full-line">
             <a href="{{ new_transaction_url }}">{% translate "New transaction" %}</a>
@@ -23,39 +79,6 @@
     {% endif %}
     {% for trans in transactions %}
         <div class="transaction">
-            <span class="attach center">
-                {% for invoice in trans.invoices %}
-                    {% spaceless %}
-                        <a href="{{ invoice.file.url }}">
-                            <i class="fa fa-paperclip"></i>
-                        </a>
-                    {% endspaceless %}
-                {% endfor %}
-            </span>
-            <span class="date num center">{{ trans.date|date:"Y-m-d" }}</span>
-            <span class="name text"><a href="{% url 'transaction' pk=trans.id %}">{{ trans.name }}</a></span>
-            <span class="value num right">{{ trans.value|pmvalue }}</span>
-            <span class="trader text center">{{ trans.trader|default_if_none:"–" }}</span>
-            {% if not category %}
-                <span class="category text center">
-                    {% if trans.category %}
-                        <i class="fa fa-{{ trans.category.icon }}"></i>
-                        <a href="{% url 'category' pk=trans.category.id %}">{{ trans.category }}</a>
-                    {% else %}
-                        –
-                    {% endif %}
-                </span>
-            {% endif %}
-            {% if not account %}
-                <span class="account text center">
-                    {% if trans.account %}
-                        <i class="fa fa-{{ trans.account.icon }}"></i>
-                        <a href="{% url 'account' pk=trans.account.id %}">{{ trans.account }}</a>
-                    {% else %}
-                        –
-                    {% endif %}
-                </span>
-            {% endif %}
             <span class="description text">{{ trans.description }}</span>
         </div>
     {% endfor %}
@@ -65,3 +88,4 @@
         </div>
     {% endif %}
 </div>
+{% endcomment %}