forks/forgejo
1
0
Fork 0
Code Releases Activity

[THEME] refactor display of 404/500 error pages

Browse source
This commit is contained in:
0ko 2024-02-25 15:59:12 +05:00
parent b7ea2ea463
commit 186f1f5669
3 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/status/404.tmpl
View file

@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content ui center gt-w-screen {{if .IsRepo}}repository{{end}}">
{{if .IsRepo}}{{template "repo/header" .}}{{end}}
<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>
{{if .NotFoundGoBackURL}}<a class="ui button green" href="{{.NotFoundGoBackURL}}">{{ctx.Locale.Tr "go_back"}}</a>{{end}}

5
templates/status/500.tmpl
View file

@ -33,7 +33,10 @@
<style> .ui.message.flash-message { text-align: left; } </style>
{{template "base/alert" .}}
</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="ui container gt-my-5">
{{if .ErrorMsg}}

10
web_src/css/base.css
View file

@ -96,6 +96,16 @@ progress::-moz-progress-bar {
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;
caret-color: var(--color-caret);