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 ebca1b2be..1ed697098 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 f47569392..46284811e 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; }