forgejo/templates/status/500.tmpl
Giteabot 0bf07a7f61
Improve notification icon and navbar (#25111) (#25124)
Backport #25111 by @silverwind

Improvements to the notification icon and `<nav>`:

- Add a opaque color for header hover and use it, allowing the border to
be the right color on hover (sadly, not otherwise possible with CSS, not
even `color-mix`).
- Increase font size by 1px
- Use flexbox for slightly better text centering
- Reduce padding of user and add repo button, add margin on right side
of user menu
- Remove the `following bar` wrapper on navbar

<img width="176" alt="Screenshot 2023-06-07 at 00 07 08"
src="https://github.com/go-gitea/gitea/assets/115237/23cdc3d6-7f63-49df-bec3-f2e75e32a304">
<img width="63" alt="Screenshot 2023-06-07 at 00 07 14"
src="https://github.com/go-gitea/gitea/assets/115237/fae602c2-4467-4d50-b1ec-56317843f9a2">
<img width="84" alt="Screenshot 2023-06-07 at 00 07 36"
src="https://github.com/go-gitea/gitea/assets/115237/c48141b8-0b3c-48cc-846a-3a272524dbdb">
<img width="329" alt="Screenshot 2023-06-07 at 00 25 10"
src="https://github.com/go-gitea/gitea/assets/115237/cda612f1-426e-466b-a351-fc992bfd18fd">
<img width="186" alt="Screenshot 2023-06-07 at 00 35 45"
src="https://github.com/go-gitea/gitea/assets/115237/04484a2e-9bbf-493c-aa26-8e936da008fa">
<img width="797" alt="Screenshot 2023-06-07 at 16 57 40"
src="https://github.com/go-gitea/gitea/assets/115237/e7ccb672-5807-4cb6-b306-b18ae0c7e321">

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-06-08 10:19:13 +00:00

60 lines
2.8 KiB
Handlebars

{{/* This page should only depend the minimal template functions/variables, to avoid triggering new panics.
* base template functions: AppName, AssetUrlPrefix, AssetVersion, AppSubUrl, DefaultTheme, Str2html
* locale
* ErrorMsg
* SignedUser (optional)
*/}}
<!DOCTYPE html>
<html lang="{{.locale.Lang}}" class="theme-{{if .SignedUser.Theme}}{{.SignedUser.Theme}}{{else}}{{DefaultTheme}}{{end}}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Internal Server Error - {{AppName}}</title>
<link rel="icon" href="{{AssetUrlPrefix}}/img/favicon.svg" type="image/svg+xml">
<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
{{template "base/head_style" .}}
</head>
<body>
<div class="full height">
<nav class="ui container secondary stackable main menu" id="navbar">
<div class="ui container gt-df">
<div class="item brand gt-f1">
<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
</a>
</div>
<button class="item ui icon button">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}}
</div>
</nav>
<div role="main" class="page-content status-page-500">
<p class="gt-mt-5 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p>
<div class="ui divider"></div>
<div class="ui container gt-my-5">
{{if .ErrorMsg}}
<p>{{.locale.Tr "error.occurred"}}:</p>
<pre class="gt-whitespace-pre-wrap gt-break-all">{{.ErrorMsg}}</pre>
{{end}}
<div class="center gt-mt-5">
{{if or .SignedUser.IsAdmin .ShowFooterVersion}}<p>{{.locale.Tr "admin.config.app_ver"}}: {{AppVer}}</p>{{end}}
{{if .SignedUser.IsAdmin}}<p>{{.locale.Tr "error.report_message" | Str2html}}</p>{{end}}
</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.
And this page shouldn't include any other JS file, avoid duplicate JS execution (still due to the partial rendering).*/}}
<script type="module">
const embedded = document.querySelector('.page-content .page-content.status-page-500');
if (embedded) {
// move the 500 error page content to main view
const embeddedParent = embedded.parentNode;
let main = document.querySelector('.page-content');
main = main ?? document.querySelector('body');
main.prepend(document.createElement('hr'));
main.prepend(embedded);
embeddedParent.remove(); // remove the unrelated 500-page elements (eg: the duplicate nav bar)
}
</script>
</body>
</html>