Template + css for home table

nummi/main/templates/main/index.html

@@ -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 %}