Updat transaction list in category with table

nummi/main/templates/main/category.html

@@ -1,9 +1,11 @@
 {% extends "main/base.html" %}
 {% load static %}
+{% load main_extras %}
 
 {% 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 %}
@@ -23,15 +25,36 @@
 </form>
 
 {% if transactions %}
-<h2>Transactions ({{ transactions|length }})</h2>
-<ul>
-	{% for transaction in transactions %}
-	<li>
-		<a href="{% url 'transaction' transaction.id %}">
-			{{ transaction }}
-		</a>
-	</li>
-	{% endfor %}
-</ul>
+<h2>Transactions</h2>
+
+	<div id="transactions" class="table col6">
+		<div class="header">
+			<strong class="date center">Date</strong>
+			<strong class="name">Nom</strong>
+			<strong class="value center">Valeur</strong>
+			<strong class="trader center">Commerçant</strong>
+			<strong class="category center">Catégorie</strong>
+			<strong class="description">Description</strong>
+		</div>
+		{% for trans in transactions %}
+			<div class="transaction {% cycle 'w' 'g' %}">
+				<span class="date num center">{{ trans.date|date:"Y-m-d" }}</span>
+				<span class="name text"><a href="{% url 'transaction' trans.id %}">{{ trans.name }}</a></span>
+				<span class="value num right">{{ trans.value|floatformat:"2g"|pm }} €</span>
+				<span class="trader text center">{{ trans.trader|default_if_none:"–" }}</span>
+				<span class="category text center">
+					{% if trans.category %}
+					<i class="fa fa-{{ trans.category.icon }}"></i>
+					<a href="{% url 'category' trans.category.id %}">
+						{{ trans.category }}
+					</a>
+					{% else %}
+					–
+					{% endif %}
+				</span>
+				<span class="description text">{{ trans.description }}</span>
+			</div>
+		{% endfor %}
+	</div>
 {% endif %}
 {% endblock %}