github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Graphically anchor elements of 500 error visual.

Browse source
This commit is contained in:
Paulo Reis 2017-03-01 13:48:12 +00:00
parent 70863930c3
commit 659028cf0f
3 changed files with 40 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
services/web/app/views/general/404.pug
View file

@ -4,8 +4,8 @@ block content
.content
.container
.error-container
.error-figure.error-figure-404
img.img-responsive(
.error-figure
img.error-img(
src="/img/brand/404-visual.svg"
alt="Not found"
)

4
services/web/app/views/general/500.pug
View file

@ -11,8 +11,8 @@ html.full-height(itemscope, itemtype='http://schema.org/Product')
.container.full-height
.error-container.full-height
.error-figure.error-figure-500
img.img-responsive(
src="/img/brand/500-visual.svg"
img.error-img(
src="/img/brand/500-visual-socket.svg"
alt="Error"
)
.error-details

48
services/web/public/stylesheets/app/error-pages.less
View file

@ -10,21 +10,45 @@
.error-figure {
display: none;
flex: 0 0 50%;
align-self: stretch;
padding: @line-height-computed * 2;
&-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;
}
@media (min-width: @screen-sm-min) {
display: block;
}
}
.error-figure-500 {
&::before {
content: '';
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 80%;
background-image: url(/img/brand/500-visual-plug.svg);
background-size: 400px;
background-repeat: no-repeat;
background-position: right 70%;
}
&::after {
content: '';
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(/img/brand/500-visual-tail.svg);
background-size: 100px;
background-repeat: no-repeat;
background-position: 35% bottom;
}
}
.error-img {
display: block;
max-width: 380px;
height: auto;
margin: 0 auto;
}
.error-details {
flex: 0 1 50%;