0db69983fe
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.
58 lines
2.6 KiB
HTML
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}}
|