website/web/templates/partials/simple_pager.html
Noah Petherbridge 0db69983fe Revise Pagination Widget
The pager widget will now show a dropdown menu of overflow pages in the
middle. This allows easy access to the First and Last pages and an
ability to select from any of the middle pages to jump to quickly.
2024-07-07 12:45:42 -07:00

58 lines
2.6 KiB
HTML

<!--
A simple and generic Paginator row, with page buttons and Previous/Next
Usage: [[SimplePager .Pager]]
Give it your Pagination object (with .Previous, .Next, .Iter() and so on). It
links to the current .Request.URL.Path and with all query parameters + the page
added. Should be suitable for most pagers that don't need any specialized logic.
See also: template_funcs.go for the SimplePager wrapper function.
-->
{{define "SimplePager"}}
{{if .Pager.Pages}}
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous{{if not .Pager.HasPrevious}} is-disabled{{end}}" title="Previous"
href="{{.Request.URL.Path}}?{{QueryPlus "page" .Pager.Previous}}"
style="font-size: smaller">Previous</a>
<a class="pagination-next{{if not .Pager.HasNext}} is-disabled{{end}}" title="Next"
href="{{.Request.URL.Path}}?{{QueryPlus "page" .Pager.Next}}"
style="font-size: smaller">Next page</a>
<ul class="pagination-list">
{{$Root := .}}
{{$DropdownID := .Pager.UniqueSerialID}}
{{range .Pager.Iter}}
<li>
<!-- Overflow menu in the middle? -->
{{if .IsOverflow}}
<div class="dropdown px-1">
<div class="dropdown-trigger">
<button class="button{{if .IsCurrent}} is-link{{end}}" aria-haspopup="true" aria-controls="{{$DropdownID}}" style="font-size: smaller">
{{.Page}} <i class="fas fa-angle-down ml-1" aria-hidden="true"></i>
</button>
</div>
<div class="dropdown-menu" id="{{$DropdownID}}" role="menu">
<div class="dropdown-content" style="max-height: 250px; overflow: auto">
{{range .IterOverflow}}
<a class="dropdown-item{{if .IsCurrent}} is-active{{end}}"
aria-label="Page {{.Page}}"
href="{{$Root.Request.URL.Path}}?{{QueryPlus "page" .Page}}">{{.Page}}</a>
{{end}}
</div>
</div>
</div>
{{else}}
<a class="pagination-link{{if .IsCurrent}} is-current{{end}}"
style="font-size: smaller"
aria-label="Page {{.Page}}"
href="{{$Root.Request.URL.Path}}?{{QueryPlus "page" .Page}}">
{{.Page}}
</a>
{{end}}
</li>
{{end}}
</ul>
</nav>
{{end}}
{{end}}