From c747bb5a6399f25b9a5ee1ee980675784b3b1b22 Mon Sep 17 00:00:00 2001 From: Lisa Passing Date: Wed, 11 Feb 2015 17:24:14 +0100 Subject: [PATCH] add 500 page and styles and refactor --- app/router.coffee | 5 +- app/styles/app/_mixins/vars.sass | 7 +- app/styles/app/layouts/error.sass | 165 +++++++++--------- app/styles/app/maximize.sass | 29 +-- app/templates/error404.hbs | 4 +- app/templates/error500.hbs | 11 ++ app/views/error404.coffee | 2 +- app/views/error500.coffee | 7 + public/images/error/500-hills-left.svg | 22 +++ public/images/error/500-hills-right.svg | 41 +++++ public/images/error/500-hills-shade-left.svg | 8 + public/images/error/500-hills-shade-right.svg | 8 + public/images/error/500-road.svg | 97 ++++++++++ 13 files changed, 298 insertions(+), 108 deletions(-) create mode 100644 app/templates/error500.hbs create mode 100644 app/views/error500.coffee create mode 100644 public/images/error/500-hills-left.svg create mode 100644 public/images/error/500-hills-right.svg create mode 100644 public/images/error/500-hills-shade-left.svg create mode 100644 public/images/error/500-hills-shade-right.svg create mode 100644 public/images/error/500-road.svg diff --git a/app/router.coffee b/app/router.coffee index e57388a1..e161fc11 100644 --- a/app/router.coffee +++ b/app/router.coffee @@ -52,7 +52,8 @@ Router.map -> @resource 'account', path: '/:login' @route 'info', path: '/info' - @route 'maintenance', path: "/maintenance" - @route 'error404', path: "/*path" + @route 'maintenance', path: '/maintenance' + @route 'error500', path: '/500' + @route 'error404', path: '/*path' `export default Router` diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index 77d019eb..8a49e900 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -36,14 +36,15 @@ $footer-h3-color: #8f9ba2 $footer-h3-corder-color: #ccd0d5 // error pages -// 404 -$error-hill-grey: #bbcac6 $error-heading-color: #357389 $error-copy-color: $dashboard-text-color $error-bg-gradient: rgba(204,235,247,1) // maintenance $maintenance-grass: #8cad7d - +// 404 +$error-hill-grey: #bbcac6 +//500 +$error-sand: #dcc682 // tabs $tab-nav-inactive-bg: #f8f8f8 diff --git a/app/styles/app/layouts/error.sass b/app/styles/app/layouts/error.sass index 5ea61f29..b55169ad 100644 --- a/app/styles/app/layouts/error.sass +++ b/app/styles/app/layouts/error.sass @@ -1,7 +1,14 @@ /* - * Error Pages + * Error Pages + Maintenance */ +@mixin error-bg-gradient($color) + background: linear-gradient(0deg, $color, $color 38.9%, $error-bg-gradient 39%, $white 60%, $white) + +@mixin error-position-img($size:inherit, $pos:inherit) + background: + size: $size + position: $pos .error, .maintenance @@ -14,8 +21,7 @@ height: 100% width: 100% overflow: hidden - background: - repeat: no-repeat + background-repeat: no-repeat .main--error min-height: 100% @@ -52,98 +58,85 @@ display: inline-block width: 1.1em height: 1.1em - background: - image: url(../images/error/twitter.svg) - size: 100% auto - repeat: no-repeat - position: 0 .2em - - -/* - * Maintenance - */ -.maintenance-bg - background: linear-gradient(0deg, $maintenance-grass, $maintenance-grass 34.9%, $error-bg-gradient 35%, $white 60%, $white) + background-image: url(../images/error/twitter.svg) + background-repeat: no-repeat + @include error-position-img(100% auto, 0 .2em) +.error500 + .error-bg + @include error-bg-gradient($error-sand) .hill-left - background: - image: url(../images/error/maintenance-hills-left.svg) - size: 80vw auto - position: 0 62% - @media #{$medium-up} - background-size: 58vw auto - background-position: 0 62% - @media #{$large-up} - background-size: 50vw auto - background-position: 0 61% + background-image: url(../images/error/500-hills-left.svg) + @include error-position-img(38vw auto, 0 62%) .hill-right + background-image: url(../images/error/500-hills-right.svg) + @include error-position-img(38vw auto, 99% 63%) display: none - background: - image: url(../images/error/maintenance-hills-right.svg) - size: 38vw auto - position: 99% 63% @media #{$medium-up} display: block .shadow-left - background: - image: url(../images/error/maintenance-grass-shade-left.svg) - size: 24vw auto - position: 6% 82% + background-image: url(../images/error/500-hills-shade-left.svg) + @include error-position-img(24vw auto, 6% 82%) .shadow-right - background: - image: url(../images/error/maintenance-grass-shade-right.svg) - size: 17vw auto - position: 95% 89% + background-image: url(../images/error/500-hills-shade-right.svg) + @include error-position-img(17vw auto, 95% 89%) + .road + background-image: url(../images/error/500-road.svg) + @include error-position-img(auto 40vh, 30% 91.3%) -.maintenance-tractor - background: - image: url(../images/error/maintenance-tractor.svg) - size: 87vw auto - position: 63% 87% - @media #{$medium-up} - background-size: auto 40vh - @media #{$large-up} - background-size: auto 40vh +.error404 + .error-bg + @include error-bg-gradient($error-hill-grey) + .hill-left + display: none + background-image: url(../images/error/404-hills-left.svg) + @include error-position-img(30vw auto, 0 (100% - 37%)) + @media #{$medium-up} + display: block + .hill-right + background-image: url(../images/error/404-hills-right.svg) + @include error-position-img(auto 20vw, 99% 63%) + @media #{$medium-up} + @include error-position-img(50vw auto, 99% 63%) + @media #{$large-up} + @include error-position-img(50vw auto, 99% 61%) + .error-excavator + background-image: url(../images/error/excavator.svg) + @include error-position-img(auto 25vh, 71% 83%) + .error-travis + background-image: url(../images/error/pensive-travis.svg) + @include error-position-img(auto 60vh, 34% 92%) + @media #{$medium-up} + background-size: auto 50vh + @media #{$large-up} + background-size: auto 60vh -/* - * 404 - */ -.error-bg - background: linear-gradient(0deg, $error-hill-grey, $error-hill-grey 34.9%, $error-bg-gradient 35%, $white 60%, $white) -.error-hill-left - display: none - background: - image: url(../images/error/404-hills-left.svg) - size: 30vw auto - position: 0 (100% - 37%) - @media #{$medium-up} - display: block - -.error-hill-right - background: - image: url(../images/error/404-hills-right.svg) - size: auto 20vw - position: 99% 63% - @media #{$medium-up} - background-size: 50vw auto - background-position: 99% 63% - @media #{$large-up} - background-position: 99% 61% - -.error-excavator - background: - image: url(../images/error/excavator.svg) - size: auto 25vh - position: 71% 83% - -.error-travis - background: - image: url(../images/error/pensive-travis.svg) - size: auto 60vh - position: 34% 92% - @media #{$medium-up} - background-size: auto 50vh - @media #{$large-up} - background-size: auto 60vh +.maintenance + .maintenance-bg + @include error-bg-gradient($maintenance-grass) + .hill-left + background-image: url(../images/error/maintenance-hills-left.svg) + @include error-position-img(80vw auto, 0 62%) + @media #{$medium-up} + @include error-position-img(58vw auto, 0 62%) + @media #{$large-up} + @include error-position-img(50vw auto, 0 61%) + .hill-right + background-image: url(../images/error/maintenance-hills-right.svg) + @include error-position-img(38vw auto, 99% 63%) + display: none + @media #{$medium-up} + display: block + .shadow-left + background-image: url(../images/error/maintenance-grass-shade-left.svg) + @include error-position-img(24vw auto, 6% 82%) + .shadow-right + background-image: url(../images/error/maintenance-grass-shade-right.svg) + @include error-position-img(17vw auto, 95% 89%) + .maintenance-tractor + background-image: url(../images/error/maintenance-tractor.svg) + @include error-position-img(87vw auto, 63% 87%) + @media #{$medium-up} + @include error-position-img(auto 40vh, 63% 87%) diff --git a/app/styles/app/maximize.sass b/app/styles/app/maximize.sass index fefd80e5..4e36174b 100644 --- a/app/styles/app/maximize.sass +++ b/app/styles/app/maximize.sass @@ -5,21 +5,22 @@ #right display: none - #global_slider - position: absolute - background-color: $color-bg-slider - cursor: pointer - background: transparent inline-image('ui/slider-open.svg') no-repeat 6px 5px - border-top-left-radius: 4px - top: 85px - right: 0 - width: 20px - height: 20px - border-bottom-left-radius: 4px - display: block + .application:not(> .error) + #global_slider + position: absolute + background-color: $color-bg-slider + cursor: pointer + background: transparent inline-image('ui/slider-open.svg') no-repeat 6px 5px + border-top-left-radius: 4px + top: 85px + right: 0 + width: 20px + height: 20px + border-bottom-left-radius: 4px + display: block - &:hover - background-color: $color-border-slider-hover + &:hover + background-color: $color-border-slider-hover #top .profile margin-right: 15px diff --git a/app/templates/error404.hbs b/app/templates/error404.hbs index d408249b..cc397661 100644 --- a/app/templates/error404.hbs +++ b/app/templates/error404.hbs @@ -1,6 +1,6 @@
-
-
+
+
diff --git a/app/templates/error500.hbs b/app/templates/error500.hbs new file mode 100644 index 00000000..de15327b --- /dev/null +++ b/app/templates/error500.hbs @@ -0,0 +1,11 @@ +
+
+
+
+
+
+
+
+

Something went wrong

+

It looks like something went wrong with your request.
Please try again later.

+
diff --git a/app/views/error404.coffee b/app/views/error404.coffee index 8066dc8c..03b81829 100644 --- a/app/views/error404.coffee +++ b/app/views/error404.coffee @@ -2,6 +2,6 @@ View = BasicView.extend layoutName: 'layouts/error' - classNames: ['error'] + classNames: ['error error404'] `export default View` diff --git a/app/views/error500.coffee b/app/views/error500.coffee new file mode 100644 index 00000000..c6b7dfb2 --- /dev/null +++ b/app/views/error500.coffee @@ -0,0 +1,7 @@ +`import BasicView from 'travis/views/basic'` + +View = BasicView.extend + layoutName: 'layouts/error' + classNames: ['error error500'] + +`export default View` diff --git a/public/images/error/500-hills-left.svg b/public/images/error/500-hills-left.svg new file mode 100644 index 00000000..a01274e0 --- /dev/null +++ b/public/images/error/500-hills-left.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + diff --git a/public/images/error/500-hills-right.svg b/public/images/error/500-hills-right.svg new file mode 100644 index 00000000..1ceb1100 --- /dev/null +++ b/public/images/error/500-hills-right.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/error/500-hills-shade-left.svg b/public/images/error/500-hills-shade-left.svg new file mode 100644 index 00000000..904c64bd --- /dev/null +++ b/public/images/error/500-hills-shade-left.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/public/images/error/500-hills-shade-right.svg b/public/images/error/500-hills-shade-right.svg new file mode 100644 index 00000000..5cfedaeb --- /dev/null +++ b/public/images/error/500-hills-shade-right.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/public/images/error/500-road.svg b/public/images/error/500-road.svg new file mode 100644 index 00000000..3d5a5b1d --- /dev/null +++ b/public/images/error/500-road.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +