develop/blog - list refactor and pagination navigation features (#3)
feat(theme): pagination navigation refactored out of the list template into its own partial features: - hidden if there's only 1 page - shows up to 5 page numbers along with links to previous/next and first/last - hide first/last if within 1 page from end - ellipses denoting page numbers not shown refactor(posts): limit body text row length to 80 char feat(theme): masonry.js implemented masonry.js so that items on list pages fill the content space more efficiently, wasting less space on the page refactor(theme): lists taxonomy and terms layouts have been consolidated back into default list template Co-authored-by: steven-y-e <steven@mineral.town> Reviewed-on: http://irie.clinic.homo.casa/steven-y-e/friends-of-mineral-town/pulls/3 Co-Authored-By: steven <steven-y-e@noreply.localhost> Co-Committed-By: steven <steven-y-e@noreply.localhost>pull/5/head
parent
43bba2d7f1
commit
74ac62f77a
|
|
@ -8,4 +8,9 @@ draft: false
|
|||
|
||||
![Air Jordan 3 Retro Georgetown (2021) [Navy]](/images/aj3georgetownstock.jpg)
|
||||
|
||||
This Air Jordan 3 (Retro) features a navy coloured tint to a familliar colour-blocking pattern. Being a new colourway rather than a direct copy of one of the designs of the original Air Jordan 3, Jordan (brand) elected to replace all of the Nike branding with the word Jordan, and the replacement of the Swoosh with a "Jumpman" logo. That being said, the absense of Nike branding is not a reason to ignore this colourway; it's so easy to wear.
|
||||
This Air Jordan 3 (Retro) features a navy coloured tint to a familliar
|
||||
colour-blocking pattern. Being a new colourway rather than a direct copy of
|
||||
one of the designs of the original Air Jordan 3, Jordan (brand) elected to
|
||||
replace all of the Nike branding with the word Jordan, and the replacement of
|
||||
the Swoosh with a "Jumpman" logo. That being said, the absense of Nike
|
||||
branding is not a reason to ignore this colourway; it's so easy to wear.
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
{{ define "main" }}
|
||||
<div class="row" style="margin-top: 25%">
|
||||
{{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }}
|
||||
{{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }}
|
||||
{{ if ne .Kind "home" }}
|
||||
{{ $paginator = .Data }}
|
||||
{{ end }}
|
||||
<div class="row grid" data-masonry='{ "itemSelector": ".grid-item" }' style="margin-top: 25%">
|
||||
<div class="columns"></div>
|
||||
|
||||
{{ range $paginator.Pages }}
|
||||
<div class="five columns">
|
||||
<div class="five columns grid-item">
|
||||
{{ range .Params.categories }}
|
||||
<a href="{{ $.Site.BaseURL }}categories/{{ . | urlize }}/">{{ . }}</a>
|
||||
{{ end }}
|
||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
<p class="date">{{.Date.Format "January 2, 2006"}}</p>
|
||||
{{ if ne .Kind "term" }}
|
||||
<p class="date">{{.Date.Format "January 2, 2006"}}</p>
|
||||
{{ end }}
|
||||
<p class="summary">{{ .Summary | plainify | htmlUnescape }}</p>
|
||||
<p>
|
||||
{{ range .Params.tags }}
|
||||
|
|
@ -20,17 +25,7 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<div class="row" style="margin-top: 2em">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination">
|
||||
{{ range $paginator.Pagers }}
|
||||
<li class="page-item {{ if eq $paginator.PageNumber .PageNumber }}active{{ end }}">
|
||||
<a class="page-link" href="{{ .URL }}">{{.PageNumber}}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- partial "pagination.html" . -}}
|
||||
|
||||
<script src="/js/masonry.js"></script>
|
||||
{{ end }}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<div class="row" style="margin-top: 25%">
|
||||
{{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }}
|
||||
{{ $paginator = .Data }}
|
||||
<div class="columns"></div>
|
||||
|
||||
{{ range $paginator.Pages }}
|
||||
<div class="five columns">
|
||||
{{ range .Params.categories }}
|
||||
<a href="/categories/{{ . | urlize }}/">{{ . }}</a>
|
||||
{{ end }}
|
||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
<p class="date">{{.Date.Format "January 2, 2006"}}</p>
|
||||
<p class="summary">{{ .Summary | plainify | htmlUnescape }}</p>
|
||||
<p>
|
||||
{{ range .Params.tags }}
|
||||
<a href="/tags/{{ . | urlize }}/">#{{ . }}</a>
|
||||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<div class="row" style="margin-top: 2em">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination">
|
||||
{{ range $paginator.Pagers }}
|
||||
<li class="page-item {{ if eq $paginator.PageNumber .PageNumber }}active{{ end }}">
|
||||
<a class="page-link" href="{{ .URL }}">{{.PageNumber}}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<div class="row" style="margin-top: 25%">
|
||||
{{ $paginator := .Paginate ( where site.RegularPages "Type" "in" site.Params.mainSections ) }}
|
||||
{{ $paginator = .Data }}
|
||||
<div class="columns"></div>
|
||||
|
||||
{{ range $paginator.Pages }}
|
||||
<div class="five columns">
|
||||
{{ range .Params.categories }}
|
||||
<a href="/categories/{{ . | urlize }}/">{{ . }}</a>
|
||||
{{ end }}
|
||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
<p class="summary">{{ .Summary | plainify | htmlUnescape }}</p>
|
||||
<p>
|
||||
{{ range .Params.tags }}
|
||||
<a href="/tags/{{ . | urlize }}/">#{{ . }}</a>
|
||||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<div class="row" style="margin-top: 2em">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination">
|
||||
{{ range $paginator.Pagers }}
|
||||
<li class="page-item {{ if eq $paginator.PageNumber .PageNumber }}active{{ end }}">
|
||||
<a class="page-link" href="{{ .URL }}">{{.PageNumber}}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
{{ $paginator := $.Paginator }}
|
||||
{{ if ne .Kind "home" }}
|
||||
{{ $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>
|
||||
{{ end }}
|
||||
|
||||
{{ if $paginator.HasPrev }}
|
||||
<li class="page-item"><a href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">‹ Prev</a></li>
|
||||
{{ end }}
|
||||
|
||||
{{ range $paginator.Pagers }}
|
||||
{{ if eq . $paginator }}
|
||||
<li class="page-item active"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $paginator.HasNext }}
|
||||
<li class="page-item"><a href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next ›</a></li>
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
|
@ -1,3 +1,38 @@
|
|||
/* post styles */
|
||||
article p img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* pagination styles */
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
border-radius: .25rem;
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
margin: 0.25em;
|
||||
line-height: 1.25;
|
||||
border: 1px dashed;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.page-item.active {
|
||||
background: #1EAEDB;
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page-item.disabled .page-link {
|
||||
color: #6c757d;
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue