This is an automated email from the ASF dual-hosted git repository. shuai pushed a commit to branch ui-optimization in repository https://gitbox.apache.org/repos/asf/answer.git
commit 308f3cf32e63c8697c1c3809f4ad7587c622d3f8 Author: shuai <[email protected]> AuthorDate: Thu Apr 3 17:37:47 2025 +0800 fix: uypdate seo template codes --- ui/template/footer.html | 24 +-- ui/template/header.html | 15 +- ui/template/homepage.html | 154 +++++++++---------- ui/template/question-detail.html | 312 ++++++++++++++++++++------------------- ui/template/question.html | 79 +++++----- ui/template/sidenav.html | 35 +++-- ui/template/sort-btns.html | 37 ++++- ui/template/tag-detail.html | 132 +++++++++-------- ui/template/tags.html | 88 +++++------ 9 files changed, 462 insertions(+), 414 deletions(-) diff --git a/ui/template/footer.html b/ui/template/footer.html index d69b164f..d9c69017 100644 --- a/ui/template/footer.html +++ b/ui/template/footer.html @@ -20,15 +20,21 @@ --> {{define "footer"}} </div> - <footer class="bg-light py-3"> - <div class="container"> - <p class="text-center mb-0 small text-secondary"> - {{$cc := (join " " .siteinfo.Year .siteinfo.General.Name) -}} - {{- $ft := translator $.language "ui.footer.build_on" "cc" $cc -}} - {{templateHTML (replaceHTMLTag $ft "<a href=\"https://answer.apache.org/\"; target=\"_blank\"> Answer </a>")}} - </p> - </div> - </footer> + <footer class="py-3 bg-light w-100"> + <p class="text-center mb-0 small"> + <a class="me-3" href="/tos" data-discover="true"> + {{translator $.language "ui.admin.legal.terms_of_service.label"}} + </a> + <a href="/privacy" data-discover="true"> + {{translator $.language "ui.admin.legal.privacy_policy.label"}} + </a> + </p> + <p class="text-center mb-0 small text-secondary"> + {{$cc := (join " " .siteinfo.Year .siteinfo.General.Name) -}} + {{- $ft := translator $.language "ui.footer.build_on" "cc" $cc -}} + {{templateHTML (replaceHTMLTag $ft "<a href=\"https://answer.apache.org/\"; target=\"_blank\"> Answer </a>")}} + </p> + </footer> </div> <!--customize_footer--> {{if .FooterCode }}{{.FooterCode | templateHTML}}{{end}} diff --git a/ui/template/header.html b/ui/template/header.html index 329365fd..f6529b8d 100644 --- a/ui/template/header.html +++ b/ui/template/header.html @@ -145,10 +145,9 @@ </div> <nav id="header" class="sticky-top theme-colored navbar navbar-expand-lg navbar-dark"> - <div class="d-flex align-items-center container"> + <div class="w-100 d-flex align-items-center px-3"> <button aria-controls="navBarContent" - id="navBarToggle" type="button" aria-label="Toggle navigation" class="answer-navBar me-2 navbar-toggler collapsed" @@ -168,9 +167,8 @@ </a> {{end}} </div> - <div class="me-auto navbar-collapse collapse" id="navBarContent"> - <hr class="hr xl-none mb-2" style="margin-top: 12px" /> - <div class="ps-0 col-lg-8"> + <div class="d-none d-xl-block flex-grow-1 me-auto"> + <div class="d-none d-xl-block ps-0 col-lg-8"> <form action="/search" class="w-100 maxw-400"> <input placeholder="Search" name="q" type="search" class="placeholder-search form-control" value=""> </form> @@ -190,11 +188,14 @@ </div> </nav> <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"> + <div class="d-flex"> + <div class="position-sticky px-3 border-end pt-4 d-none d-xl-block" id="pcSideNav"> {{template "sidenav" . }} {{end}} </div> + <div class="flex-fill w-100"> + + </div> </div> </div> diff --git a/ui/template/homepage.html b/ui/template/homepage.html index 84887a09..0fdc63a4 100644 --- a/ui/template/homepage.html +++ b/ui/template/homepage.html @@ -19,90 +19,92 @@ --> {{template "header" . }} -<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 class="d-flex justify-content-center px-0 px-md-4"> + <div class="answer-container"> + <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 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="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="mb-5 text-break fmt">{{.bio}}</div> - {{else}} - <div class="text-center py-5 mb-4">{{translator $.language "ui.personal.about_me_empty"}}</div> - {{end}} - <div class="mb-4 row"> - <div class="mb-4 col-md-6 col-sm-12"> - <h5 class="mb-3">Top Answers</h5> - <ol class="list-unstyled"> - {{ range .topAnswers }} - <li class="mb-2"> - <a class="text-truncate-1" href="{{$.baseURL}}/questions/{{.QuestionID}}/{{.AnswerID}}">{{.QuestionInfo.Title}}</a> - <div class="text-secondary small"> - <i class="br bi-hand-thumbs-up-fill me-1"></i><span>{{.VoteCount}} votes</span> - </div> - </li> - {{ end }} - </ol> - </div> - <div class="col-md-6 col-sm-12"> - <h5 class="mb-3">Top Questions</h5> - <ol class="list-unstyled"> - {{ range .topQuestions }} - <li class="mb-2"> - <a class="text-truncate-1" href="{{$.baseURL}}/questions/{{.ID}}">{{.Title}}</a> - <div class="text-secondary small"> - <i class="br bi-hand-thumbs-up-fill me-1"></i><span> {{.VoteCount}} votes</span> - <div class="d-inline-block text-secondary ms-3 small text-success"> - <i class="br bi-check-circle-fill"></i><span> {{.AnswerCount}} answers</span> - </div> - </div> - </li> - {{ end }} - </ol> - </div> - </div> - </div> - </div> - <div class="mt-5 mt-lg-0 col-xxl-3 col-lg-4 col-sm-12"> + <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="mb-5 text-break fmt">{{.bio}}</div> + {{else}} + <div class="text-center py-5 mb-4">{{translator $.language "ui.personal.about_me_empty"}}</div> + {{end}} + <div class="mb-4 row"> + <div class="mb-4 col-md-6 col-sm-12"> + <h5 class="mb-3">Top Answers</h5> + <ol class="list-unstyled"> + {{ range .topAnswers }} + <li class="mb-2"> + <a class="text-truncate-1" href="{{$.baseURL}}/questions/{{.QuestionID}}/{{.AnswerID}}">{{.QuestionInfo.Title}}</a> + <div class="text-secondary small"> + <i class="br bi-hand-thumbs-up-fill me-1"></i><span>{{.VoteCount}} votes</span> + </div> + </li> + {{ end }} + </ol> + </div> + <div class="col-md-6 col-sm-12"> + <h5 class="mb-3">Top Questions</h5> + <ol class="list-unstyled"> + {{ range .topQuestions }} + <li class="mb-2"> + <a class="text-truncate-1" href="{{$.baseURL}}/questions/{{.ID}}">{{.Title}}</a> + <div class="text-secondary small"> + <i class="br bi-hand-thumbs-up-fill me-1"></i><span> {{.VoteCount}} votes</span> + <div class="d-inline-block text-secondary ms-3 small text-success"> + <i class="br bi-check-circle-fill"></i><span> {{.AnswerCount}} answers</span> + </div> + </div> + </li> + {{ end }} + </ol> + </div> + </div> + </div> + </div> + <div class="mt-5 mt-lg-0 col-xxl-3 col-lg-4 col-sm-12"> - </div> + </div> + </div> </div> </div> </div> diff --git a/ui/template/question-detail.html b/ui/template/question-detail.html index fcf98c3d..e0be5318 100644 --- a/ui/template/question-detail.html +++ b/ui/template/question-detail.html @@ -19,187 +19,189 @@ --> {{template "header" . }} -<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 }} - <a class="link-dark" href="{{$.baseURL}}/questions/{{.detail.ID}}/{{urlTitle .detail.Title}}">{{.detail.Title}}</a> - {{else}} - <a class="link-dark" href="{{$.baseURL}}/questions/{{.detail.ID}}">{{.detail.Title}}</a> - {{end}} - </h1> - <div - class="d-flex flex-wrap align-items-center small mb-3 text-secondary"> - <time class="me-3" - datetime="{{timeFormatISO $.timezone .detail.CreateTime}}" - title="{{translatorTimeFormatLongDate $.language $.timezone .detail.CreateTime}}">{{translator $.language "ui.question_detail.Asked"}} {{translatorTimeFormat $.language $.timezone .detail.CreateTime}} - </time> - <time class="me-3" - datetime="{{timeFormatISO $.timezone .detail.UpdateTime}}" - title="{{translatorTimeFormatLongDate $.language $.timezone .detail.UpdateTime}}">{{translator $.language "ui.question_detail.update"}} {{translatorTimeFormat $.language $.timezone .detail.UpdateTime}} - </time> - <div class="me-3">{{translator $.language "ui.question_detail.Views"}} {{.detail.ViewCount}}</div> +<div class="d-flex justify-content-center px-0 px-md-4"> + <div class="answer-container"> + <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 }} + <a class="link-dark" href="{{$.baseURL}}/questions/{{.detail.ID}}/{{urlTitle .detail.Title}}">{{.detail.Title}}</a> + {{else}} + <a class="link-dark" href="{{$.baseURL}}/questions/{{.detail.ID}}">{{.detail.Title}}</a> + {{end}} + </h1> + <div + class="d-flex flex-wrap align-items-center small mb-3 text-secondary"> + <time class="me-3" + datetime="{{timeFormatISO $.timezone .detail.CreateTime}}" + title="{{translatorTimeFormatLongDate $.language $.timezone .detail.CreateTime}}">{{translator $.language "ui.question_detail.Asked"}} {{translatorTimeFormat $.language $.timezone .detail.CreateTime}} + </time> + <time class="me-3" + datetime="{{timeFormatISO $.timezone .detail.UpdateTime}}" + title="{{translatorTimeFormatLongDate $.language $.timezone .detail.UpdateTime}}">{{translator $.language "ui.question_detail.update"}} {{translatorTimeFormat $.language $.timezone .detail.UpdateTime}} + </time> + <div class="me-3">{{translator $.language "ui.question_detail.Views"}} {{.detail.ViewCount}}</div> - </div> - <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"> - <span class="">{{.SlugName}}</span> - </a> - {{end}} - </div> - <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"> - <i class="br bi-hand-thumbs-up-fill"></i></button> - <button type="button" - disabled="" class="btn btn-outline-dark text-body"> - {{.detail.VoteCount}} - </button> - <button type="button" class="btn btn-outline-secondary"> - <i class="br bi-hand-thumbs-down-fill"></i> - </button> </div> - <button type="button" class="btn btn-outline-secondary ms-3"> - <i class="br bi-bookmark-fill"></i><span style="padding-left: 10px">{{.detail.CollectionCount}}</span> - </button> - </div> - <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 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}}" - title="{{translatorTimeFormatLongDate $.language $.timezone .detail.UpdateTime}}"> - {{translator $.language "ui.question_detail.edit"}} {{translatorTimeFormat $.language $.timezone .detail.UpdateTime}} - </time> + <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"> + <span class="">{{.SlugName}}</span> </a> + {{end}} </div> - <div style="min-width: 196px;"> - <div class="d-flex"> - <a href="{{$.baseURL}}/users/{{.detail.UserInfo.Username}}"><img - src="{{.detail.UserInfo.Avatar}}" - width="40px" height="40px" - class="rounded me-2 d-none d-md-block" - alt=""/><img - src="{{.detail.UserInfo.Avatar}}" - width="24px" height="24px" - class="rounded me-2 d-block d-md-none" - alt=""/></a> - <div - 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 - class="fw-bold" title="Reputation">{{.detail.UserInfo.Rank}}</span> - </div> - <a href="{{$.baseURL}}/posts/{{.detail.ID}}/timeline"> - <time class="link-secondary" - datetime="{{timeFormatISO $.timezone .detail.CreateTime}}" - title="{{translatorTimeFormatLongDate $.language $.timezone .detail.CreateTime}}">{{translator $.language "ui.question_detail.asked"}} {{translatorTimeFormat $.language $.timezone .detail.CreateTime}} - </time> - </a> - </div> - </div> + <div class="img-viewer"> + <article class="fmt text-break text-wrap mt-4"> + {{formatLinkNofollow .detail.HTML}} + </article> </div> - </div> - <div class="comments-wrap"> - {{template "comment" (wrapComments (index $.comments $.detail.ID) $.language $.timezone)}} - </div> - </div> - <div class="d-flex align-items-center justify-content-between mt-5 mb-3" - id="answerHeader"> - <h5 class="mb-0">{{.detail.AnswerCount}} Answers</h5> - </div> - {{range .answers}} - <div class="answer-item py-4"> - <article class="fmt"> - {{formatLinkNofollow .HTML}} - </article> - <div class="d-flex align-items-center mt-4"> - <div class=""> + <div class="mt-4"> <div role="group" class="btn-group"> <button type="button" class="btn btn-outline-secondary"> <i class="br bi-hand-thumbs-up-fill"></i></button> <button type="button" disabled="" class="btn btn-outline-dark text-body"> - {{.VoteCount}} + {{.detail.VoteCount}} </button> <button type="button" class="btn btn-outline-secondary"> <i class="br bi-hand-thumbs-down-fill"></i> </button> </div> + <button type="button" class="btn btn-outline-secondary ms-3"> + <i class="br bi-bookmark-fill"></i><span style="padding-left: 10px">{{.detail.CollectionCount}}</span> + </button> </div> - {{if eq 2 .Accepted}} - <button type="button" disabled="" - class="ms-3 active opacity-100 bg-success text-white btn btn-outline-success"> - <i class="br bi-check-circle-fill me-2"></i><span>{{translator $.language "ui.question_detail.answers.btn_accepted"}}</span> - </button> - {{end}} - </div> - <div class="mt-4 mb-3 row"> - <div class="mb-3 mb-md-0 col"> - <div class="d-flex align-items-center"> + <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 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}}" + title="{{translatorTimeFormatLongDate $.language $.timezone .detail.UpdateTime}}"> + {{translator $.language "ui.question_detail.edit"}} {{translatorTimeFormat $.language $.timezone .detail.UpdateTime}} + </time> + </a> + </div> + <div style="min-width: 196px;"> + <div class="d-flex"> + <a href="{{$.baseURL}}/users/{{.detail.UserInfo.Username}}"><img + src="{{.detail.UserInfo.Avatar}}" + width="40px" height="40px" + class="rounded me-2 d-none d-md-block" + alt=""/><img + src="{{.detail.UserInfo.Avatar}}" + width="24px" height="24px" + class="rounded me-2 d-block d-md-none" + alt=""/></a> + <div + 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 + class="fw-bold" title="Reputation">{{.detail.UserInfo.Rank}}</span> + </div> + <a href="{{$.baseURL}}/posts/{{.detail.ID}}/timeline"> + <time class="link-secondary" + datetime="{{timeFormatISO $.timezone .detail.CreateTime}}" + title="{{translatorTimeFormatLongDate $.language $.timezone .detail.CreateTime}}">{{translator $.language "ui.question_detail.asked"}} {{translatorTimeFormat $.language $.timezone .detail.CreateTime}} + </time> + </a> + </div> + </div> + </div> </div> - <div class="mb-3 mb-md-0 col-lg-3"> - <a href="{{$.baseURL}}/posts/{{$.detail.ID}}/{{.ID}}/timeline"> - <time - class="link-secondary small" - datetime="{{timeFormatISO $.timezone .UpdateTime}}" - title="{{translatorTimeFormatLongDate $.language $.timezone .UpdateTime}}"> - {{translator $.language "ui.question_detail.edit"}} {{translatorTimeFormat $.language $.timezone .UpdateTime}} - </time> - </a> + <div class="comments-wrap"> + {{template "comment" (wrapComments (index $.comments $.detail.ID) $.language $.timezone)}} </div> - <div class="col-lg-4"> - <div class="d-flex"> - <a href="{{$.baseURL}}/users/{{.UserInfo.Username}}"><img - src="{{.UserInfo.Avatar}}" - width="40px" height="40px" - class="rounded me-2 d-none d-md-block" - alt=""/><img - src="{{.UserInfo.Avatar}}" - width="24px" height="24px" - class="rounded me-2 d-block d-md-none" - alt=""/></a> - <div - 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 - class="fw-bold" title="Reputation">{{.UserInfo.Rank}}</span> + </div> + <div class="d-flex align-items-center justify-content-between mt-5 mb-3" + id="answerHeader"> + <h5 class="mb-0">{{.detail.AnswerCount}} Answers</h5> + </div> + {{range .answers}} + <div class="answer-item py-4"> + <article class="fmt"> + {{formatLinkNofollow .HTML}} + </article> + <div class="d-flex align-items-center mt-4"> + <div class=""> + <div role="group" class="btn-group"> + <button type="button" class="btn btn-outline-secondary"> + <i class="br bi-hand-thumbs-up-fill"></i></button> + <button type="button" + disabled="" class="btn btn-outline-dark text-body"> + {{.VoteCount}} + </button> + <button type="button" class="btn btn-outline-secondary"> + <i class="br bi-hand-thumbs-down-fill"></i> + </button> + </div> + </div> + {{if eq 2 .Accepted}} + <button type="button" disabled="" + class="ms-3 active opacity-100 bg-success text-white btn btn-outline-success"> + <i class="br bi-check-circle-fill me-2"></i><span>{{translator $.language "ui.question_detail.answers.btn_accepted"}}</span> + </button> + {{end}} + </div> + <div class="mt-4 mb-3 row"> + <div class="mb-3 mb-md-0 col"> + <div class="d-flex align-items-center"> + + </div> + </div> + <div class="mb-3 mb-md-0 col-lg-3"> + <a href="{{$.baseURL}}/posts/{{$.detail.ID}}/{{.ID}}/timeline"> + <time + class="link-secondary small" + datetime="{{timeFormatISO $.timezone .UpdateTime}}" + title="{{translatorTimeFormatLongDate $.language $.timezone .UpdateTime}}"> + {{translator $.language "ui.question_detail.edit"}} {{translatorTimeFormat $.language $.timezone .UpdateTime}} + </time> + </a> + </div> + <div class="col-lg-4"> + <div class="d-flex"> + <a href="{{$.baseURL}}/users/{{.UserInfo.Username}}"><img + src="{{.UserInfo.Avatar}}" + width="40px" height="40px" + class="rounded me-2 d-none d-md-block" + alt=""/><img + src="{{.UserInfo.Avatar}}" + width="24px" height="24px" + class="rounded me-2 d-block d-md-none" + alt=""/></a> + <div + 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 + class="fw-bold" title="Reputation">{{.UserInfo.Rank}}</span> + </div> + <a href="{{$.baseURL}}/posts/{{$.detail.ID}}/{{.ID}}/timeline"> + <time + class="link-secondary" + datetime="{{timeFormatISO $.timezone .CreateTime}}" + title="{{translatorTimeFormatLongDate $.language $.timezone .CreateTime}}">{{translator $.language "ui.question_detail.answered"}} {{translatorTimeFormat $.language $.timezone .CreateTime}} + </time> + </a> </div> - <a href="{{$.baseURL}}/posts/{{$.detail.ID}}/{{.ID}}/timeline"> - <time - class="link-secondary" - datetime="{{timeFormatISO $.timezone .CreateTime}}" - title="{{translatorTimeFormatLongDate $.language $.timezone .CreateTime}}">{{translator $.language "ui.question_detail.answered"}} {{translatorTimeFormat $.language $.timezone .CreateTime}} - </time> - </a> </div> </div> </div> + <div class="comments-wrap"> + {{template "comment" (wrapComments (index $.comments .ID) $.language $.timezone)}} + </div> </div> - <div class="comments-wrap"> - {{template "comment" (wrapComments (index $.comments .ID) $.language $.timezone)}} - </div> + {{end}} + </div> + <div class="page-right-side mt-4 mt-xl-0 col"> + {{template "related-question" .}} </div> - {{end}} - </div> - <div class="page-right-side mt-4 mt-xl-0 col"> - {{template "related-question" .}} </div> </div> </div> diff --git a/ui/template/question.html b/ui/template/question.html index 198802e6..1fa19dcf 100644 --- a/ui/template/question.html +++ b/ui/template/question.html @@ -19,7 +19,7 @@ --> {{template "header" . }} -<div class="col-xl-10 col-lg-9 col-md-12"> +<div class="d-flex justify-content-center px-0 px-md-4"> <div class="pt-4 mb-5 row"> <div class="page-main flex-auto col"> <div> @@ -31,36 +31,57 @@ </div> <div class="rounded-0 list-group"> {{range .data}} - <div class="bg-transparent py-3 px-0 border-start-0 border-end-0 list-group-item"> + <div class="py-3 px-2 border-start-0 border-end-0 position-relative pointer list-group-item list-group-item-action"> + <div class="d-flex flex-wrap text-secondary small mb-12"> + <div class="d-flex align-items-center text-secondary me-1"> + <a href="{{$.baseURL}}/users/{{.Operator.Username}}"> + <img src="{{$.baseURL}}/users/{{.Operator.Avatar}}" width="24px" height="24px" class="rounded-circle me-1" alt="shuai" data-processed="true"> + <span class="me-1 name-ellipsis" style="max-width: 300px;">{{.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"}} + {{translatorTimeFormat $.language $.timezone .OperatedAt}} + </time> + </div> + <h5 class="text-wrap text-break"> {{if $.useTitle }} - <a class="link-dark" href="{{$.baseURL}}/questions/{{.ID}}/{{urlTitle .Title}}" + <a class="link-dark d-block" href="{{$.baseURL}}/questions/{{.ID}}/{{urlTitle .Title}}" >{{.Title}}</a > {{else}} - <a class="link-dark" href="{{$.baseURL}}/questions/{{.ID}}">{{.Title}}</a> + <a class="link-dark d-block" href="{{$.baseURL}}/questions/{{.ID}}">{{.Title}}</a> {{end}} </h5> - <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"}} - {{translatorTimeFormat $.language $.timezone .OperatedAt}} - </time> - </div> + + <div class="text-truncate-2 mb-2"> + {{if $.useTitle }} + <a class="d-block small text-body" href="{{$.baseURL}}/questions/{{.ID}}/{{urlTitle .Title}}" + >{{.Description}}</a + > + {{else}} + <a class="d-block small text-body" href="{{$.baseURL}}/questions/{{.ID}}">{{.Description}}</a> + {{end}} + </div> + + <div class="question-tags mb-12"> + {{range .Tags }} + <a + href="{{$.baseURL}}/tags/{{.SlugName}}" + class="badge-tag rounded-1 {{if .Reserved}}badge-tag-reserved{{end}} {{if .Recommend}}badge-tag-required{{end}} me-1" + > + <span class="">{{.SlugName}}</span> + </a> + {{end}} + </div> + + <div class="small text-secondary"> <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> @@ -76,16 +97,6 @@ </span> </div> </div> - <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" - > - <span class="">{{.SlugName}}</span> - </a> - {{end}} - </div> </div> {{end}} </div> diff --git a/ui/template/sidenav.html b/ui/template/sidenav.html index aabf6308..3c075002 100644 --- a/ui/template/sidenav.html +++ b/ui/template/sidenav.html @@ -19,23 +19,22 @@ --> {{define "sidenav"}} -<div id="sideNav" class="position-relative d-none d-xl-block col-xl-2 col-lg-3 col-md-12"> - <div class="nav-wrap pt-4"> - <div class="flex-column nav nav-pills"> - <a class="nav-link active" href="{{$.baseURL}}/questions"> - <i class="br bi-question-circle-fill me-2"></i> - <span>{{translator $.language "ui.header.nav.question"}}</span> - </a> - <a href="/tags" data-rr-ui-event-key="/tags" class="nav-link"> - <i class="br bi-tags-fill me-2"></i> - <span>{{translator $.language "ui.header.nav.tag"}}</span> - </a> - <a class="nav-link" href="{{$.baseURL}}/users"> - <i class="br bi-people-fill me-2"></i> - <span>{{translator $.language "ui.header.nav.user"}}</span> - </a> - </div> - </div> - <div class="side-nav-right-line"></div> +<div class="flex-column nav nav-pills"> + <a class="nav-link active" href="{{$.baseURL}}/questions"> + <i class="br bi-question-circle-fill me-2"></i> + <span>{{translator $.language "ui.header.nav.question"}}</span> + </a> + <a href="{{$.baseURL}}/tags" data-rr-ui-event-key="/tags" class="nav-link"> + <i class="br bi-tags-fill me-2"></i> + <span>{{translator $.language "ui.header.nav.tag"}}</span> + </a> + <a class="nav-link" href="{{$.baseURL}}/users"> + <i class="br bi-people-fill me-2"></i> + <span>{{translator $.language "ui.header.nav.user"}}</span> + </a> + <a class="nav-link" href="{{$.baseURL}}/badges"> + <i class="br bi-people-fill me-2"></i> + <span>{{translator $.language "ui.header.nav.badges"}}</span> + </a> </div> {{end}} diff --git a/ui/template/sort-btns.html b/ui/template/sort-btns.html index 3ea41ec2..a981d150 100644 --- a/ui/template/sort-btns.html +++ b/ui/template/sort-btns.html @@ -19,21 +19,44 @@ --> {{define "sort-btns"}} -<div role="group" class="btn-group btn-group-sm"> +<div role="group" class="md-show me-2 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"> + <!-- <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> --> <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" }} + {{translator ($.language) "ui.question.unanswered" }} + </a> + <a role="button" tabindex="0" href="?order=frequent" 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.frequent" }} </a> + <div role="group" class="show dropdown btn-group"> + <button type="button" aria-expanded="true" class="dropdown-toggle show btn btn-outline-secondary btn-sm"> + {{translator ($.language) "ui.btns.more" }} + </button> + <div x-placement="bottom-start" class="dropdown-menu show" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="bottom-start" style="position: absolute; inset: 0px auto auto 0px; transform: translate(0px, 33px);"> + <a href="?order=score" aria-selected="false" class="text-capitalize dropdown-item"> {{translator ($.language) "ui.question.score" }}</a> + </div> + </div> +</div> + +<div class="dropdown"> + <button type="button" id="react-aria8245013726-:r5:" aria-expanded="false" class="dropdown-toggle btn btn-outline-secondary btn-sm"><i class="br bi-view-stacked"></i></button> + <div x-placement="bottom-end" aria-labelledby="react-aria8245013726-:r5:" class="dropdown-menu dropdown-menu-end" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; transform: translate(0px, 33px);"> + <div class="dropdown-header" role="heading"> + {{translator ($.language) "ui.btns.view" }} + </div> + <a aria-selected="true" data-rr-ui-dropdown-item="" class="dropdown-item active" role="button" tabindex="0" href="#" data-footnote-fixed="true"> + {{translator ($.language) "ui.btns.card" }} + </a> + <a aria-selected="false" data-rr-ui-dropdown-item="" class="dropdown-item" role="button" tabindex="0" href="#" data-footnote-fixed="true"> + {{translator ($.language) "ui.btns.compact" }} + </a> + </div> </div> {{end}} diff --git a/ui/template/tag-detail.html b/ui/template/tag-detail.html index f9460411..59561470 100644 --- a/ui/template/tag-detail.html +++ b/ui/template/tag-detail.html @@ -19,80 +19,82 @@ --> {{template "header" . }} -<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> - </h3> - <p class="text-break">{{formatLinkNofollow $.tag.ParsedText}}</p> - </div> - <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.x_questions" "count" - .questionCount}} - </h5> - {{template "sort-btns" .}} +<div class="d-flex justify-content-center px-0 px-md-4"> + <div class="answer-container"> + <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> + </h3> + <p class="text-break">{{formatLinkNofollow $.tag.ParsedText}}</p> </div> - <div class="rounded list-group"> - {{range .questionList}} - <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> - {{else}} - <a class="link-dark" href="{{$.baseURL}}/questions/{{.ID}}">{{.Title}}</a> - {{end}} + <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.x_questions" "count" + .questionCount}} </h5> - <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"}} - {{translatorTimeFormat $.language $.timezone .OperatedAt}} - </time> - </div> - <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> + {{template "sort-btns" .}} + </div> + <div class="rounded list-group"> + {{range .questionList}} + <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> + {{else}} + <a class="link-dark" href="{{$.baseURL}}/questions/{{.ID}}">{{.Title}}</a> + {{end}} + </h5> + <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"}} + {{translatorTimeFormat $.language $.timezone .OperatedAt}} + </time> </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 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-bar-chart-fill"></i> + <em class="fst-normal ms-1">{{.ViewCount}}</em> + </span> </div> - <span class="summary-stat ms-3 flex-shrink-0"> - <i class="br bi-bar-chart-fill"></i> - <em class="fst-normal ms-1">{{.ViewCount}}</em> - </span> + </div> + <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"> + <span class="">{{.SlugName}}</span> + </a> + {{end}} </div> </div> - <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"> - <span class="">{{.SlugName}}</span> - </a> - {{end}} - </div> + {{end}} + </div> + <div class="mt-4 mb-2 d-flex justify-content-center"> + {{template "page" .}} </div> - {{end}} - </div> - <div class="mt-4 mb-2 d-flex justify-content-center"> - {{template "page" .}} </div> </div> - </div> - <div class="page-right-side mt-4 mt-xl-0 col"> - {{template "hot-question" .}} + <div class="page-right-side mt-4 mt-xl-0 col"> + {{template "hot-question" .}} + </div> </div> </div> </div> diff --git a/ui/template/tags.html b/ui/template/tags.html index 8821dd7b..075f4a31 100644 --- a/ui/template/tags.html +++ b/ui/template/tags.html @@ -19,55 +19,57 @@ --> {{template "header" . }} -<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 class="d-flex justify-content-center px-0 px-md-4"> + <div class="answer-container"> + <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> - <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 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> - </div> - {{ end }} + {{ end }} - </div> - <div class="d-flex justify-content-center"> - {{template "page" .}} + </div> + <div class="d-flex justify-content-center"> + {{template "page" .}} + </div> </div> </div> </div>
