Simplify 404/500 page (#31409)

Author: wxiaoguang

public/assets/img/404.png

@@ -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" .}}

public/assets/img/500.png

@@ -33,17 +33,18 @@
 			<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">
-				{{if .ErrorMsg}}
-					<p>{{ctx.Locale.Tr "error.occurred"}}:</p>
-					<pre class="tw-whitespace-pre-wrap tw-break-all">{{.ErrorMsg}}</pre>
-				{{end}}
-				<div class="center tw-mt-8">
-					{{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 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="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>

templates/status/404.tmpl

@@ -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)

templates/status/500.tmpl

@@ -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",
 	}
 

tests/integration/compare_test.go

@@ -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;