steven-y-e
/
friends-of-mineral-town
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat(pagination): responsive styles 

- removed linkless ellipses between page numbers and next/previous links
- hide first/previous/next/last text labels on smaller views
- hide non active page specific links on even smaller views
pull/4/head
steven 2021-09-21 15:37:40 -04:00
parent 4d33cc36b7
commit d6e950e446
2 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
blog/themes/mineral/layouts/partials/pagination.html
View File

@ -3,35 +3,30 @@
{{ $paginator = .Data }}
{{ end }}
{{ if gt $paginator.TotalPages 1 }}
{{ $.Scratch.Set "dot_rendered" false }}
<nav aria-label="page navigation">
<ul class="pagination">
{{ if and (ne $paginator.PageNumber 1) (ne $paginator.PageNumber 2) }}
<li class="page-item"><a href="{{ $paginator.First.URL }}" rel="first" class="page-link">« First</a></li>
<a href="{{ $paginator.First.URL }}" rel="first" class="page-link"><li class="page-item">«<span class="tablet-hidden"> First</span></li></a>
{{ end }}
{{ if $paginator.HasPrev }}
<li class="page-item"><a href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">‹ Prev</a></li>
<a href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link"><li class="page-item">‹<span class="tablet-hidden"> Prev</span></li></a>
{{ end }}
{{ range $paginator.Pagers }}
{{ if eq . $paginator }}
<li class="page-item active"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
<a href="{{ .URL }}" class="page-link"><li class="page-item active">{{ .PageNumber }}</li></a>
{{ else if and (ge .PageNumber (sub $paginator.PageNumber 2)) (le .PageNumber (add $paginator.PageNumber 2)) }}
{{ $.Scratch.Set "dot_rendered" false }}
<li class="page-item"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
{{ else if eq ($.Scratch.Get "dot_rendered") false }}
{{ $.Scratch.Set "dot_rendered" true }}
<li class="page-item disabled"><a class="page-link">...</a></li>
<a href="{{ .URL }}" class="page-link mobile-hidden"><li class="page-item">{{ .PageNumber }}</li></a>
{{ end }}
{{ end }}
{{ if $paginator.HasNext }}
<li class="page-item"><a href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next ›</a></li>
<a href="{{ $paginator.Next.URL }}" rel="next" class="page-link"><li class="page-item"><span class="tablet-hidden">Next </span>›</li></a>
{{ end }}
{{ if and (ne $paginator.PageNumber $paginator.TotalPages) ((ne $paginator.PageNumber (sub $paginator.TotalPages 1))) }}
<li class="page-item"><a href="{{ $paginator.Last.URL }}" rel="last" class="page-link">Last »</a></li>
<a href="{{ $paginator.Last.URL }}" rel="last" class="page-link"><li class="page-item"><span class="tablet-hidden">Last </span>»</li></a>
{{ end }}
</ul>
</nav>

37
blog/themes/mineral/static/css/mineral.css
View File

@ -7,8 +7,7 @@ article p img {
.pagination {
display: flex;
list-style: none;
border-radius: .25rem;
margin: 20px 0;
margin: 20px -1px;
padding: 0;
justify-content: center;
}
@ -17,22 +16,42 @@ article p img {
position: relative;
display: block;
padding: 0.5em;
margin: 0.25em;
margin: 0.15em;
line-height: 1.25;
border: 1px dashed;
border: 1px dashed #6c757d;
background: #fff;
}
.page-item.active {
background: #1EAEDB;
}
.page-item.active .page-link {
.page-item.active {
color: #fff;
}
.page-item.disabled .page-link {
.page-item.disabled {
color: #6c757d;
pointer-events: none;
cursor: auto;
}
/* hide some pagination links on tablet/mobile-width views */
@media (max-width: 420px) {
.mobile-hidden {
display: none;
}
.page-item {
margin: 0.08em;
}
}
@media (max-width: 550px) {
.tablet-hidden {
display: none;
}
}
/* automatically hyphenate long words in summaries on list pages */
.summary {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}