95 lines
5.5 KiB
Twig
95 lines
5.5 KiB
Twig
{% block body %}
|
|
{% if currentView == 'poster' %}
|
|
{# Vue poster actuelle #}
|
|
<div
|
|
class="w-full p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4">
|
|
{% for manga in mangas %}
|
|
<div
|
|
class="bg-white overflow-hidden border border-gray-200 hover:shadow-2xl hover:border-gray-400 transition-all duration-300 flex flex-col">
|
|
<a href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}"
|
|
class="block relative w-full pb-[150%] overflow-hidden">
|
|
<img src="{{ manga.thumbnailUrl ?? 'https://placehold.co/150x220' }}"
|
|
alt="{{ manga.title }}"
|
|
class="absolute top-0 left-0 w-full h-full object-cover">
|
|
</a>
|
|
<div class="p-2 flex flex-col justify-between flex-grow">
|
|
<div>
|
|
<h3 class="text-sm font-semibold truncate">{{ manga.title }}</h3>
|
|
<p class="text-xs text-gray-500">{{ manga.publicationYear }}</p>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-1">Added: {{ manga.createdAt|date('M d, Y') }}</p>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="col-span-full text-center text-gray-500">Aucun manga trouvé.</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% elseif currentView == 'resume' %}
|
|
{# Vue résumé #}
|
|
<div class="w-full p-4 space-y-4">
|
|
{% for manga in mangas %}
|
|
<div
|
|
class="bg-white overflow-hidden border border-gray-200 hover:shadow-lg hover:border-gray-400 transition-all duration-300 flex">
|
|
<a class="flex flex-row" href="{{ path('app_manga_show', {'mangaSlug': manga.slug}) }}">
|
|
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}"
|
|
alt="{{ manga.title }}"
|
|
class="w-32 h-48 object-cover">
|
|
<div class="p-4 flex flex-col justify-between flex-grow">
|
|
<div>
|
|
<h3 class="text-lg font-semibold">{{ manga.title }}</h3>
|
|
<p class="text-sm text-gray-500">{{ manga.publicationYear }}</p>
|
|
<p class="text-sm text-gray-600 mt-2">{{ manga.description|truncate(350) }}</p>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-2">
|
|
Added: {{ manga.createdAt|date('M d, Y') }}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-center text-gray-500">Aucun manga trouvé.</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% elseif currentView == 'table' %}
|
|
<div class="p-4">
|
|
<table class="min-w-full bg-white">
|
|
<thead>
|
|
<tr class="bg-gray-100 text-gray-600 uppercase text-sm leading-normal">
|
|
<th class="py-3 px-6 text-left">Manga Title</th>
|
|
{# <th class="py-3 px-6 text-center">Volumes</th> #}
|
|
<th class="py-3 px-6 text-center">Chapters</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-600 text-sm">
|
|
{% for manga in mangas %}
|
|
<tr class="border-b border-gray-200 hover:bg-gray-100">
|
|
<td class="py-3 px-6 text-left whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<span class="font-medium">{{ manga.title }}</span>
|
|
</div>
|
|
</td>
|
|
{# <td class="py-3 px-6 text-center"> #}
|
|
{# {{ manga.volumes|length }} #}
|
|
{# </td> #}
|
|
<td class="py-3 px-6 text-center">
|
|
{% set total_chapters = manga.chapters|length %}
|
|
{% set available_chapters = manga.chapters|filter(chapter => chapter.cbzPath is not null)|length %}
|
|
<div class="flex items-center justify-center">
|
|
<div class="w-48 bg-gray-200 rounded-full h-2.5">
|
|
<div class="bg-blue-600 h-2.5 rounded-full"
|
|
style="width: {{ (available_chapters / total_chapters * 100)|round }}%"></div>
|
|
</div>
|
|
<span class="ml-2">{{ available_chapters }} / {{ total_chapters }}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="6" class="py-3 px-6 text-center">Aucun manga trouvé.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|