Merge pull request #6428 from svbergerem/unify-error-pages

Unify error pages

Changelog.md

@@ -74,6 +74,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure.
 * Bigger mobile publisher [#6261](https://github.com/diaspora/diaspora/pull/6261)
 * Backend information panel & health checks for known pods [#6290](https://github.com/diaspora/diaspora/pull/6290)
 * Allow users to view a posts locations on an OpenStreetMap [#6256](https://github.com/diaspora/diaspora/pull/6256)
+* Redesign and unify error pages [#6428](https://github.com/diaspora/diaspora/pull/6428)
 
 # 0.5.4.0
 

app/assets/stylesheets/error_pages.scss

@@ -3,46 +3,32 @@
 
 html { min-height: 100%; }
 
-#big-number {
+.error-404 {
-  font-family: Roboto-BoldCondensed, Helvetica, Arial, sans-serif;
+  background: image-url('peeping-tom.png') no-repeat bottom;
+  background-attachment: fixed;
+}
+
+.error-404,
+.error-422,
+.error-500,
+.error-not-public {
+  background-color: $background-grey;
+  bottom:0px;
+  color: $text-dark-grey;
+  font-family: Helvetica, Arial, sans-serif;
+  height: 100%;
+  margin: 0px;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  width: 100%;
+
+  .big-number {
+    color: $text-grey;
+    font-family: Helvetica, Arial, sans-serif;
     font-size: 250px;
     line-height: 1em;
-  text-align: center;
+    padding-top: 50px;
-  padding-top: 100px;
     text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
-  color: #ddd;
-}
-.transparent {
-  opacity: 0.8;
-}
-#content {
-  font-family: Roboto, Helvetica, Arial, sans-serif;
-  text-align: center;
-  text-shadow: 0 1px 0 #fff;
-  font-size: 1.25em;
-  line-height: 1.5em;
-  color: $text-dark-grey;
-  position: absolute;
-  left: 0; right: 0;
-}
-
-#error_404 {
-  width: 100%;
-  height: 100%;
-  bottom:0px;
-  margin: 0px;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
-  text-align: center;
-  text-shadow: 0 1px 0 #fff;
-  color: #666;
-  background: image-url("peeping-tom.png") no-repeat bottom;
-  background-attachment: fixed;
-
-  #big-number {
-    font-family: Roboto-BoldCondensed, Helvetica, Arial, sans-serif;
-    font-size: 250px;
-    text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
-    color: #ddd;
   }
 
   a {
@@ -55,55 +41,7 @@ html { min-height: 100%; }
   }
 
   .transparent {
-    filter: alpha(opacity=80);
+    filter: alpha(opacity = 60);
-    opacity: 0.8;
+    opacity: .6;
-  }
-}
-
-#error_422 {
-  background-color: #fff;
-  color: #666;
-  text-align: center;
-  font-family: arial, sans-serif;
-
-  div.dialog {
-    width: 25em;
-    padding: 0 4em;
-    margin: 4em auto 0 auto;
-    border: 1px solid #ccc;
-    border-right-color: #999;
-    border-bottom-color: #999;
-  }
-
-  h1 {
-    font-size: 100%;
-    color: #f00;
-    line-height: 1.5em;
-  }
-}
-
-#error_500 {
-  text-align: center;
-  background-color: rgb(252,252,252);
-  color: #444;
-  font-family: 'helvetica neue', 'helvetica', 'arial', sans-serif;
-  margin: 0;
-  padding: 1em;
-
-  header {
-    height: 100px;
-    background-color: #333;
-    position:relative;
-  }
-
-  #diaspora_logo {
-    position: relative;
-    margin-top: 50px;
-  }
-
-  h1 {
-    font-size: 100%;
-    color: #444;
-    line-height: 1.5em;
   }
 }

app/assets/stylesheets/new_styles/_base.scss

@@ -39,18 +39,6 @@ a.tag { word-break: break-all; }
   color: inherit;
 }
 
-/* bootstrap label fixes for Roboto */
-.label {
-  padding : 2px 5px;
-  padding-bottom : 3px;
-
-  span {
-    display : inline-block;
-    position : relative;
-    top : 1px;
-  }
-}
-
 #back-to-top {
   display: block;
   color: white;

app/assets/stylesheets/new_styles/_typography.scss

@@ -1,22 +1,3 @@
-/* Roboto */
-@font-face {
-  font-family : Roboto;
-  src : image-url('fonts/Roboto-Regular.ttf');
-  weight : normal;
-}
-
-@font-face {
-  font-family : Roboto-Bold;
-  src : image-url('fonts/Roboto-Bold.ttf');
-  weight : normal;
-}
-
-@font-face {
-  font-family : Roboto-Light;
-  src : image-url('fonts/Roboto-Light.ttf');
-  weight : normal;
-}
-
 /* diaspora custom icons font */
 @font-face {
   font-family: "diaspora-custom";

app/controllers/posts_controller.rb

@@ -11,8 +11,9 @@ class PostsController < ApplicationController
   respond_to :html, :mobile, :json, :xml
 
   rescue_from Diaspora::NonPublic do
+    @code = "not-public"
     respond_to do |format|
-      format.all { render template: "errors/not_public", status: 404, layout: "application" }
+      format.all { render template: "errors/not_public", status: 404, layout: "error_page" }
     end
   end
 

app/views/errors/error_404.haml

@@ -1,9 +1,9 @@
 - content_for(:page_title) do
   The page you were looking for doesn't exist (404)
 
-#big-number.transparent
+.transparent.big-number
   404
-%p
+%h3
   These are not the kittens you're looking for. Move along.
 %p
   %a{href: "javascript:history.back()"}

app/views/errors/error_422.haml

@@ -1,8 +1,13 @@
 - content_for(:page_title) do
   The change you wanted was rejected (422)
 
-.dialog
+.transparent.big-number
-  %h1
+  422
+%h3
   The change you wanted was rejected.
-  %p
+%p
   Maybe you tried to change something you didn't have access to.
+
+%p
+  %a{href: "javascript:history.back()"}
+    Go Back?

app/views/errors/error_500.haml

@@ -1,10 +1,12 @@
 - content_for(:page_title) do
   We're sorry, but something went wrong (500)
 
-%header
+.transparent.big-number
-  = image_tag "branding/logos/white2x.png", id: "diaspora_logo"
+  500
-
-%h1
-  500: Internal server error.
 %h3
+  Internal server error.
   Our bad! Sorry about that. :(
+
+%p
+  %a{href: "javascript:history.back()"}
+    Go Back?

app/views/errors/not_public.haml

@@ -2,13 +2,9 @@
 -# licensed under the Affero General Public License version 3 or later. See
 -# the COPYRIGHT file.
 
-- content_for :head do
+.transparent.big-number
-  = stylesheet_link_tag :error_pages, :media => 'all'
-
-#big-number.transparent
   404
-
+%h3
-#content
+  = t("error_messages.post_not_public_or_not_exist")
-  = t('error_messages.post_not_public_or_not_exist')
+%p
-  %br
+  = t("error_messages.login_try_again", login_link: new_user_session_path).html_safe
-  = t('error_messages.login_try_again', :login_link => new_user_session_path).html_safe

app/views/layouts/error_page.haml

@@ -10,5 +10,5 @@
 
     = yield(:head)
 
-  %body{id: "error_#{@code}"}
+  %body{class: "error-#{@code}", id: "error_#{@code}"}
     = yield