ba30d3102d
- new simpler modal without bootstrap - new loadingbutton component - cleanupsome old code - toolbar adjusments
39 lines
2.0 KiB
Twig
39 lines
2.0 KiB
Twig
{# templates/components/Search.html.twig #}
|
|
<div{{ attributes }}>
|
|
<div class="flex items-center py">
|
|
<i class="fas fa-search text-white"></i>
|
|
<input
|
|
data-model="query"
|
|
type="text"
|
|
placeholder="Rechercher"
|
|
class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
|
|
/>
|
|
</div>
|
|
|
|
{% if query %}
|
|
<div id="searchResults" class="absolute left-0 right-0 min-w-60 ml-8 mt-2 rounded-sm shadow-lg max-h-60 overflow-y-auto z-50">
|
|
<ul class="bg-gray-700 text-white">
|
|
{% if this.mangas is not empty %}
|
|
<li class="px-4 py-2 text-gray-400">Mangas existants</li>
|
|
{% for manga in this.mangas %}
|
|
<li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
|
|
<a class="flex items-center" href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}">
|
|
<img src="{{ manga.imageUrl ?? 'https://placehold.co/40x60' }}" alt="{{ manga.title }}"
|
|
class="w-10 h-15 object-cover mr-4">
|
|
<span>{{ manga.title }} ({{ manga.publicationYear }})</span>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
{% else %}
|
|
<li class="px-4 py-2 text-gray-400">Aucun manga trouvé.</li>
|
|
<li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
|
|
<a class="flex items-center" href="{{ path('app_manga_search', {query: query}) }}">
|
|
<span>Ajouter {{ query }}</span>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|