bootstrappified transaction list

cash/templates/cash/transaction_list.html

@@ -8,21 +8,30 @@
 
 {% if transaction_list %}
 
+<div class="visible-xs">
 {% if detailed %}
 <a href="{% url 'transactions' transaction_list.number %}" class="btn btn-default">{% trans "less detailed" %}</a>
 {% else %}
 <a href="{% url 'transactions_detailed' transaction_list.number %}" class="btn btn-default">{% trans "more detailed" %}</a>
 {% endif %}
 <br/>
+</div>
 
-<table>
+<table class="table table-striped">
 <thead>
-	<tr><th>{% trans "Date" %}</th><th>{% trans "Subject" %}</th><th style="text-align: right;">{% trans "amount" context "money" %}</th></tr>
+	<tr>
+		<th>{% trans "Date" %}</th>
+		<th>{% trans "Subject" %}</th>
+		<th class="hidden-xs">{% trans "Description" %}</th>
+		<th style="text-align: right;">{% trans "amount" context "money" %}</th>
+	</tr>
 </thead>
 {% for t in transaction_list %}
 	<tr>
-		<td>{% if detailed %}{{ t.timestamp|date:'d.m.Y H:i:s' }}{% else %}{{ t.timestamp|date:'d.m.Y'}}{% endif %}</td>
-		<td>{% trans t.subject %}{% if detailed %}<br/><i>{% trans t.description %}</i>{% endif %}</td>
+		<td class="visible-xs">{{ t.timestamp|date:'d.m.y' }}</td>
+		<td class="hidden-xs">{{ t.timestamp|date:'DATE_FORMAT' }}, {{ t.timestamp|date:'H:i' }}</td>
+		<td>{% trans t.subject %}<span class="visible-xs">{% if detailed %}<br/>{% trans t.description %}{% endif %}</span></td>
+		<td class="hidden-xs">{% trans t.description %}</td>
 		<td style="text-align: right; color: {% if t.amount < 0 %}red{% else %}green{% endif %}">{{ t.amount|floatformat:2 }} &euro;</td>
 	</tr>
 {% endfor %}