Improve error page layout

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

8 files changed, 33 insertions, 27 deletions

diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index bd2dcefce1a..b9942b5cb5d 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -257,13 +257,6 @@ li.note {
   }
 }
 
-h1.http_status_code {
-  font-size: 56px;
-  line-height: 100px;
-  font-weight: normal;
-  color: #456;
-}
-
 .control-group {
   .controls {
     span {
diff --git a/app/assets/stylesheets/sections/errors.scss b/app/assets/stylesheets/sections/errors.scss
new file mode 100644
index 00000000000..32d2d7b1dbf
--- /dev/null
+++ b/app/assets/stylesheets/sections/errors.scss
@@ -0,0 +1,14 @@
+.error-page {
+  max-width: 400px;
+  margin: 0 auto;
+
+  h1, h2, h3 {
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 56px;
+    line-height: 100px;
+    font-weight: 300;
+  }
+}
diff --git a/app/views/errors/access_denied.html.haml b/app/views/errors/access_denied.html.haml
index e005a7c4409..a1d8664c4ce 100644
--- a/app/views/errors/access_denied.html.haml
+++ b/app/views/errors/access_denied.html.haml
@@ -1,5 +1,5 @@
-%h1.http_status_code 403
-%h3.page-title Access Denied
+%h1 403
+%h3 Access Denied
 %hr
 %p You are not allowed to access this page.
 %p Read more about project permissions #{link_to "here", help_page_path("permissions", "permissions"), class: "vlink"}
diff --git a/app/views/errors/encoding.html.haml b/app/views/errors/encoding.html.haml
index 7021f06dd7f..64c7451a8da 100644
--- a/app/views/errors/encoding.html.haml
+++ b/app/views/errors/encoding.html.haml
@@ -1,4 +1,4 @@
-%h1.http_status_code 500
-%h3.page-title Encoding Error
+%h1 500
+%h3 Encoding Error
 %hr
 %p Page can't be loaded because of an encoding error.
diff --git a/app/views/errors/git_not_found.html.haml b/app/views/errors/git_not_found.html.haml
index d8ed7773207..189e53bca55 100644
--- a/app/views/errors/git_not_found.html.haml
+++ b/app/views/errors/git_not_found.html.haml
@@ -1,5 +1,5 @@
-%h1.http_status_code 404
-%h3.page-title Git Resource Not found
+%h1 404
+%h3 Git Resource Not found
 %hr
 %p
   Application can't get access to some branch or commit in your repository. It
diff --git a/app/views/errors/not_found.html.haml b/app/views/errors/not_found.html.haml
index 4b97ddefc72..7bf88f592cf 100644
--- a/app/views/errors/not_found.html.haml
+++ b/app/views/errors/not_found.html.haml
@@ -1,4 +1,4 @@
-%h1.http_status_code 404
-%h3.page-title The resource you were looking for doesn't exist.
+%h1 404
+%h3 The resource you were looking for doesn't exist.
 %hr
 %p You may have mistyped the address or the page may have moved.
diff --git a/app/views/errors/omniauth_error.html.haml b/app/views/errors/omniauth_error.html.haml
index e1eaa5a9d06..f3c8221a9d9 100644
--- a/app/views/errors/omniauth_error.html.haml
+++ b/app/views/errors/omniauth_error.html.haml
@@ -1,12 +1,12 @@
-%h1.http_status_code 422
-%h3.page-title Sign-in using #{@provider} auth failed
+%h1 422
+%h3 Sign-in using #{@provider} auth failed
 %hr
 %p Sign-in failed because #{@error}.
 %p There are couple of steps you can take:
-1. Try logging in using your email 
-%br
-2. Try logging in using your username
-%br
-3. If you have forgotten your password, try recovering it using #{ link_to "Password recovery", new_password_path(resource_name) }
-%br
+
+%ul
+  %li Try logging in using your email
+  %li Try logging in using your username
+  %li If you have forgotten your password, try recovering it using #{ link_to "Password recovery", new_password_path(resource_name) }
+
 %p If none of the options work, try contacting the GitLab administrator.
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
index 3e05746f837..d0e276d751a 100644
--- a/app/views/layouts/errors.html.haml
+++ b/app/views/layouts/errors.html.haml
@@ -4,7 +4,6 @@
   %body{class: "#{app_theme} application"}
     = render "layouts/head_panel", title: "" if current_user
     = render "layouts/flash"
-    .container
-      .content
-        .center.padded.prepend-top-20
-          = yield
+    .container.navless-container
+      .error-page
+        = yield