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
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/style-refractored.scss
View file

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

8
layouts/_default/list.html
View file

@ -12,11 +12,11 @@
{{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }} {{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }}
{{ if $paginator.HasPrev }} {{ if $paginator.HasPrev }}
<li class="page-item"> <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> </li>
{{ else }} {{ else }}
<li class="page-item disabled"> <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> </li>
{{ end }} {{ end }}
@ -31,11 +31,11 @@
{{ if $paginator.HasNext }} {{ if $paginator.HasNext }}
<li class="page-item"> <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> </li>
{{ else }} {{ else }}
<li class="page-item disabled"> <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> </li>
{{ end }} {{ end }}
{{ end }} {{ end }}

17
layouts/index.html
View file

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