diff --git a/services/web/app/views/general/404.pug b/services/web/app/views/general/404.pug index 018a11c2ac..8754ba5757 100644 --- a/services/web/app/views/general/404.pug +++ b/services/web/app/views/general/404.pug @@ -3,11 +3,13 @@ extends ../layout block content .content .container - .row - .col-md-8.col-md-offset-2.text-center - .page-header - h2 #{translate("cant_find_page")} - p - a(href="/") - i.fa.fa-arrow-circle-o-left - | #{translate("take_me_home")} + .error-container + .error-figure + img.error-img( + src="/img/brand/404-visual.svg" + alt="Not found" + ) + .error-details + p.error-status Not found + p.error-description #{translate("cant_find_page")} + a.error-btn(href="/") Home \ No newline at end of file diff --git a/services/web/app/views/general/500.pug b/services/web/app/views/general/500.pug index 8381ca6190..4a4ef6a9e3 100644 --- a/services/web/app/views/general/500.pug +++ b/services/web/app/views/general/500.pug @@ -1,24 +1,36 @@ 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.error-img( + src="/img/brand/500-visual-socket.svg" + alt="Error" + ) + .error-details + p.error-status Something went wrong, sorry. + p.error-description Our staff are probably looking into this, but if it continues, please contact us at #{settings.adminEmail} + 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 diff --git a/services/web/app/views/layout.pug b/services/web/app/views/layout.pug index 75c96ff276..dbe1e8c6b2 100644 --- a/services/web/app/views/layout.pug +++ b/services/web/app/views/layout.pug @@ -18,7 +18,11 @@ html(itemscope, itemtype='http://schema.org/Product') -else title= translate(title) + ' - ShareLaTeX, ' + translate("online_latex_editor") - link(rel="icon", href="/favicon.ico") + link(rel="icon", href="favicon.ico") + link(rel="icon", sizes="192x192", href="touch-icon-192x192.png") + link(rel="apple-touch-icon-precomposed", href="favicon-152.png") + link(rel="mask-icon", href="mask-favicon.svg", color="#a93529") + link(rel='stylesheet', href=buildCssPath('/style.css')) block _headLinks diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index eb8bdc684c..eb265b5055 100644 --- a/services/web/app/views/project/editor.pug +++ b/services/web/app/views/project/editor.pug @@ -7,13 +7,18 @@ block vars block content .editor(ng-controller="IdeController").full-size - .loading-screen(ng-show="state.loading") - .container - h3 #{translate("loading")}... - .progress - .progress-bar(style="width: 20%", ng-style="{'width': state.load_progress + '%'}") - p.text-center.text-danger(ng-if="state.error").ng-cloak - span(ng-bind-html="state.error") + .loading-screen(ng-if="state.loading") + .loading-screen-lion-container + .loading-screen-lion( + style="height: 20%;" + ng-style="{ 'height': state.load_progress + '%' }" + ) + h3.loading-screen-label(ng-if="!state.error") #{translate("loading")} + span.loading-screen-ellip . + span.loading-screen-ellip . + span.loading-screen-ellip . + p.loading-screen-error(ng-if="state.error").ng-cloak + span(ng-bind-html="state.error") include ./editor/feature-onboarding diff --git a/services/web/public/apple-touch-icon-precomposed.png b/services/web/public/apple-touch-icon-precomposed.png new file mode 100644 index 0000000000..b974874ec9 Binary files /dev/null and b/services/web/public/apple-touch-icon-precomposed.png differ diff --git a/services/web/public/favicon.ico b/services/web/public/favicon.ico index e20479261d..dcbc26c05d 100644 Binary files a/services/web/public/favicon.ico and b/services/web/public/favicon.ico differ diff --git a/services/web/public/img/brand/404-visual.svg b/services/web/public/img/brand/404-visual.svg new file mode 100644 index 0000000000..fdd8e2c1bd --- /dev/null +++ b/services/web/public/img/brand/404-visual.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/services/web/public/img/brand/500-visual-plug.svg b/services/web/public/img/brand/500-visual-plug.svg new file mode 100644 index 0000000000..8578c3d010 --- /dev/null +++ b/services/web/public/img/brand/500-visual-plug.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/services/web/public/img/brand/500-visual-socket.svg b/services/web/public/img/brand/500-visual-socket.svg new file mode 100644 index 0000000000..28c8c68cff --- /dev/null +++ b/services/web/public/img/brand/500-visual-socket.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/services/web/public/img/brand/500-visual-tail.svg b/services/web/public/img/brand/500-visual-tail.svg new file mode 100644 index 0000000000..57bf43d4f4 --- /dev/null +++ b/services/web/public/img/brand/500-visual-tail.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/services/web/public/img/brand/lion-grey.svg b/services/web/public/img/brand/lion-grey.svg new file mode 100644 index 0000000000..6766198c36 --- /dev/null +++ b/services/web/public/img/brand/lion-grey.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/services/web/public/img/brand/lion.svg b/services/web/public/img/brand/lion.svg new file mode 100644 index 0000000000..0138ecfc0b --- /dev/null +++ b/services/web/public/img/brand/lion.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/services/web/public/img/brand/logo-horizontal.svg b/services/web/public/img/brand/logo-horizontal.svg new file mode 100644 index 0000000000..7af949c1f1 --- /dev/null +++ b/services/web/public/img/brand/logo-horizontal.svg @@ -0,0 +1 @@ +SL New Logo \ No newline at end of file diff --git a/services/web/public/img/favicon.png b/services/web/public/img/favicon.png deleted file mode 100644 index 6788f68a24..0000000000 Binary files a/services/web/public/img/favicon.png and /dev/null differ diff --git a/services/web/public/img/favicon@2x.png b/services/web/public/img/favicon@2x.png deleted file mode 100644 index 65313b7353..0000000000 Binary files a/services/web/public/img/favicon@2x.png and /dev/null differ diff --git a/services/web/public/img/lion-128.png b/services/web/public/img/lion-128.png deleted file mode 100644 index 5c67094b18..0000000000 Binary files a/services/web/public/img/lion-128.png and /dev/null differ diff --git a/services/web/public/img/lion-sad-128.png b/services/web/public/img/lion-sad-128.png deleted file mode 100644 index 7edf83ada9..0000000000 Binary files a/services/web/public/img/lion-sad-128.png and /dev/null differ diff --git a/services/web/public/img/logo-white@2x.png b/services/web/public/img/logo-white@2x.png deleted file mode 100644 index 8bf336e4a3..0000000000 Binary files a/services/web/public/img/logo-white@2x.png and /dev/null differ diff --git a/services/web/public/img/logo.png b/services/web/public/img/logo.png deleted file mode 100644 index 7552a994c0..0000000000 Binary files a/services/web/public/img/logo.png and /dev/null differ diff --git a/services/web/public/img/logo@2x.png b/services/web/public/img/logo@2x.png deleted file mode 100644 index aea32a35be..0000000000 Binary files a/services/web/public/img/logo@2x.png and /dev/null differ diff --git a/services/web/public/mask-favicon.svg b/services/web/public/mask-favicon.svg new file mode 100644 index 0000000000..c5a06b93d1 --- /dev/null +++ b/services/web/public/mask-favicon.svg @@ -0,0 +1,4 @@ + + favicon + + diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less index 781e6ea257..db51462620 100644 --- a/services/web/public/stylesheets/app/editor.less +++ b/services/web/public/stylesheets/app/editor.less @@ -14,6 +14,18 @@ @import "./editor/review-panel.less"; @import "./editor/feature-onboarding.less"; +@keyframes blink { + 0% { + opacity: 0.2; + } + 20% { + opacity: 1; + } + 100% { + opacity: 0.2; + } +} + .full-size { position: absolute; top: 0; @@ -53,24 +65,59 @@ } .loading-screen { - h3 { - padding-top: 136px; - background-image: url(/img/lion-128.png); - background-repeat: no-repeat; - background-position: top center; - } - .full-size; - background-color: #fafafa; - .container { - text-align: center; - position: absolute; - top: 50%; - left: 50%; - width: 400px; - margin-left: -200px; - margin-top: -200px; - } + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + background-color: #FFF; } + .loading-screen-lion-container { + width: 15%; + min-width: 200px; + text-align: center; + } + .loading-screen-lion { + position: relative; + width: 100%; + padding-top: 86.2%; + height: 0; + background: url(/img/brand/lion-grey.svg) no-repeat bottom / 100%; + + &::after { + content: ''; + position: absolute; + height: inherit; + right: 0; + bottom: 0; + left: 0; + background: url(/img/brand/lion.svg) no-repeat bottom / 100%; + transition: height .5s; + } + } + .loading-screen-label { + margin: 0; + padding-top: 1em; + font-size: 2em; + color: @gray-dark; + } + .loading-screen-ellip { + animation: blink 1.4s both infinite; + &:nth-child(2) { + animation-delay: 0.2s; + } + &:nth-child(3) { + animation-delay: 0.4s; + } + } + + .loading-screen-error { + margin: 0; + padding-top: 1em; + color: @state-danger-text; + } + .loading-panel { .full-size; diff --git a/services/web/public/stylesheets/app/error-pages.less b/services/web/public/stylesheets/app/error-pages.less new file mode 100644 index 0000000000..3d575408df --- /dev/null +++ b/services/web/public/stylesheets/app/error-pages.less @@ -0,0 +1,86 @@ +.full-height { + height: 100%; + padding: 0; +} + +.error-container { + display: flex; + align-items: center; +} + .error-figure { + display: none; + flex: 0 0 50%; + padding: @line-height-computed * 2; + @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%; + pointer-events: none; + } + &::after { + content: ''; + display: block; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 50%; + background-image: url(/img/brand/500-visual-tail.svg); + background-size: 100px; + background-repeat: no-repeat; + background-position: 90% bottom; + pointer-events: none; + } + } + .error-img { + display: block; + max-width: 380px; + height: auto; + margin: 0 auto; + } + + .error-details { + flex: 0 1 50%; + padding: @line-height-computed * 2; + } + .error-status { + font-family: @font-family-serif; + margin-bottom: (@line-height-computed / 4); + color: @gray-dark; + font-size: @font-size-h1; + } + .error-description { + font-family: @font-family-serif; + font-size: @font-size-h3; + color: @gray; + margin-bottom: @line-height-computed * 2; + } + .error-btn { + color: @navbar-default-link-color; + border: 2px solid @navbar-default-link-color; + border-radius: @border-radius-base; + font-weight: 700; + line-height: 1; + padding: @padding-base-vertical @padding-base-horizontal; + + &:hover, + &:focus { + text-decoration: none; + color: #fff; + background-color: @navbar-default-link-hover-bg; + border: 2px solid @navbar-default-link-hover-color; + } + } \ No newline at end of file diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 5e03c1facc..17f6b7bb25 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -347,11 +347,11 @@ ul.project-list { .announcements-btn { position: absolute; - bottom: -50px; + bottom: -35px; right: 3%; width: 80px; height: 80px; - background: url(/img/lion-128.png) no-repeat center/80% transparent; + background: url(/img/brand/lion.svg) no-repeat center/80% transparent; border-radius: 50%; box-shadow: none; z-index: 1; @@ -361,7 +361,7 @@ ul.project-list { box-shadow 0.25s ease; &:hover { - bottom: -45px; + bottom: -25px; } &-open, &-open:hover, diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 5079b10b7e..9da0dfabc5 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/services/web/public/stylesheets/components/navbar.less @@ -384,24 +384,13 @@ position: absolute; top: 5px; bottom: 5px; - width: 135px; + width: 180px; padding: 0; - background-image: url('/img/logo.png'); + background-image: url('/img/brand/logo-horizontal.svg'); background-size: contain; background-repeat: no-repeat; background-position: left center; } - @media - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and ( min--moz-device-pixel-ratio: 2), - only screen and ( -o-min-device-pixel-ratio: 2/1), - only screen and ( min-device-pixel-ratio: 2), - only screen and ( min-resolution: 192dpi), - only screen and ( min-resolution: 2dppx) { - .navbar-brand { - background-image: url('/img/logo@2x.png'); - } - } .navbar-text { color: @navbar-default-color; diff --git a/services/web/public/stylesheets/core/variables.less b/services/web/public/stylesheets/core/variables.less index 176843f241..7c1876ef9a 100755 --- a/services/web/public/stylesheets/core/variables.less +++ b/services/web/public/stylesheets/core/variables.less @@ -51,10 +51,11 @@ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); //@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,600,700); -@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i); +//@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i); +@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i); @font-family-sans-serif: "Open Sans", sans-serif; -@font-family-serif: "PT Serif", serif; +@font-family-serif: "Merriweather", serif; //** Default monospace fonts for ``, ``, and `
`.
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
@@ -79,7 +80,7 @@
 @headings-font-family:    @font-family-serif;
 @headings-font-weight:    500;
 @headings-line-height:    1.1;
-@headings-color:          @gray-darker;
+@headings-color:          @gray-dark;
 
 
 //-- Iconography
diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less
index 2ab13566ad..b3e0c15294 100755
--- a/services/web/public/stylesheets/style.less
+++ b/services/web/public/stylesheets/style.less
@@ -79,6 +79,7 @@
 @import "app/sprites.less";
 @import "app/invite.less";
 @import "app/review-features-page.less";
+@import "app/error-pages.less";
 
 @import	"../js/libs/pdfListView/TextLayer.css";
 @import	"../js/libs/pdfListView/AnnotationsLayer.css";
diff --git a/services/web/public/touch-icon-192x192.png b/services/web/public/touch-icon-192x192.png
new file mode 100644
index 0000000000..df869be62c
Binary files /dev/null and b/services/web/public/touch-icon-192x192.png differ