zhao/hugo-theme-moments
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

IMPROVEMENT: polish pagination bar style

Browse source
This commit is contained in:
FarseaSH 2022-10-07 19:21:04 +08:00
parent 166204db8c
commit acbe9a09dc
3 changed files with 23 additions and 25 deletions

23
assets/style-refractored.scss
View file

@ -82,40 +82,39 @@ p{
/* END - top cover part */
/* START - pagination */
// todo replace this part
$dark-blue: #21365c;
$blue: #3A6bA5;
$gray: #919EB1;
.pagination{
display: flex;
margin-top: 20px;
margin-bottom: 30px;
.page-item{
border: #80808050;
border-style: solid;
border-width: 0.5px;
border-radius: 2%;
padding-left: 10px;
padding-right: 10px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
&.active{
background-color: #337cf6;
background-color: $blue;
color: #ffffff;
}
&.disabled{
color:rgb(108, 117, 125)
color: $gray;
}
}
// below is for items with link
a{
color: #337cf6;
color: $dark-blue;
text-decoration: none;
}
.page-link .page-item:hover{
background-color: #eaecef;
color: #2157ad;
background-color: #f5f5f5;
}
}
/* END - pagination */

8
layouts/_default/list.html
View file

@ -12,11 +12,11 @@
{{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }}
{{ if $paginator.HasPrev }}
<li class="page-item">
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">Previous</a>
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">< Prev</a>
</li>
{{ else }}
<li class="page-item disabled">
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">Previous</a>
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">< Prev</a>
</li>
{{ end }}
@ -31,11 +31,11 @@
{{ if $paginator.HasNext }}
<li class="page-item">
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next</a>
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next ></a>
</li>
{{ else }}
<li class="page-item disabled">
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next</a>
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next ></a>
</li>
{{ end }}
{{ end }}

17
layouts/index.html
View file

@ -11,12 +11,11 @@
{{ define "pagination" }}
{{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }}
{{ if $paginator.HasPrev }}
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}">
<div class="page-item">Previous</div>
</a>
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}">
<div class="page-item">< Prev</div>
</a>
{{ else }}
<div class="page-item disabled">Previous</div>
<div class="page-item disabled">< Prev</div>
{{ end }}
{{ $current_num := $paginator.PageNumber }}
@ -29,10 +28,10 @@
{{end}}
{{ if $paginator.HasNext }}
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">
<div class="page-item">Next</div>
</a>
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">
<div class="page-item">Next ></div>
</a>
{{ else }}
<div class="page-item disabled">Next</div>
<div class="page-item disabled">Next ></div>
{{ end }}
{{ end }}