Add thumbnails on search results

templates/index.html

@@ -1,19 +1,34 @@
 {% extends 'base.html' %}
+{% load thumbnail %}
+
+{% block extrahead %}
+<style>
+ul.results { list-style-type: none; padding: 0; }
+ul.results li { margin: 0; padding: 2px; }
+ul.results li, ul.results li * { vertical-align: middle; }
+ul.results li:nth-child(odd) { background-color: #eee; }
+input#id_text { padding: 10px 0; }
+form#search-form p { display: inline-block; margin-right: 1em; }
+</style>
+{% endblock %}
 
 {% block content %}
 <h1>Recettes</h1>
 
-<form method="POST">{% csrf_token %}
+<form id="search-form" method="POST">{% csrf_token %}
     {{ form.as_p }}
-    <button>Rechercher</button>
+    <div><button>Rechercher</button></div>
 </form>
 
 {% if num_results is not None %}
 <div class="results">{{ num_results }} résultat(s)</div>
 {% endif %}
-<ul>
+<ul class="results">
 {% for recette in recettes %}
-    <li><a href="{{ recette.get_absolute_url }}">{{ recette.nom }}</a></li>
+    <li>
+        <a href="{{ recette.get_absolute_url }}">{{ recette.nom }}</a>
+        <img src="{{ recette.photo|thumbnail_url:'thumbnail' }}">
+    </li>
 {% endfor %}
 </ul>
 {% endblock %}