From 30db14669fbd6f44302c356771a6477ba94236ce Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Fri, 20 May 2022 21:56:22 +0200
Subject: [PATCH] Add form css

---
 nummi/main/models.py                       |  2 +-
 nummi/main/static/css/form.css             | 21 ++++++++++
 nummi/main/static/css/main.css             |  2 +
 nummi/main/templates/main/index.html       |  2 -
 nummi/main/templates/main/transaction.html | 47 ++++++++++++++++------
 5 files changed, 59 insertions(+), 15 deletions(-)
 create mode 100644 nummi/main/static/css/form.css

diff --git a/nummi/main/models.py b/nummi/main/models.py
index 3d7fd3a..f1eea70 100644
--- a/nummi/main/models.py
+++ b/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):
diff --git a/nummi/main/static/css/form.css b/nummi/main/static/css/form.css
new file mode 100644
index 0000000..a11dfed
--- /dev/null
+++ b/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;
+}
diff --git a/nummi/main/static/css/main.css b/nummi/main/static/css/main.css
index 01b691b..732bdd8 100644
--- a/nummi/main/static/css/main.css
+++ b/nummi/main/static/css/main.css
@@ -20,6 +20,8 @@ body {
 	--bg-01: #dedede;
 
 	--text-link: #0066ff;
+
+	--gap: 1em;
 }
 
 h1 {
diff --git a/nummi/main/templates/main/index.html b/nummi/main/templates/main/index.html
index 3c7b3ef..00ee731 100644
--- a/nummi/main/templates/main/index.html
+++ b/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 %}
 
diff --git a/nummi/main/templates/main/transaction.html b/nummi/main/templates/main/transaction.html
index 8527b27..0441975 100644
--- a/nummi/main/templates/main/transaction.html
+++ b/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>
-		{% for inv in invoices %}
-		<li>
+<h2>Invoices</h2>
+<div id="invoices">
+	{% for inv in invoices %}
+		<div class="invoice">
 			<a href="{% url 'invoice' inv.id %}">{{ inv.name }}</a>
 			<a href="{% url 'del_invoice' transaction.id inv.id %}">x</a>
-		</li>
-		{% endfor %}
-		<li>{{ invoice_form.as_p }}<input type="submit" /></li>
-	</ul>
+		</div>
+	{% endfor %}
+</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 %}