Adapt 500 error page.

This commit is contained in:
Paulo Reis 2017-03-01 11:22:31 +00:00
parent 8f26e80e8f
commit e0f2b7c130
2 changed files with 46 additions and 19 deletions

View file

@ -1,24 +1,37 @@
doctype html
html(itemscope, itemtype='http://schema.org/Product')
html.full-height(itemscope, itemtype='http://schema.org/Product')
head
title Something went wrong
link(rel="icon", href="/favicon.ico")
if buildCssPath
link(rel='stylesheet', href=buildCssPath('/style.css'))
link(href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css",rel="stylesheet")
body
.content
.container
.row
.col-md-8.col-md-offset-2.text-center
.page-header
h2 Oh dear, something went wrong.
if buildImgPath
p
img(src=buildImgPath("lion-sad-128.png"), alt="Sad Lion")
p
| Something went wrong with your request, sorry. Our staff are probably looking into this, but if it continues, please contact us at #{settings.adminEmail}
p
a(href="/")
i.fa.fa-arrow-circle-o-left
| Take me home
body.full-height
.content.full-height
.container.full-height
.error-container.full-height
.error-figure.error-figure-500
img.img-responsive(
src="/img/brand/500-visual.svg"
alt="Error"
)
.error-details
h1.error-code 500
p.error-status Ooops
p.error-description Looks like something went wrong
a.error-btn(href="/") Home
//- .content
//- .container
//- .row
//- .col-md-8.col-md-offset-2.text-center
//- .page-header
//- h2 Oh dear, something went wrong.
//- if buildImgPath
//- p
//- img(src=buildImgPath("lion-sad-128.png"), alt="Sad Lion")
//- p
//- | Something went wrong with your request, sorry. Our staff are probably looking into this, but if it continues, please contact us at #{settings.adminEmail}
//- p
//- a(href="/")
//- i.fa.fa-arrow-circle-o-left
//- | Take me home

View file

@ -1,3 +1,8 @@
.full-height {
height: 100%;
padding: 0;
}
.error-container {
display: flex;
align-items: center;
@ -7,8 +12,17 @@
flex: 0 0 50%;
align-self: stretch;
padding: @line-height-computed * 2;
@media (min-width: @screen-sm-min) {
display: block;
&-404 {
@media (min-width: @screen-sm-min) {
display: block;
}
}
&-500 {
padding-bottom: 0;
@media (min-width: @screen-sm-min) {
display: flex;
align-items: flex-end;
}
}
}