KilianBrd/BookNest
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

- Modification du design du front pour les résultats de recherche.

Browse Source
This commit is contained in:
Fabienmcll
2025-01-29 14:43:16 +01:00
parent 271c7c67e9
commit 74288b17a9
1 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
templates/apiSearch/index.html.twig
View File

@ -6,16 +6,48 @@
<div>
<h1>Recherche de livre pour {{ query }}</h1>
<div class="w-1/2 py-2 flex flex-col justify-center mt-5 mx-auto">
<h1 class="text-2xl font-bold">Recherche de livre pour : {{ query }}</h1>
</div>
{% for book in datas.items %}
<div class="flex justify-center">
<div class="border rounded-xl w-1/2 py-2 flex flex-col justify-center mt-5">
<h1 class="font-bold p-2 text-2xl ">{{ book.volumeInfo.title }}</h1>
{% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
<img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2" style="width: 20%" height="20px">
<div class="relative flex rounded-xl border bg-white shadow-lg hover:shadow-xl transition-shadow duration-300 w-1/2 mx-auto py-2 mt-5">
<div class="flex flex-col justify-start">
<div class="flex flex-col p-2 text-2xl">
<h1 class="font-bold">{{ book.volumeInfo.title }}</h1>
{% if book.volumeInfo.authors is defined %}
<span class="text-lg">{{ book.volumeInfo.authors | join(", ") }}</span>
{% endif %}
</div>
<div class="flex">
<div class="flex flex-row w-1/4">
{% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
<img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2">
{% endif %}
</div>
<div class="w-9/12">
{% if book.volumeInfo.publisher is defined %}
<p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
<p class="p-2 italic font-bold">Date de publication : <span class="font-normal">{{ book.volumeInfo.publishedDate }}</span></p>
{% if book.volumeInfo.categories is defined %}
{% for categorie in book.volumeInfo.categories %}
<p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
{% endfor %}
{% endif %}
<p class="p-2 italic font-bold">Nombres de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
<p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.searchInfo.textSnippet }}</span></p>
{% endif %}
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="absolute top-2 right-2 w-6 h-6 cursor-pointer">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
</svg>
</div>
</div>
</div>
</div>