From b91167b77230b891a38e21f83926341b641ca525 Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Fri, 25 Nov 2022 14:37:02 +0800
Subject: [PATCH] fix(web): keep the pages of the navigation in the center
(#21867)
Keep the pages of the navigation in the center
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>
<img width="200" alt="image"
src="https://user-images.githubusercontent.com/45708948/202838756-d6d57b3f-8144-4a43-a33b-ea7c8ab3a495.png">
</td>
<td>
<img width="192" alt="image"
src="https://user-images.githubusercontent.com/45708948/202838740-bbae1e86-b14c-421d-92d4-d0e53d5952a2.png">
</td>
</tr>
</table>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
---
templates/base/paginate.tmpl | 2 +-
web_src/less/helpers.less | 2 ++
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/templates/base/paginate.tmpl b/templates/base/paginate.tmpl
index ebca1b2be4..1ed6970983 100644
--- a/templates/base/paginate.tmpl
+++ b/templates/base/paginate.tmpl
@@ -15,7 +15,7 @@
{{if eq .Num -1}}
<a class="disabled item">...</a>
{{else}}
- <a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.Link}}?page={{.Num}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>{{.Num}}</a>
+ <a class="{{if .IsCurrent}}active{{end}} item content-center" {{if not .IsCurrent}}href="{{$.Link}}?page={{.Num}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>{{.Num}}</a>
{{end}}
{{end}}
<a class="{{if not .HasNext}}disabled{{end}} item navigation" {{if .HasNext}}href="{{$.Link}}?page={{.Next}}{{if $paginationLink}}&{{$paginationLink}}{{end}}"{{end}}>
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index f475693926..46284811ee 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -172,6 +172,8 @@
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
+.content-center { align-content: center !important; }
+
@media @mediaSm {
.db-small { display: block !important; }
.w-100-small { width: 100% !important; }