48 lines
2.6 KiB
Twig
48 lines
2.6 KiB
Twig
{# tailwindcss Sliding pagination control implementation #}
|
|
{% if pageCount > 1 %}
|
|
<div class="flex justify-center">
|
|
<div class="flex items-center gap-2">
|
|
{% if first is defined and current != first %}
|
|
<a href="{{ path(route, query|merge({(pageParameterName): first})) }}"
|
|
class="inline-flex items-center justify-center min-w-[2.5rem] h-10 px-3 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-psc-500 transition-colors font-medium shadow-sm">
|
|
<<
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if previous is defined %}
|
|
<a rel="prev" href="{{ path(route, query|merge({(pageParameterName): previous})) }}"
|
|
class="inline-flex items-center justify-center min-w-[2.5rem] h-10 px-3 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-psc-500 transition-colors font-medium shadow-sm">
|
|
<
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% for page in pagesInRange %}
|
|
{% if page != current %}
|
|
<a href="{{ path(route, query|merge({(pageParameterName): page})) }}"
|
|
class="inline-flex items-center justify-center min-w-[2.5rem] h-10 px-3 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-psc-500 transition-colors font-medium shadow-sm">
|
|
{{ page }}
|
|
</a>
|
|
{% else %}
|
|
<span class="inline-flex items-center justify-center min-w-[2.5rem] h-10 px-3 rounded-lg border border-psc-500 bg-psc-500 text-white font-bold shadow-md">
|
|
{{ page }}
|
|
</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if next is defined %}
|
|
<a rel="next" href="{{ path(route, query|merge({(pageParameterName): next})) }}"
|
|
class="inline-flex items-center justify-center min-w-[2.5rem] h-10 px-3 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-psc-500 transition-colors font-medium shadow-sm">
|
|
>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if last is defined and current != last %}
|
|
<a href="{{ path(route, query|merge({(pageParameterName): last})) }}"
|
|
class="inline-flex items-center justify-center min-w-[2.5rem] h-10 px-3 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-psc-500 transition-colors font-medium shadow-sm">
|
|
>>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|