Template + css for home table

This commit is contained in:
Edgar P. Burkhart 2022-05-20 18:27:55 +02:00
parent 9e7563e38e
commit 6a763a836d
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
5 changed files with 160 additions and 25 deletions

View file

@ -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),
),
]

View file

@ -1,3 +1,4 @@
from datetime import date
import uuid import uuid
from django.db import models from django.db import models
from django.forms import ModelForm from django.forms import ModelForm
@ -27,10 +28,11 @@ class Category(models.Model):
class Transaction(models.Model): class Transaction(models.Model):
id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False) 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 = models.ForeignKey(
Category, on_delete=models.SET_NULL, blank=True, null=True Category, on_delete=models.SET_NULL, blank=True, null=True
) )

View file

@ -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;
}

View file

@ -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;
} }

View file

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