claudep/recettes
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Style results as cards

Browse source
This commit is contained in:
Claude Paroz 2021-07-03 21:09:00 +02:00
parent d7276ca9f0
commit 0327fdb8d8
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
templates/index.html
View file

@ -6,6 +6,7 @@
{% block extrahead %} {% block extrahead %}
<style> <style>
ul { list-style-type: none; padding: 0; } ul { list-style-type: none; padding: 0; }
a { text-decoration: none; }
input#id_text { padding: 10px 0; } input#id_text { padding: 10px 0; }
form#search-form p, form#search-form ul { form#search-form p, form#search-form ul {
display: inline-block; display: inline-block;
@ -13,9 +14,20 @@ form#search-form p, form#search-form ul {
vertical-align: top; vertical-align: top;
} }
ul.results li { margin: 0; padding: 2px; } ul.results { display: flex; flex-wrap: wrap; }
ul.results li, ul.results li * { vertical-align: middle; } ul.results li {
ul.results li:nth-child(odd) { background-color: #eee; } 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> </style>
{% endblock %} {% endblock %}
@ -33,8 +45,11 @@ ul.results li:nth-child(odd) { background-color: #eee; }
<ul class="results"> <ul class="results">
{% for recette in recettes %} {% for recette in recettes %}
<li> <li>
<a href="{{ recette.get_absolute_url }}">{{ recette.nom }}</a> <a href="{{ recette.get_absolute_url }}">
<img src="{{ recette.photo|thumbnail_url:'thumbnail' }}"> {{ recette.nom }}
<img src="{{ recette.photo|thumbnail_url:'thumbnail' }}">
<img src="{{ recette.photo.url }}">
</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>