github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-02-18 18:12:10 +00: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 .content
.container .container
.error-container .error-container
.error-figure.error-figure-404 .error-figure
img.img-responsive( img.error-img(
src="/img/brand/404-visual.svg" src="/img/brand/404-visual.svg"
alt="Not found" 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 .container.full-height
.error-container.full-height .error-container.full-height
.error-figure.error-figure-500 .error-figure.error-figure-500
img.img-responsive( img.error-img(
src="/img/brand/500-visual.svg" src="/img/brand/500-visual-socket.svg"
alt="Error" alt="Error"
) )
.error-details .error-details

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

@ -10,20 +10,44 @@
.error-figure { .error-figure {
display: none; display: none;
flex: 0 0 50%; flex: 0 0 50%;
align-self: stretch;
padding: @line-height-computed * 2; padding: @line-height-computed * 2;
&-404 {
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
display: block; display: block;
} }
} }
&-500 { .error-figure-500 {
padding-bottom: 0; &::before {
@media (min-width: @screen-sm-min) { content: '';
display: flex; display: block;
align-items: flex-end; 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 { .error-details {