[THEME] refactor display of 404/500 error pages

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

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

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