kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on first page with pagination

Browse Source
This commit is contained in:
kbe
2025-08-20 15:39:07 +02:00
parent 75d235c17e
commit 41805da339
2 changed files with 148 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
layouts/partials/pagination-tailwind.html Normal file
View File

@@ -0,0 +1,96 @@
<!-- Tailwind CSS Pagination -->
{{ $paginator := . }}
{{ if gt $paginator.TotalPages 1 }}
<nav class="bg-white rounded-lg shadow-lg mx-auto max-w-2xl my-8 px-4 py-3">
<div class="flex items-center justify-between">
<div class="flex w-0 flex-1">
{{ if $paginator.HasPrev }}
<a href="{{ $paginator.Prev.URL }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md hover:bg-gray-100 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
Précédent
</a>
{{ else }}
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-gray-50 rounded-md cursor-not-allowed">
<svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
Précédent
</span>
{{ end }}
</div>
<!-- Desktop pagination - hidden on mobile -->
<div class="hidden md:flex items-center space-x-1">
{{ $currentPage := $paginator.PageNumber }}
{{ $totalPages := $paginator.TotalPages }}
<!-- Always show first page -->
<a href="{{ $paginator.First.URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $currentPage 1 }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
1
</a>
<!-- Show ellipsis if current page is > 4 -->
{{ if gt $currentPage 4 }}
<span class="relative inline-flex items-center px-2 text-sm font-medium text-gray-500">
...
</span>
{{ end }}
<!-- Show pages around current page -->
{{ range $paginator.Pagers }}
{{ $pageNumber := .PageNumber }}
{{ if and (gt $pageNumber 1) (lt $pageNumber $totalPages) (ge $pageNumber (sub $currentPage 1)) (le $pageNumber (add $currentPage 1)) }}
{{ if ne $pageNumber 1 }}
{{ if ne $pageNumber $totalPages }}
<a href="{{ .URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $pageNumber $currentPage }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
{{ $pageNumber }}
</a>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
<!-- Show ellipsis if current page is < totalPages - 3 -->
{{ if lt $currentPage (sub $totalPages 3) }}
<span class="relative inline-flex items-center px-2 text-sm font-medium text-gray-500">
...
</span>
{{ end }}
<!-- Always show last page -->
{{ if gt $totalPages 1 }}
<a href="{{ $paginator.Last.URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $currentPage $totalPages }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
{{ $totalPages }}
</a>
{{ end }}
</div>
<!-- Mobile current page display -->
<div class="md:hidden">
<span class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium text-white bg-blue-600 rounded-full">
{{ $paginator.PageNumber }}
</span>
</div>
<div class="flex w-0 flex-1 justify-end">
{{ if $paginator.HasNext }}
<a href="{{ $paginator.Next.URL }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md hover:bg-gray-100 transition-colors duration-200">
Suivant
<svg class="w-5 h-5 ml-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
{{ else }}
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-gray-50 rounded-md cursor-not-allowed">
Suivant
<svg class="w-5 h-5 ml-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</span>
{{ end }}
</div>
</div>
</nav>
{{ end }}