From bf4de722a79a49e6b1782681843d99d08c40cb8d Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Tue, 29 Oct 2024 15:39:37 +0800
Subject: [PATCH] feat: update template files

---
 ui/template/header.html          |  10 ++-
 ui/template/homepage.html        | 104 ++++++++++++++++---------------
 ui/template/question-detail.html |  40 +++++-------
 ui/template/question.html        |  46 +++++++-------
 ui/template/sort-btns.html       |  19 ++++++
 ui/template/tag-detail.html      |  87 ++++++++++++--------------
 ui/template/tags.html            |  88 ++++++++++++++------------
 7 files changed, 206 insertions(+), 188 deletions(-)
 create mode 100644 ui/template/sort-btns.html

diff --git a/ui/template/header.html b/ui/template/header.html
index 0243a43d..5c4977d9 100644
--- a/ui/template/header.html
+++ b/ui/template/header.html
@@ -189,9 +189,13 @@
           </div>
         </div>
       </nav>
-      <div class="position-relative page-wrap">
-        {{template "sidenav" . }}
-        {{end}}
+      <div class="position-relative page-wrap d-flex flex-column flex-fill">
+        <div class="d-flex flex-column flex-fill container">
+          <div class="flex-fill row">
+            {{template "sidenav" . }}
+            {{end}}
+          </div>
+        </div>
       </div>
 
     </div>
diff --git a/ui/template/homepage.html b/ui/template/homepage.html
index ad5b0209..2f68200d 100644
--- a/ui/template/homepage.html
+++ b/ui/template/homepage.html
@@ -19,59 +19,61 @@
 
 -->
 {{template "header" . }}
-            <div class="pt-4 mt-2 mb-5 container">
-                <div class="justify-content-center row">
-                    <div class="col-xxl-7 col-lg-8 col-sm-12">
-                        <div class="d-flex flex-column flex-md-row mb-4">
-                            <a href="{{$.baseURL}}/users/{{.userinfo.Username}}"><img
-                                    src="{{.userinfo.Avatar}}"
-                                    width="160px" height="160px" class="rounded" alt="" /></a>
-                            <div class="ms-0 ms-md-4 mt-4 mt-md-0">
-                                <div class="d-flex align-items-center mb-2">
-                                    <a class="link-dark h3 mb-0" href="{{$.baseURL}}/users/{{.userinfo.Username}}">{{.userinfo.DisplayName}}</a>
+<div class="col-xl-10 col-lg-9 col-md-12">
+  <div class="pt-4 mb-5">
+    <div class="row">
+      <div class="col">
+        <div class="d-md-flex d-block flex-wrap justify-content-between">
+          <div class="d-flex flex-column flex-md-row mb-4">
+            <a href="{{$.baseURL}}/users/{{.userinfo.Username}}">
+              <img
+                  src="{{.userinfo.Avatar}}"
+                  width="160px" height="160px" class="rounded" alt="{{.userinfo.Username}}" />
+              </a>
+            <div class="ms-0 ms-md-4 mt-4 mt-md-0">
+              <div class="d-flex align-items-center mb-2">
+                  <a class="link-dark h3 mb-0" href="{{$.baseURL}}/users/{{.userinfo.Username}}">{{.userinfo.DisplayName}}</a>
 
-                                </div>
-                                <div class="text-secondary mb-4">@{{.userinfo.Username}}</div>
-                                <div class="d-flex flex-wrap mb-3">
-                                    <div class="me-3">
-                                        <strong class="fs-5">{{.userinfo.Rank}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_reputation"}}</span>
-                                    </div>
-                                    <div class="me-3">
-                                        <strong class="fs-5">{{.userinfo.AnswerCount}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_answers"}}</span>
-                                    </div>
-                                    <div>
-                                        <strong class="fs-5">{{.userinfo.QuestionCount}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_questions"}}</span>
-                                    </div>
-                                </div>
-                                {{if .userinfo.Website }}
-                                <div class="d-flex align-items-center"><i class="br bi-house-door-fill me-2"></i><a class="link-secondary" href="{{.userinfo.Website}}">{{.userinfo.Website}}</a></div>
-                                {{else}}
-                                {{end}}
-                                <div class="d-flex text-secondary"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="d-flex justify-content-start justify-content-md-end col-xxl-3 col-lg-4 col-sm-12">
-
-                    </div>
-                </div>
-                <div class="justify-content-center row">
-
-                    <div class="col-xxl-7 col-lg-8 col-sm-12">
-                        <div>
-                            <h5 class="mb-3">{{translator $.language "ui.personal.about_me"}}</h5>
-                            {{if .bio }}
-                            <div class="text-center mb-4">{{.bio}}</div>
-                            {{else}}
-                            <div class="text-center py-5 mb-4">{{translator $.language "ui.personal.about_me_empty"}}</div>
-                            {{end}}
-                        </div>
-                    </div>
-                    <div class="mt-5 mt-lg-0 col-xxl-3 col-lg-4 col-sm-12">
-
-                    </div>
-                </div>
+              </div>
+              <div class="text-secondary mb-4">@{{.userinfo.Username}}</div>
+              <div class="d-flex flex-wrap mb-3">
+                  <div class="me-3">
+                      <strong class="fs-5">{{.userinfo.Rank}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_reputation"}}</span>
+                  </div>
+                  <div class="me-3">
+                      <strong class="fs-5">{{.userinfo.AnswerCount}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_answers"}}</span>
+                  </div>
+                  <div>
+                      <strong class="fs-5">{{.userinfo.QuestionCount}}</strong><span class="text-secondary"> {{translator $.language "ui.personal.x_questions"}}</span>
+                  </div>
+              </div>
+              {{if .userinfo.Website }}
+              <div class="d-flex align-items-center"><i class="br bi-house-door-fill me-2"></i><a class="link-secondary" href="{{.userinfo.Website}}">{{.userinfo.Website}}</a></div>
+              {{else}}
+              {{end}}
+              <div class="d-flex text-secondary"></div>
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="justify-content-center row">
 
+        <div class="col-xxl-7 col-lg-8 col-sm-12">
+            <div>
+                <h5 class="mb-3">{{translator $.language "ui.personal.about_me"}}</h5>
+                {{if .bio }}
+                <div class="text-center mb-4">{{.bio}}</div>
+                {{else}}
+                <div class="text-center py-5 mb-4">{{translator $.language "ui.personal.about_me_empty"}}</div>
+                {{end}}
+            </div>
+        </div>
+        <div class="mt-5 mt-lg-0 col-xxl-3 col-lg-4 col-sm-12">
+
+        </div>
+    </div>
+  </div>
+</div>
 
 {{template "footer" .}}
diff --git a/ui/template/question-detail.html b/ui/template/question-detail.html
index d0e6933d..fcf98c3d 100644
--- a/ui/template/question-detail.html
+++ b/ui/template/question-detail.html
@@ -19,9 +19,9 @@
 
 -->
 {{template "header" . }}
-<div class="pt-4 mt-2 mb-5 questionDetailPage container">
-  <div class="justify-content-center row">
-    <div class="mb-5 mb-md-0 col-xxl-7 col-lg-8 col-sm-12">
+<div class="col-xl-10 col-lg-9 col-md-12">
+  <div class="questionDetailPage pt-4 mb-5 row">
+    <div class="page-main flex-auto col">
       <div>
         <h1 class="h3 mb-3 text-wrap text-break">
           {{if $.useTitle }}
@@ -46,14 +46,16 @@
         <div class="m-n1">
           {{range .detail.Tags}}
           <a href="{{$.baseURL}}/tags/{{.SlugName}}"
-             class="badge-tag rounded-1 {{if .Reserved}}badge-tag-reserved{{end}} {{if .Recommend}}badge-tag-required{{end}} m-1">
+              class="badge-tag rounded-1 {{if .Reserved}}badge-tag-reserved{{end}} {{if .Recommend}}badge-tag-required{{end}} m-1">
             <span class="">{{.SlugName}}</span>
           </a>
           {{end}}
         </div>
-        <article class="fmt text-break text-wrap mt-4">
-          {{formatLinkNofollow .detail.HTML}}
-        </article>
+        <div class="img-viewer">
+          <article class="fmt text-break text-wrap mt-4">
+            {{formatLinkNofollow .detail.HTML}}
+          </article>
+        </div>
         <div class="mt-4">
           <div role="group" class="btn-group">
             <button type="button" class="btn btn-outline-secondary">
@@ -70,11 +72,11 @@
             <i class="br bi-bookmark-fill"></i><span style="padding-left: 10px">{{.detail.CollectionCount}}</span>
           </button>
         </div>
-        <div class="mt-4 mb-3 row">
-          <div class="mb-3 mb-md-0 col-lg-5">
+        <div class="d-block d-md-flex flex-wrap mt-4 mb-3">
+          <div class="mb-3 mb-md-0 me-4 flex-grow-1">
 
           </div>
-          <div class="mb-3 mb-md-0 col-lg-3">
+          <div class="mb-3 me-4 mb-md-0" style="min-width: 196px;">
             <a href="{{$.baseURL}}/posts/{{.detail.ID}}/timeline">
               <time class="link-secondary small"
                     datetime="{{timeFormatISO $.timezone .detail.UpdateTime}}"
@@ -83,7 +85,7 @@
               </time>
             </a>
           </div>
-          <div class="col-lg-3">
+          <div style="min-width: 196px;">
             <div class="d-flex">
               <a href="{{$.baseURL}}/users/{{.detail.UserInfo.Username}}"><img
                 src="{{.detail.UserInfo.Avatar}}"
@@ -98,7 +100,7 @@
                 class="small text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
                 <div class="me-1 me-md-0">
                   <a class="me-1 text-break"
-                     href="{{$.baseURL}}/users/{{.detail.UserInfo.Username}}">{{.detail.UserInfo.DisplayName}}</a><span
+                      href="{{$.baseURL}}/users/{{.detail.UserInfo.Username}}">{{.detail.UserInfo.DisplayName}}</a><span
                   class="fw-bold" title="Reputation">{{.detail.UserInfo.Rank}}</span>
                 </div>
                 <a href="{{$.baseURL}}/posts/{{.detail.ID}}/timeline">
@@ -116,7 +118,7 @@
         </div>
       </div>
       <div class="d-flex align-items-center justify-content-between mt-5 mb-3"
-           id="answerHeader">
+            id="answerHeader">
         <h5 class="mb-0">{{.detail.AnswerCount}} Answers</h5>
       </div>
       {{range .answers}}
@@ -176,7 +178,7 @@
                 class="small text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
                 <div class="me-1 me-md-0">
                   <a class="me-1 text-break"
-                     href="{{$.baseURL}}/users/{{.UserInfo.Username}}">{{.UserInfo.DisplayName}}</a><span
+                      href="{{$.baseURL}}/users/{{.UserInfo.Username}}">{{.UserInfo.DisplayName}}</a><span
                   class="fw-bold" title="Reputation">{{.UserInfo.Rank}}</span>
                 </div>
                 <a href="{{$.baseURL}}/posts/{{$.detail.ID}}/{{.ID}}/timeline">
@@ -201,14 +203,4 @@
     </div>
   </div>
 </div>
-<div style="
-            position: fixed;
-            top: 90px;
-            left: 0px;
-            right: 0px;
-            margin: auto;
-            z-index: 5;
-          ">
-  <div class="d-flex justify-content-center"></div>
-</div>
 {{template "footer" .}}
diff --git a/ui/template/question.html b/ui/template/question.html
index 058645e5..ca7f1301 100644
--- a/ui/template/question.html
+++ b/ui/template/question.html
@@ -19,18 +19,19 @@
 
 -->
 {{template "header" . }}
-<div class="pt-4 mt-2 mb-5 container">
-  <div class="justify-content-center row">
-    <div class="col-xxl-7 col-lg-8 col-sm-12">
+<div class="col-xl-10 col-lg-9 col-md-12">
+  <div class="pt-4 mb-5 row">
+    <div class="page-main flex-auto col">
       <div>
         <div class="mb-3 d-flex flex-wrap justify-content-between">
           <h5 class="fs-5 text-nowrap mb-3 mb-md-0">
             {{translator $.language "ui.question.all_questions"}}
           </h5>
+          {{template "sort-btns" .}}
         </div>
-        <div class="border-top border-bottom-0 list-group list-group-flush">
+        <div class="rounded-0 list-group">
           {{range .data}}
-          <div class="border-bottom pt-3 pb-2 px-0 list-group-item">
+          <div class="bg-transparent py-3 px-0 border-start-0 border-end-0 list-group-item">
             <h5 class="text-wrap text-break">
               {{if $.useTitle }}
               <a class="link-dark" href="{{$.baseURL}}/questions/{{.ID}}/{{urlTitle .Title}}"
@@ -41,10 +42,9 @@
               {{end}}
             </h5>
             <div
-              class="d-flex flex-column flex-md-row align-items-md-center small text-secondary"
-            >
-              <div class="d-flex">
-                <div class="text-secondary me-1">
+              class="d-flex flex-wrap flex-column flex-md-row align-items-md-center small mb-2 text-secondary">
+              <div class="d-flex flex-wrap me-0 me-md-3">
+                <div class="d-flex align-items-center  text-secondary me-1">
                   <a href="{{$.baseURL}}/users/{{.Operator.Username}}"
                     ><span class="me-1 text-break"
                       >{{.Operator.DisplayName}}</span
@@ -61,22 +61,22 @@
                   {{translatorTimeFormat $.language $.timezone .OperatedAt}}
                 </time>
               </div>
-              <div class="ms-0 ms-md-3 mt-2 mt-md-0">
-                <span
-                  ><i class="br bi-hand-thumbs-up-fill"></i
-                  ><em class="fst-normal ms-1">{{.VoteCount}}</em></span
-                >
-                <span class="ms-3"
-                  ><i class="br bi-chat-square-text-fill"></i
-                  ><em class="fst-normal ms-1">{{.AnswerCount}}</em></span
-                >
-                <span class="summary-stat ms-3"
-                  ><i class="br bi-eye-fill"></i
-                  ><em class="fst-normal ms-1">{{.ViewCount}}</em></span
-                >
+              <div class="d-flex align-items-center mt-2 mt-md-0">
+                <div class="d-flex align-items-center flex-shrink-0">
+                  <i class="br bi-hand-thumbs-up-fill"></i>
+                  <em class="fst-normal ms-1">{{.VoteCount}}</em>
+                </div>
+                <div class="d-flex flex-shrink-0 align-items-center ms-3">
+                  <i class="br bi-chat-square-text-fill"></i>
+                  <em class="fst-normal ms-1">{{.AnswerCount}}</em>
+                </div>
+                <span class="summary-stat ms-3">
+                  <i class="br bi-eye-fill"></i>
+                  <em class="fst-normal ms-1">{{.ViewCount}}</em>
+                </span>
               </div>
             </div>
-            <div class="question-tags mx-n1 mt-2">
+            <div class="question-tags mx-n1">
               {{range .Tags }}
               <a
                 href="{{$.baseURL}}/tags/{{.SlugName}}"
diff --git a/ui/template/sort-btns.html b/ui/template/sort-btns.html
new file mode 100644
index 00000000..7da3485c
--- /dev/null
+++ b/ui/template/sort-btns.html
@@ -0,0 +1,19 @@
+{{define "sort-btns"}}
+<div role="group" class="btn-group btn-group-sm">
+  <a role="button" tabindex="0" href="?order=newest" class="text-capitalize fit-content btn active btn-outline-secondary">
+    {{translator ($.language) "ui.question.newest" }}
+  </a>
+  <a role="button" tabindex="0" href="?order=active" class="text-capitalize fit-content btn btn-outline-secondary">
+    {{translator ($.language) "ui.question.active" }}
+  </a>
+  <a role="button" tabindex="0" href="?order=hot" class="text-capitalize fit-content d-none d-md-block btn btn-outline-secondary">
+    {{translator ($.language) "ui.question.hot" }}
+  </a>
+  <a role="button" tabindex="0" href="?order=score" class="text-capitalize fit-content d-none d-md-block btn btn-outline-secondary">
+    {{translator ($.language) "ui.question.score" }}
+  </a>
+  <a role="button" tabindex="0" href="?order=unanswered" class="text-capitalize fit-content d-none d-md-block btn btn-outline-secondary" style="border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;">
+  {{translator ($.language) "ui.question.unanswered" }}
+  </a>
+</div>
+{{end}}
diff --git a/ui/template/tag-detail.html b/ui/template/tag-detail.html
index f3259949..a2e31498 100644
--- a/ui/template/tag-detail.html
+++ b/ui/template/tag-detail.html
@@ -19,14 +19,12 @@
 
 -->
 {{template "header" . }}
-<div class="pt-4 mt-2 mb-5 container">
-  <div class="justify-content-center row">
-    <div class="col-xxl-7 col-lg-8 col-sm-12">
+<div class="col-xl-10 col-lg-9 col-md-12">
+  <div class="pt-4 mb-5 row">
+    <div class="page-main flex-auto col">
       <div class="tag-box mb-5">
         <h3 class="mb-3">
-          <a class="link-dark" href="{{$.baseURL}}/tags/{{$.tag.SlugName}}"
-            >{{$.tag.SlugName}}</a
-          >
+          <a class="link-dark" href="{{$.baseURL}}/tags/{{$.tag.SlugName}}">{{$.tag.SlugName}}</a>
         </h3>
         <p class="text-break">{{formatLinkNofollow $.tag.ParsedText}}</p>
       </div>
@@ -36,62 +34,51 @@
             {{translator ($.language) "ui.question.x_questions" "count"
             .questionCount}}
           </h5>
+          {{template "sort-btns" .}}
         </div>
-        <div class="border-top border-bottom-0 list-group list-group-flush">
+        <div class="rounded list-group">
           {{range .questionList}}
-          <div class="border-bottom pt-3 pb-2 px-0 list-group-item">
+          <div class="bg-transparent py-3 px-0 border-start-0 border-end-0 list-group-item">
             <h5 class="text-wrap text-break">
               {{if $.useTitle }}
-              <a class="link-dark" href="{{$.baseURL}}/questions/{{.ID}}/{{urlTitle .Title}}"
-                >{{.Title}}</a
-              >
+              <a class="link-dark" href="{{$.baseURL}}/questions/{{.ID}}/{{urlTitle .Title}}">{{.Title}}</a>
               {{else}}
               <a class="link-dark" href="{{$.baseURL}}/questions/{{.ID}}">{{.Title}}</a>
               {{end}}
             </h5>
-            <div
-              class="d-flex flex-column flex-md-row align-items-md-center small text-secondary"
-            >
-              <div class="d-flex">
-                <div class="text-secondary me-1">
-                  <a href="{{$.baseURL}}/users/{{.Operator.Username}}"
-                    ><span class="me-1 text-break"
-                      >{{.Operator.DisplayName}}</span
-                    ></a
-                  ><span class="fw-bold" title="Reputation"
-                    >{{.Operator.Rank}}</span
-                  >
+            <div class="d-flex flex-wrap flex-column flex-md-row align-items-md-center small mb-2 text-secondary">
+              <div class="d-flex flex-wrap me-0 me-md-3">
+                <div class="d-flex align-items-center text-secondary me-1">
+                  <a href="{{$.baseURL}}/users/{{.Operator.Username}}"><span
+                      class="me-1 text-break">{{.Operator.DisplayName}}</span></a><span class="fw-bold"
+                    title="Reputation">{{.Operator.Rank}}</span>
                 </div>
                 •
-                <time
-                  class="text-secondary ms-1"
-                  datetime="{{timeFormatISO $.timezone .OperatedAt}}"
-                  title="{{translatorTimeFormatLongDate $.language $.timezone .OperatedAt}}"
-                  >{{translator $.language "ui.question.asked"}}
+                <time class="text-secondary ms-1" datetime="{{timeFormatISO $.timezone .OperatedAt}}"
+                  title="{{translatorTimeFormatLongDate $.language $.timezone .OperatedAt}}">{{translator $.language
+                  "ui.question.asked"}}
                   {{translatorTimeFormat $.language $.timezone .OperatedAt}}
                 </time>
               </div>
-              <div class="ms-0 ms-md-3 mt-2 mt-md-0">
-                <span
-                  ><i class="br bi-hand-thumbs-up-fill"></i
-                  ><em class="fst-normal ms-1">{{.VoteCount}}</em></span
-                >
-                <span class="ms-3"
-                  ><i class="br bi-chat-square-text-fill"></i
-                  ><em class="fst-normal ms-1">{{.AnswerCount}}</em></span
-                >
-                <span class="summary-stat ms-3"
-                  ><i class="br bi-eye-fill"></i
-                  ><em class="fst-normal ms-1">{{.ViewCount}}</em></span
-                >
+              <div class="d-flex align-items-center mt-2 mt-md-0">
+                <div class="d-flex align-items-center flex-shrink-0">
+                  <i class="br bi-hand-thumbs-up-fill"></i>
+                  <em class="fst-normal ms-1">{{.VoteCount}}</em>
+                </div>
+                <div class="d-flex flex-shrink-0 align-items-center ms-3">
+                  <i class="br bi-chat-square-text-fill"></i>
+                  <em class="fst-normal ms-1">{{.AnswerCount}}</em>
+                </div>
+                <span class="summary-stat ms-3 flex-shrink-0">
+                  <i class="br bi-eye-fill"></i>
+                  <em class="fst-normal ms-1">{{.ViewCount}}</em>
+                </span>
               </div>
             </div>
-            <div class="question-tags mx-n1 mt-2">
+            <div class="question-tags mx-n1">
               {{range .Tags }}
-              <a
-                href="{{$.baseURL}}/tags/{{.SlugName}}"
-                class="badge-tag rounded-1 {{if .Reserved}}badge-tag-reserved{{end}} {{if .Recommend}}badge-tag-required{{end}} m-1"
-              >
+              <a href="{{$.baseURL}}/tags/{{.SlugName}}"
+                class="badge-tag rounded-1 {{if .Reserved}}badge-tag-reserved{{end}} {{if .Recommend}}badge-tag-required{{end}} m-1">
                 <span class="">{{.SlugName}}</span>
               </a>
               {{end}}
@@ -99,10 +86,14 @@
           </div>
           {{end}}
         </div>
-        <div class="mt-4 mb-2 d-flex justify-content-center"></div>
+        <div class="mt-4 mb-2 d-flex justify-content-center">
+          {{template "page" .}}
+        </div>
       </div>
     </div>
-    <div class="d-flex justify-content-center">{{template "page" .}}</div>
+    <div class="page-right-side mt-4 mt-xl-0 col">
+      {{template "hot-question" .}}
+    </div>
   </div>
 </div>
 {{template "footer" .}}
diff --git a/ui/template/tags.html b/ui/template/tags.html
index 292fd477..8821dd7b 100644
--- a/ui/template/tags.html
+++ b/ui/template/tags.html
@@ -19,48 +19,58 @@
 
 -->
 {{template "header" . }}
-<div style="
-            position: fixed;
-            top: 90px;
-            left: 0px;
-            right: 0px;
-            margin: auto;
-            z-index: 5;
-          ">
-    <div class="d-flex justify-content-center"></div>
-</div>
-<div class="py-3 my-3 container">
-    <div class="mb-4 d-flex justify-content-center row">
-        <div class="col-xxl-10 col-sm-12">
-            <h3 class="mb-4">{{translator $.language "ui.page_title.tags"}}</h3>
-        </div>
-        <div class="mt-4 col-xxl-10 col-sm-12">
-            <div class="row">
-                {{ range .data.List }}
-                <div class="mb-4 col-lg-3 col-md-4 col-sm-6 col-12">
-                    <div class="h-100 card">
-                        <div class="d-flex flex-column align-items-start card-body">
-                            <a href="{{$.baseURL}}/tags/{{.SlugName}}" class="badge-tag rounded-1 mb-3"><span
-                                    class="">{{.SlugName}}</span></a>
-                            <p class="small flex-fill text-break text-wrap text-truncate-4">{{formatLinkNofollow .ParsedText}}
-                            </p>
-                            <div class="d-flex align-items-center">
-                                <span class="text-secondary small text-nowrap">{{.QuestionCount}}
-                                    {{translator $.language "ui.tags.tag_label"}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {{ end }}
-
-            </div>
-            <div class="d-flex justify-content-center">
-               {{template "page" .}}
+<div class="col-xl-10 col-lg-9 col-md-12">
+  <div class="py-4 mb-4 row">
+    <div class="col-xxl-12">
+      <h3 class="mb-4">
+        {{translator $.language "ui.page_title.tags"}}
+      </h3>
+      <div class="d-block d-sm-flex justify-content-between align-items-center flex-wrap">
+        <div class="mb-3 mb-sm-0 hstack gap-3">
+          <form class="">
+            <div>
+              <input placeholder="{{translator $.language "ui.tags.search_placeholder"}}" type="search" id="formBasicEmail" class="form-control form-control-sm" value="">
             </div>
+          </form>
         </div>
+        <div role="group" class="btn-group btn-group-sm">
+          <a role="button" tabindex="0" href="?sort=popular" class="text-capitalize fit-content btn active btn-outline-secondary">
+            {{translator $.language "ui.tags.sort_buttons.popular"}}
+          </a>
+          <a role="button" tabindex="0" href="?sort=name" class="text-capitalize fit-content btn btn-outline-secondary">
+            {{translator $.language "ui.tags.sort_buttons.name"}}
+          </a>
+          <a role="button" tabindex="0" href="?sort=newest" class="text-capitalize fit-content btn btn-outline-secondary">
+            {{translator $.language "ui.tags.sort_buttons.newest"}}
+          </a>
+        </div>
+      </div>
     </div>
+    <div class="mt-4 col-sm-12">
+      <div class="row">
+        {{ range .data.List }}
+        <div class="mb-4 col-lg-3 col-md-4 col-sm-6 col-12">
+          <div class="h-100 card">
+            <div class="d-flex flex-column align-items-start card-body">
+              <a href="{{$.baseURL}}/tags/{{.SlugName}}" class="badge-tag rounded-1 mb-3"><span
+                  class="">{{.SlugName}}</span></a>
+              <div class="small flex-fill text-break text-wrap text-truncate-3 reset-p mb-3">  {{formatLinkNofollow .ParsedText}}
+              </div>
+              <div class="d-flex align-items-center">
+                <span class="text-secondary small text-nowrap">{{.QuestionCount}}
+                  {{translator $.language "ui.tags.tag_label"}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        {{ end }}
+
+      </div>
+      <div class="d-flex justify-content-center">
+        {{template "page" .}}
+      </div>
+    </div>
+  </div>
 </div>
 
-
-
 {{template "footer" .}}