Template + css for home table
This commit is contained in:
parent
9e7563e38e
commit
6a763a836d
5 changed files with 160 additions and 25 deletions
|
@ -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),
|
||||||
|
),
|
||||||
|
]
|
|
@ -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
|
||||||
)
|
)
|
||||||
|
|
44
nummi/main/static/css/index.css
Normal file
44
nummi/main/static/css/index.css
Normal 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;
|
||||||
|
}
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in a new issue