Merge pull request 'Improve display of 404/500 error pages' (#2466) from 0ko/forgejo:errorcodes into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2466
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
Earl Warren 2024-02-25 15:53:09 +00:00
commit f991f107da
7 changed files with 16 additions and 5 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

@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content ui center gt-w-screen {{if .IsRepo}}repository{{end}}"> <div role="main" aria-label="{{.Title}}" class="page-content ui center gt-w-screen {{if .IsRepo}}repository{{end}}">
{{if .IsRepo}}{{template "repo/header" .}}{{end}} {{if .IsRepo}}{{template "repo/header" .}}{{end}}
<div class="ui container center"> <div class="ui container center">
<p style="margin-top: 100px"><img src="{{AssetUrlPrefix}}/img/404.png" alt="404" style="max-width: 100%"></p> <h1 style="margin-top: 100px" class="error-code">404</h1>
<p>{{if .NotFoundPrompt}}{{.NotFoundPrompt}}{{else}}{{ctx.Locale.Tr "error404" | Safe}}{{end}}</p> <p>{{if .NotFoundPrompt}}{{.NotFoundPrompt}}{{else}}{{ctx.Locale.Tr "error404" | Safe}}{{end}}</p>
{{if .NotFoundGoBackURL}}<a class="ui button green" href="{{.NotFoundGoBackURL}}">{{ctx.Locale.Tr "go_back"}}</a>{{end}} {{if .NotFoundGoBackURL}}<a class="ui button green" href="{{.NotFoundGoBackURL}}">{{ctx.Locale.Tr "go_back"}}</a>{{end}}

View file

@ -33,7 +33,10 @@
<style> .ui.message.flash-message { text-align: left; } </style> <style> .ui.message.flash-message { text-align: left; } </style>
{{template "base/alert" .}} {{template "base/alert" .}}
</div> </div>
<p class="gt-mt-5 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p> <div class="ui container center">
<h1 class="gt-mt-5 error-code">500</h1>
<p>Internal Server Error</p>
</div>
<div class="divider"></div> <div class="divider"></div>
<div class="ui container gt-my-5"> <div class="ui container gt-my-5">
{{if .ErrorMsg}} {{if .ErrorMsg}}

View file

@ -33,7 +33,7 @@ func TestCompareTag(t *testing.T) {
req = NewRequest(t, "GET", "/user2/repo1/compare/invalid") req = NewRequest(t, "GET", "/user2/repo1/compare/invalid")
resp = session.MakeRequest(t, req, http.StatusNotFound) 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.False(t, strings.Contains(resp.Body.String(), ">500<"), "expect 404 page not 500")
} }
// Compare with inferred default branch (master) // Compare with inferred default branch (master)

View file

@ -36,8 +36,6 @@ func TestLinksNoLogin(t *testing.T) {
"/user2/repo1/", "/user2/repo1/",
"/user2/repo1/projects", "/user2/repo1/projects",
"/user2/repo1/projects/1", "/user2/repo1/projects/1",
"/assets/img/404.png",
"/assets/img/500.png",
"/.well-known/security.txt", "/.well-known/security.txt",
} }

View file

@ -96,6 +96,16 @@ progress::-moz-progress-bar {
background-color: var(--color-accent); background-color: var(--color-accent);
} }
h1.error-code {
font-size: 15em;
font-weight: 800;
color: transparent;
--error-code-color-1: #a2a2a2;
--error-code-color-2: #797979;
background: repeating-linear-gradient(45deg, var(--error-code-color-1), var(--error-code-color-1) 10px, var(--error-code-color-2) 10px, var(--error-code-color-2) 20px);
background-clip: text;
}
* { * {
scrollbar-color: var(--color-primary) transparent; scrollbar-color: var(--color-primary) transparent;
caret-color: var(--color-caret); caret-color: var(--color-caret);