add pagination style
This commit is contained in:
parent
3d1a633b70
commit
4dfeb93202
3 changed files with 58 additions and 18 deletions
|
@ -11,12 +11,12 @@
|
|||
{{ end }}
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav aria-label="Page navigation .pagination-lg">
|
||||
<ul class="pagination justify-content-center">
|
||||
<div class="center">
|
||||
<div class="pagination">
|
||||
{{ block "pagination" . }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
|
|
|
@ -11,31 +11,28 @@
|
|||
{{ define "pagination" }}
|
||||
{{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }}
|
||||
{{ if $paginator.HasPrev }}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">Previous</a>
|
||||
</li>
|
||||
|
||||
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}">
|
||||
<div class="page-item">Previous</div>
|
||||
</a>
|
||||
{{ else }}
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">Previous</a>
|
||||
</li>
|
||||
<div class="page-item disabled">Previous</div>
|
||||
{{ end }}
|
||||
|
||||
{{ $current_num := $paginator.PageNumber }}
|
||||
{{ range (seq 1 $paginator.TotalPages) }}
|
||||
{{ if (eq $current_num .)}}
|
||||
<li class="page-item active"><a class="page-link" href="{{$.Site.BaseURL}}/{{.}}">{{.}}</a></li>
|
||||
<div class="page-item active">{{.}}</div>
|
||||
{{ else }}
|
||||
<li class="page-item"><a class="page-link" href="{{$.Site.BaseURL}}/{{.}}">{{.}}</a></li>
|
||||
<a class="page-link" href="{{$.Site.BaseURL}}/{{.}}"><div class="page-item">{{.}}</div></a>
|
||||
{{ end }}
|
||||
{{end}}
|
||||
|
||||
{{ if $paginator.HasNext }}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next</a>
|
||||
</li>
|
||||
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">
|
||||
<div class="page-item">Next</div>
|
||||
</a>
|
||||
{{ else }}
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next</a>
|
||||
</li>
|
||||
<div class="page-item disabled">Next</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
|
@ -35,6 +35,49 @@ p{
|
|||
|
||||
/* END - top cover part */
|
||||
|
||||
/* START - pagination */
|
||||
.center{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination{
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.pagination a{
|
||||
color: #337cf6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-item{
|
||||
border: #80808050;
|
||||
border-style: solid;
|
||||
border-width: 0.5px;
|
||||
border-radius: 2%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.page-link .page-item:hover{
|
||||
background-color: #eaecef;
|
||||
color: #2157ad;
|
||||
}
|
||||
|
||||
.page-item.active{
|
||||
background-color: #337cf6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.page-item.disabled{
|
||||
color:rgb(108, 117, 125)
|
||||
}
|
||||
/* END - pagination */
|
||||
|
||||
.page{
|
||||
max-width: 1150px;
|
||||
margin: auto;
|
||||
|
|
Loading…
Add table
Reference in a new issue