Simplify 404/500 page (#31409)

This commit is contained in:
wxiaoguang 2024-06-24 01:45:21 +08:00 committed by GitHub
parent 6a96deb589
commit f4921b9daa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 39 additions and 19 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

View File

@ -1,10 +1,16 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content {{if .IsRepo}}repository{{end}}">
{{if .IsRepo}}{{template "repo/header" .}}{{end}}
<div class="ui container tw-text-center">
<img class="tw-max-w-[80vw] tw-py-16" src="{{AssetUrlPrefix}}/img/404.png" alt="404">
<p>{{if .NotFoundPrompt}}{{.NotFoundPrompt}}{{else}}{{ctx.Locale.Tr "error404"}}{{end}}</p>
{{if .NotFoundGoBackURL}}<a class="ui button" href="{{.NotFoundGoBackURL}}">{{ctx.Locale.Tr "go_back"}}</a>{{end}}
<div class="ui container">
<div class="status-page-error">
<div class="status-page-error-title">404 Not Found</div>
<div class="tw-text-center">
<div class="tw-my-4">{{if .NotFoundPrompt}}{{.NotFoundPrompt}}{{else}}{{ctx.Locale.Tr "error404"}}{{end}}</div>
{{if .NotFoundGoBackURL}}
<a class="tw-block tw-my-4" href="{{.NotFoundGoBackURL}}">{{ctx.Locale.Tr "go_back"}}</a>
{{end}}
</div>
</div>
</div>
</div>
{{template "base/footer" .}}

View File

@ -33,21 +33,22 @@
<div class="ui container" >
<style> .ui.message.flash-message { text-align: left; } </style>
{{template "base/alert" .}}
</div>
<p class="tw-mt-8 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p>
<div class="divider"></div>
<div class="ui container tw-my-8">
<div class="status-page-error">
<div class="status-page-error-title">500 Internal Server Error</div>
{{if .ErrorMsg}}
<div class="tw-mt-8">
<p>{{ctx.Locale.Tr "error.occurred"}}:</p>
<pre class="tw-whitespace-pre-wrap tw-break-all">{{.ErrorMsg}}</pre>
</div>
{{end}}
<div class="center tw-mt-8">
<div class="tw-mt-8 tw-text-center">
{{if or .SignedUser.IsAdmin .ShowFooterVersion}}<p>{{ctx.Locale.Tr "admin.config.app_ver"}}: {{AppVer}}</p>{{end}}
{{if .SignedUser.IsAdmin}}<p>{{ctx.Locale.Tr "error.report_message"}}</p>{{end}}
</div>
</div>
</div>
</div>
</div>
{{/* When a sub-template triggers an 500 error, its parent template has been partially rendered, then the 500 page
will be rendered after that partially rendered page, the HTML/JS are totally broken. Use this inline script to try to move it to main viewport.

View File

@ -13,6 +13,7 @@ import (
"code.gitea.io/gitea/models/db"
"code.gitea.io/gitea/models/unittest"
user_model "code.gitea.io/gitea/models/user"
"code.gitea.io/gitea/modules/test"
repo_service "code.gitea.io/gitea/services/repository"
"code.gitea.io/gitea/tests"
@ -30,9 +31,9 @@ func TestCompareTag(t *testing.T) {
// A dropdown for both base and head.
assert.Lenf(t, selection.Nodes, 2, "The template has changed")
req = NewRequest(t, "GET", "/user2/repo1/compare/invalid")
req = NewRequest(t, "GET", "/user2/repo1/compare/invalid").SetHeader("Accept", "text/html")
resp = session.MakeRequest(t, req, http.StatusNotFound)
assert.False(t, strings.Contains(resp.Body.String(), "/assets/img/500.png"), "expect 404 page not 500")
assert.True(t, test.IsNormalPageCompleted(resp.Body.String()), "expect 404 page not 500")
}
// Compare with inferred default branch (master)

View File

@ -37,8 +37,6 @@ func TestLinksNoLogin(t *testing.T) {
"/user2/repo1/projects",
"/user2/repo1/projects/1",
"/user2/repo1/releases/tag/delete-tag", // It's the only one existing record on release.yml which has is_tag: true
"/assets/img/404.png",
"/assets/img/500.png",
"/.well-known/security.txt",
}

View File

@ -477,6 +477,20 @@ img.ui.avatar,
padding-bottom: 80px;
}
.status-page-error {
margin-top: max(45vh - 90px, 80px);
margin-bottom: 80px;
}
.status-page-error-title {
font-size: 48px;
margin-bottom: 14px; /* some elements below may use tw-my-4 or tw-my-8, so use 14px as a minimal margin */
line-height: initial;
text-align: center;
font-weight: var(--font-weight-bold);
color: var(--color-text-light-2);
}
/* add margin below .secondary nav when it is the first child */
.page-content > :first-child.secondary-nav {
margin-bottom: 14px;