Add form css

nummi/main/models.py

@@ -48,7 +48,7 @@ class Transaction(models.Model):
 class TransactionForm(ModelForm):
     class Meta:
         model = Transaction
-        fields = ["name", "description", "value", "date", "category"]
+        fields = ["date", "name", "value", "trader", "category", "description"]
 
 
 class Invoice(models.Model):

nummi/main/static/css/form.css

@@ -0,0 +1,21 @@
+form {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-gap: var(--gap);
+	margin: var(--gap) 0;
+}
+
+form label,
+form input,
+form select {
+	line-height: 2em;
+}
+
+form > .buttons {
+	grid-column: 1 / -1;
+	text-align: right;
+}
+form > .buttons input {
+	padding: 0 1em;
+	margin-left: 1em;
+}

nummi/main/static/css/main.css

@@ -20,6 +20,8 @@ body {
 	--bg-01: #dedede;
 
 	--text-link: #0066ff;
+
+	--gap: 1em;
 }
 
 h1 {

nummi/main/templates/main/index.html

@@ -43,11 +43,9 @@
 {% if categories %}
 	<h2>Catégories</h2>
 	<div id="categories">
-		{% spaceless %}
 		{% for cat in categories %}
 		<a href="{% url 'category' cat.id %}">{{ cat }}</a>
 		{% endfor %}
-		{% endspaceless %}
 	</div>
 {% endif %}
 

nummi/main/templates/main/transaction.html

@@ -1,24 +1,47 @@
 {% extends "main/base.html" %}
+{% load static %}
+
+{% block link %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'css/form.css' %}" type="text/css" />
+{% endblock %}
 
 {% block body %}
 <h1>{{ transaction }}</h1>
 
-<form action="{% url 'update_transaction' transaction.id %}" method="post">
+{% spaceless %}
+<form id="transaction" action="{% url 'update_transaction' transaction.id %}" method="post">
 	{% csrf_token %}
-	{{ form.as_p }}
-	<input type="submit" />
+	{% for field in form %}
+	{{ field.errors }}
+	<label for="{{ field.id_for_label }}">{{ field.label }}</label>
+	{{ field }}
+	{% endfor %}
+	<div class="buttons">
+		<input type="reset" />
+		<input type="submit" value="Save Transaction" />
+	</div>
 </form>
+{% endspaceless %}
 
-<form action="{% url 'add_invoice' transaction.id %}" method="post" enctype="multipart/form-data">
-	{% csrf_token %}
-	<ul>
+<h2>Invoices</h2>
+<div id="invoices">
 	{% for inv in invoices %}
-		<li>
+		<div class="invoice">
 			<a href="{% url 'invoice' inv.id %}">{{ inv.name }}</a>
 			<a href="{% url 'del_invoice' transaction.id inv.id %}">x</a>
-		</li>
+		</div>
 	{% endfor %}
-		<li>{{ invoice_form.as_p }}<input type="submit" /></li>
-	</ul>
+</div>
+
+<h3>Add Invoice</h3>
+<form action="{% url 'add_invoice' transaction.id %}" method="post" enctype="multipart/form-data">
+	{% csrf_token %}
+	{% for field in invoice_form %}
+	{{ field.errors }}
+	<label for="{{ field.id_for_label }}">{{field.label }}</label>
+	{{ field }}
+	{% endfor %}
+	<div class="buttons"><input type="submit" value="Add Invoice" /></div>
 </form>
 {% endblock %}