recettes/templates/index.html

{% extends 'base.html' %}
{% load thumbnail %}

{% block title %}Recherche de recettes{% endblock %}

{% block extrahead %}
<style>
ul { list-style-type: none; padding: 0; }
a { text-decoration: none; }
input#id_text { padding: 10px 0; }
form#search-form p, form#search-form ul {
  display: inline-block;
  margin-right: 1em;
  vertical-align: top;
}

ul.results { display: flex; flex-wrap: wrap; }
ul.results li {
  width: 15em;
  padding: 5px 0;
  margin: 1.5em;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 108%;
  font-weight: bold;
  font-family: sans-serif;
}
ul.results li:hover { background-color: #ddd; }
ul.results li img { width: 100%; }
</style>
{% endblock %}

{% block content %}
<h1>Recettes</h1>

<form id="search-form" method="POST">{% csrf_token %}
    {{ form.as_p }}
    <div><button type="submit">Rechercher</button></div>
</form>

{% if num_results is not None %}
<div class="results">{{ num_results }} résultat(s)</div>
{% endif %}
<ul class="results">
{% for recette in recettes %}
    <li>
        <a href="{{ recette.get_absolute_url }}">
            {{ recette.nom }}
            <img src="{{ recette.photo|thumbnail_url:'thumbnail' }}">
            <img src="{{ recette.photo.url }}">
        </a>
    </li>
{% endfor %}
</ul>
{% endblock %}