Skip to content

Commit 55cdf49

Browse files
drmowinckelsclaude
drmowinckels
and
claude
authored
Add shared pagination partial with condensed page list (#584)
Long page lists rendered every page number (60+ on the directory in production). Extract a single pagination partial used by directory, post, and default list templates that shows first 2, last 2, and current ±1 with ellipsis fillers, and patch dark-mode hover so the pill doesn't flash near-white on dark backgrounds. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 49ee6de commit 55cdf49

5 files changed

Lines changed: 60 additions & 92 deletions

File tree

‎themes/hugo-rladiesplus/assets/css/components/darkmode.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,14 @@
134134
}
135135

136136
/* ── Pagination ── */
137-
.dark .page-item.disabled .page-link {
137+
.dark .page-link:hover {
138+
background-color: var(--color-raised);
139+
}
140+
141+
.dark .page-item.disabled .page-link,
142+
.dark .page-item.disabled .page-link:hover {
138143
@apply text-gray-500;
144+
background-color: transparent;
139145
}
140146

141147
/* ── Calendar (FullCalendar) ── */

‎themes/hugo-rladiesplus/layouts/_default/list.html‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,33 +36,7 @@ <h2 class="text-lg font-semibold mb-2">
3636
{{ end }}
3737
</div>
3838

39-
{{ if gt .Paginator.TotalPages 1 }}
40-
<nav aria-label="Page navigation" class="mt-16">
41-
<ul class="pagination justify-center">
42-
{{ if .Paginator.HasPrev }}
43-
<li class="page-item">
44-
<a class="page-link" href="{{ .Paginator.Prev.URL }}" aria-label="Previous">
45-
<i class="fas fa-chevron-left"></i>
46-
</a>
47-
</li>
48-
{{ end }}
49-
50-
{{ range .Paginator.Pagers }}
51-
<li class="page-item {{ if eq . $.Paginator }}active{{ end }}">
52-
<a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a>
53-
</li>
54-
{{ end }}
55-
56-
{{ if .Paginator.HasNext }}
57-
<li class="page-item">
58-
<a class="page-link" href="{{ .Paginator.Next.URL }}" aria-label="Next">
59-
<i class="fas fa-chevron-right"></i>
60-
</a>
61-
</li>
62-
{{ end }}
63-
</ul>
64-
</nav>
65-
{{ end }}
39+
{{ partial "pagination.html" (dict "paginator" .Paginator) }}
6640
</div>
6741
</section>
6842

‎themes/hugo-rladiesplus/layouts/directory/list.html‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -155,33 +155,7 @@ <h2 class="sr-only">{{ i18n "directory_members" | default "Members" }}</h2>
155155
{{ i18n "no_results" | default "No members match your filters." }}
156156
</p>
157157

158-
{{ if gt $paginator.TotalPages 1 }}
159-
<nav id="directory-pagination" aria-label="Page navigation" class="mt-16">
160-
<ul class="pagination justify-center">
161-
{{ if $paginator.HasPrev }}
162-
<li class="page-item">
163-
<a class="page-link" href="{{ $paginator.Prev.URL }}" aria-label="Previous">
164-
<i class="fas fa-chevron-left"></i>
165-
</a>
166-
</li>
167-
{{ end }}
168-
169-
{{ range $paginator.Pagers }}
170-
<li class="page-item {{ if eq . $paginator }}active{{ end }}">
171-
<a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a>
172-
</li>
173-
{{ end }}
174-
175-
{{ if $paginator.HasNext }}
176-
<li class="page-item">
177-
<a class="page-link" href="{{ $paginator.Next.URL }}" aria-label="Next">
178-
<i class="fas fa-chevron-right"></i>
179-
</a>
180-
</li>
181-
{{ end }}
182-
</ul>
183-
</nav>
184-
{{ end }}
158+
{{ partial "pagination.html" (dict "paginator" $paginator "id" "directory-pagination") }}
185159
</div>
186160
</div>
187161

‎themes/hugo-rladiesplus/layouts/partials/pagination.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{{/*
2+
Pagination — condenses long page lists to: first 2, last 2, current ±1,
3+
with ellipsis fillers. Renders nothing when there's only one page.
4+
5+
Params (passed as a dict):
6+
paginator (required) — a Hugo Paginator (e.g. .Paginator or a custom .Paginate result)
7+
id (optional) — id attribute for the <nav> wrapper
8+
class (optional) — class for the <nav>, defaults to "mt-16"
9+
*/}}
10+
{{ $paginator := .paginator }}
11+
{{ $id := .id }}
12+
{{ $class := .class | default "mt-16" }}
13+
14+
{{ if gt $paginator.TotalPages 1 }}
15+
<nav{{ with $id }} id="{{ . }}"{{ end }} aria-label="Page navigation" class="{{ $class }}">
16+
<ul class="pagination justify-center">
17+
{{ if $paginator.HasPrev }}
18+
<li class="page-item">
19+
<a class="page-link" href="{{ $paginator.Prev.URL }}" aria-label="Previous">
20+
<i class="fas fa-chevron-left"></i>
21+
</a>
22+
</li>
23+
{{ end }}
24+
25+
{{ $currentPage := $paginator.PageNumber }}
26+
{{ $totalPages := $paginator.TotalPages }}
27+
28+
{{ range $paginator.Pagers }}
29+
{{ $pageNum := .PageNumber }}
30+
{{ if or (le $pageNum 2) (ge $pageNum (sub $totalPages 1)) (and (ge $pageNum (sub $currentPage 1)) (le $pageNum (add $currentPage 1))) }}
31+
<li class="page-item {{ if eq . $paginator }}active{{ end }}">
32+
<a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a>
33+
</li>
34+
{{ else if or (eq $pageNum 3) (eq $pageNum (sub $totalPages 2)) }}
35+
<li class="page-item disabled">
36+
<span class="page-link">&hellip;</span>
37+
</li>
38+
{{ end }}
39+
{{ end }}
40+
41+
{{ if $paginator.HasNext }}
42+
<li class="page-item">
43+
<a class="page-link" href="{{ $paginator.Next.URL }}" aria-label="Next">
44+
<i class="fas fa-chevron-right"></i>
45+
</a>
46+
</li>
47+
{{ end }}
48+
</ul>
49+
</nav>
50+
{{ end }}

‎themes/hugo-rladiesplus/layouts/post/list.html‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,43 +13,7 @@
1313
{{ end }}
1414
</div>
1515

16-
{{ if gt .Paginator.TotalPages 1 }}
17-
<nav aria-label="Page navigation" class="mt-16">
18-
<ul class="pagination justify-center">
19-
{{ if .Paginator.HasPrev }}
20-
<li class="page-item">
21-
<a class="page-link" href="{{ .Paginator.Prev.URL }}" aria-label="Previous">
22-
<i class="fas fa-chevron-left"></i>
23-
</a>
24-
</li>
25-
{{ end }}
26-
27-
{{ $currentPage := .Paginator.PageNumber }}
28-
{{ $totalPages := .Paginator.TotalPages }}
29-
30-
{{ range .Paginator.Pagers }}
31-
{{ $pageNum := .PageNumber }}
32-
{{ if or (le $pageNum 2) (ge $pageNum (sub $totalPages 1)) (and (ge $pageNum (sub $currentPage 1)) (le $pageNum (add $currentPage 1))) }}
33-
<li class="page-item {{ if eq . $.Paginator }}active{{ end }}">
34-
<a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a>
35-
</li>
36-
{{ else if or (eq $pageNum 3) (eq $pageNum (sub $totalPages 2)) }}
37-
<li class="page-item disabled">
38-
<span class="page-link">&hellip;</span>
39-
</li>
40-
{{ end }}
41-
{{ end }}
42-
43-
{{ if .Paginator.HasNext }}
44-
<li class="page-item">
45-
<a class="page-link" href="{{ .Paginator.Next.URL }}" aria-label="Next">
46-
<i class="fas fa-chevron-right"></i>
47-
</a>
48-
</li>
49-
{{ end }}
50-
</ul>
51-
</nav>
52-
{{ end }}
16+
{{ partial "pagination.html" (dict "paginator" .Paginator) }}
5317
</div>
5418
</section>
5519
{{ end }}

0 commit comments

Comments
 (0)
⚡