Template + css for home table

nummi/main/migrations/0006_alter_category_options_transaction_trader_and_more.py

@@ -0,0 +1,67 @@
+# Generated by Django 4.0.4 on 2022-05-20 16:06
+
+import datetime
+import django.core.validators
+from django.db import migrations, models
+import re
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("main", "0005_alter_category_full_name"),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name="category",
+            options={"ordering": ["full_name"]},
+        ),
+        migrations.AddField(
+            model_name="transaction",
+            name="trader",
+            field=models.CharField(blank=True, max_length=128, null=True),
+        ),
+        migrations.AlterField(
+            model_name="category",
+            name="name",
+            field=models.CharField(
+                max_length=64,
+                validators=[
+                    django.core.validators.RegexValidator(
+                        re.compile("^[-\\w]+\\Z"),
+                        "Enter a valid “slug” consisting of Unicode letters, numbers, underscores, or hyphens.",
+                        "invalid",
+                    )
+                ],
+            ),
+        ),
+        migrations.AlterField(
+            model_name="invoice",
+            name="file",
+            field=models.FileField(
+                upload_to="invoices/",
+                validators=[django.core.validators.FileExtensionValidator(["pdf"])],
+            ),
+        ),
+        migrations.AlterField(
+            model_name="transaction",
+            name="date",
+            field=models.DateField(default=datetime.date.today),
+        ),
+        migrations.AlterField(
+            model_name="transaction",
+            name="description",
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name="transaction",
+            name="name",
+            field=models.CharField(default="Transaction", max_length=256),
+        ),
+        migrations.AlterField(
+            model_name="transaction",
+            name="value",
+            field=models.DecimalField(decimal_places=2, default=0, max_digits=12),
+        ),
+    ]

nummi/main/models.py

@@ -1,3 +1,4 @@
+from datetime import date
 import uuid
 from django.db import models
 from django.forms import ModelForm
@@ -27,10 +28,11 @@ class Category(models.Model):
 
 class Transaction(models.Model):
     id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
-    name = models.CharField(max_length=256)
+    name = models.CharField(max_length=256, default="Transaction")
-    description = models.TextField()
+    description = models.TextField(null=True, blank=True)
-    value = models.DecimalField(max_digits=12, decimal_places=2)
+    value = models.DecimalField(max_digits=12, decimal_places=2, default=0)
-    date = models.DateField()
+    date = models.DateField(default=date.today)
+    trader = models.CharField(max_length=128, blank=True, null=True)
     category = models.ForeignKey(
         Category, on_delete=models.SET_NULL, blank=True, null=True
     )

nummi/main/static/css/index.css

@@ -0,0 +1,44 @@
+#transactions {
+	display: grid;
+	grid-template-columns: repeat(6, auto);
+	margin: 2em 0;
+	border-radius: 1em 0 1em 0;
+	overflow: hidden;
+	border-bottom: .5em solid var(--text);
+}
+
+#transactions > div {
+	display: contents;
+}
+
+#transactions > div > * {
+	padding: 1em;
+}
+#transactions > div.g> * {
+	background: var(--bg-01);
+}
+
+#transactions > div.header > * {
+	background: var(--bg-inv);
+	color: var(--text-inv);
+}
+
+#transactions > div > .date,
+#transactions > div > .category, 
+#transactions > div > .trader {
+	text-align: center;
+}
+#transactions > div > .value {
+	text-align: right;
+}
+#transactions > div > .value,
+#transactions > div > .date {
+	font-feature-settings: "tnum", "ss01";
+}
+
+#transactions > div > span.description,
+#transactions > div > span.name {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

nummi/main/static/css/main.css

@@ -1,3 +1,19 @@
-body {
+@import "https://rsms.me/inter/inter.css";
-	background: #bebebe;
+
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: "Inter var experimental", "Inter var", "Inter", sans-serif;
+}
+
+:root {
+	--bg: #ffffff;
+	--text: #000000de;
+
+	--bg-inv: #000000;
+	--text-inv: #ffffffde;
+
+	--bg-01: #dedede;
 }

nummi/main/templates/main/index.html

@@ -1,6 +1,10 @@
 {% extends "main/base.html" %}
+{% load static %}
 
-{% 
+{% block link %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'css/index.css' %}" type="text/css" />
+{% endblock %}
 
 {% block body %}
 <h1>Nummi</h1>
@@ -9,24 +13,26 @@
 <a href="{% url 'transaction' %}">Add transaction</a>
 
 {% if transactions %}
-	<table id="transactions">
+<div id="transactions">
-		<tr>
+	<div class="header">
-			<th>Date</th>
+		<strong class="date">Date</strong>
-			<th>Nom</th>
+		<strong class="name">Nom</strong>
-			<th>Valeur</th>
+		<strong class="value">Valeur</strong>
-			<th>Catégorie</th>
+		<strong class="trader">Commerçant</strong>
-			<th>Description</th>
+		<strong class="category">Catégorie</strong>
-		</tr>
+		<strong class="description">Description</strong>
-		{% for trans in transactions %}
+	</div>
-		<tr>
+	{% for trans in transactions %}
-			<td class="date">{{ trans.date|date:"c" }}</td>
+		<div class="transaction {% cycle 'w' 'g' %}">
-			<td class="name"><a href="{% url 'transaction' trans.id %}">{{ trans.name }}</a></td>
+			<span class="date">{{ trans.date|date:"Y-m-d" }}</span>
-			<td class="value">{{ trans.value|floatformat:"2g" }} €</td>
+			<span class="name"><a href="{% url 'transaction' trans.id %}">{{ trans.name }}</a></span>
-			<td class="category">{{ trans.category|default_if_none:"–" }}</td>
+			<span class="value">{{ trans.value|floatformat:"2g" }} €</span>
-			<td class="description">{{ trans.description }}</td>
+			<span class="trader">{{ trans.trader|default_if_none:"–" }}</span>
-		</tr>
+			<span class="category">{% if trans.category %}{{ trans.category.name }}{% else %}–{% endif %}</span>
-		{% endfor %}
+			<span class="description">{{ trans.description }}</span>
-	</table>
+		</div>
+	{% endfor %}
+</div>
 {% endif %}
 
 {% if categories %}