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
|
||||
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)
|
||||
description = models.TextField()
|
||||
value = models.DecimalField(max_digits=12, decimal_places=2)
|
||||
date = models.DateField()
|
||||
name = models.CharField(max_length=256, default="Transaction")
|
||||
description = models.TextField(null=True, blank=True)
|
||||
value = models.DecimalField(max_digits=12, decimal_places=2, default=0)
|
||||
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
|
||||
)
|
||||
|
|
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 {
|
||||
background: #bebebe;
|
||||
@import "https://rsms.me/inter/inter.css";
|
||||
|
||||
*, *::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" %}
|
||||
{% 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">
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Nom</th>
|
||||
<th>Valeur</th>
|
||||
<th>Catégorie</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
{% for trans in transactions %}
|
||||
<tr>
|
||||
<td class="date">{{ trans.date|date:"c" }}</td>
|
||||
<td class="name"><a href="{% url 'transaction' trans.id %}">{{ trans.name }}</a></td>
|
||||
<td class="value">{{ trans.value|floatformat:"2g" }} €</td>
|
||||
<td class="category">{{ trans.category|default_if_none:"–" }}</td>
|
||||
<td class="description">{{ trans.description }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
<div id="transactions">
|
||||
<div class="header">
|
||||
<strong class="date">Date</strong>
|
||||
<strong class="name">Nom</strong>
|
||||
<strong class="value">Valeur</strong>
|
||||
<strong class="trader">Commerçant</strong>
|
||||
<strong class="category">Catégorie</strong>
|
||||
<strong class="description">Description</strong>
|
||||
</div>
|
||||
{% for trans in transactions %}
|
||||
<div class="transaction {% cycle 'w' 'g' %}">
|
||||
<span class="date">{{ trans.date|date:"Y-m-d" }}</span>
|
||||
<span class="name"><a href="{% url 'transaction' trans.id %}">{{ trans.name }}</a></span>
|
||||
<span class="value">{{ trans.value|floatformat:"2g" }} €</span>
|
||||
<span class="trader">{{ trans.trader|default_if_none:"–" }}</span>
|
||||
<span class="category">{% if trans.category %}{{ trans.category.name }}{% else %}–{% endif %}</span>
|
||||
<span class="description">{{ trans.description }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if categories %}
|
||||
|
|
Loading…
Reference in a new issue