From 3a31eec326421ec53856c0fbc615393cd478148b Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Sun, 25 Dec 2022 16:10:39 +0100
Subject: [PATCH] Update invoice list layout

---
 nummi/main/static/main/css/main.css        |  6 +++
 nummi/main/static/main/css/table.css       |  2 +
 nummi/main/templates/main/transaction.html | 51 ++++++++++++++--------
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/nummi/main/static/main/css/main.css b/nummi/main/static/main/css/main.css
index 9bf03dc..ab488e9 100644
--- a/nummi/main/static/main/css/main.css
+++ b/nummi/main/static/main/css/main.css
@@ -62,3 +62,9 @@ a:hover {
 
 .red {color: var(--red)}
 .green {color: var(--text-green)}
+
+.split {
+	display: grid;
+	grid-template-columns: repeat(2, auto);
+	grid-gap: var(--gap);
+}
diff --git a/nummi/main/static/main/css/table.css b/nummi/main/static/main/css/table.css
index f60c5a4..20f3dca 100644
--- a/nummi/main/static/main/css/table.css
+++ b/nummi/main/static/main/css/table.css
@@ -11,6 +11,8 @@
 .table.col4 {grid-template-columns: repeat(4, auto)}
 .table.col5 {grid-template-columns: repeat(5, auto)}
 .table.col6 {grid-template-columns: repeat(6, auto)}
+.table.col1-1 {grid-template-columns: min-content auto}
+.table.col1-1-1 {grid-template-columns: min-content auto min-content}
 .table.col1-5 {grid-template-columns: min-content repeat(5, auto)}
 .table.col1-6 {grid-template-columns: min-content repeat(6, auto)}
 
diff --git a/nummi/main/templates/main/transaction.html b/nummi/main/templates/main/transaction.html
index 07ca350..0009651 100644
--- a/nummi/main/templates/main/transaction.html
+++ b/nummi/main/templates/main/transaction.html
@@ -6,6 +6,7 @@
 {% block link %}
 {{ block.super }}
 <link rel="stylesheet" href="{% static 'main/css/form.css' %}" type="text/css" />
+<link rel="stylesheet" href="{% static 'main/css/table.css' %}" type="text/css" />
 {% endblock %}
 
 {% block body %}
@@ -20,24 +21,38 @@
 </form>
 {% endspaceless %}
 
-<h2>{% translate "Invoices" %}</h2>
-<div id="invoices">
-	{% for inv in transaction.invoices %}
-		<div class="invoice">
-			<a href="{{ inv.file.url }}">{{ inv.name }}</a>
-			<a href="{% url 'del_invoice' transaction.id inv.id %}"
-				 onclick="return confirm('{% translate "Delete" %} <{{ inv.name }}> ?')">
-				<i class="fa-regular fa-trash-can"></i>
-			</a>
+<div class="split">
+	{% if transaction.has_invoice %}
+	<div>
+		<h2>{% translate "Invoices" %}</h2>
+		<div id="invoices" class="table col1-1-1">
+			<div class="header">
+				<strong class="attach center"><i class="fa fa-file"></i></strong>
+				<strong class="name">{% translate "Name" %}</strong>
+				<strong class="attach center"><i class="fa fa-trash-can"></i></strong>
+			</div>
+			{% for inv in transaction.invoices %}
+				<div class="invoice">
+					<a href="{{ inv.file.url }}"><i class="fa-regular fa-file"></i></a>
+					<a href="{{ inv.file.url }}">{{ inv.name }}</a>
+					<a href="{% url 'del_invoice' transaction.id inv.id %}"
+						 onclick="return confirm('{% translate "Delete" %} <{{ inv.name }}> ?')">
+						<i class="fa-regular fa-trash-can"></i>
+					</a>
+				</div>
+			{% endfor %}
 		</div>
-	{% endfor %}
+	</div>
+	{% endif %}
+	
+	<div>
+		<h3>{% translate "Add invoice" %}</h3>
+		<form action="{% url 'transaction' transaction.id %}" method="post" enctype="multipart/form-data">
+			{% csrf_token %}
+			<input type="hidden" name="form" value="invoice" />
+			{{ invoice_form }}
+			<div class="buttons"><input class="btn" type="submit" value="{% translate "Add" %}" /></div>
+		</form>
+	</div>
 </div>
-
-<h3>{% translate "Add invoice" %}</h3>
-<form action="{% url 'transaction' transaction.id %}" method="post" enctype="multipart/form-data">
-	{% csrf_token %}
-	<input type="hidden" name="form" value="invoice" />
-	{{ invoice_form }}
-	<div class="buttons"><input class="btn" type="submit" value="{% translate "Add" %}" /></div>
-</form>
 {% endblock %}