From 8a02bc6e716dce0ecbbee694c66a855f18318782 Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Fri, 25 Sep 2015 21:32:51 +0200
Subject: [PATCH] Redesign error pages

---
 app/assets/images/branding/logos/white2x.png | Bin 3020 -> 0 bytes
 app/assets/stylesheets/error_pages.scss      |  97 ++++---------------
 app/controllers/posts_controller.rb          |   3 +-
 app/views/errors/error_404.haml              |   4 +-
 app/views/errors/error_422.haml              |  15 ++-
 app/views/errors/error_500.haml              |  12 ++-
 app/views/errors/not_public.haml             |  14 +--
 app/views/layouts/error_page.haml            |   2 +-
 8 files changed, 44 insertions(+), 103 deletions(-)
 delete mode 100644 app/assets/images/branding/logos/white2x.png

diff --git a/app/assets/images/branding/logos/white2x.png b/app/assets/images/branding/logos/white2x.png
deleted file mode 100644
index fa0aafb9561888d358a4795b6fcf08db45ce5112..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3020
zcmV;-3p4bIP)<h;3K|Lk000e1NJLTq00620001Zm1^@s6ZVq8l0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU-Zb?KzRCwC#Tnlhj)fK%j9|%eKSWF-w
z>KLk}9~6sX1!_pGAL<WKTkUkDrKN(kwe%y}mQWRIJ1}Sqep<kSEuwtdf-P7u6pAHb
z<X0?O1dD))0mLQ*@*&CV-jj9pxY_64^YUH-ow;jfP3GNq?!M=qv(G+z@3UWG@p#;e
z5aD!3MiTdC6UP&K5}S#c#P!4%MZ3$0*AbiWncKZg{7W?a5jsjy?<3|L*Saf;I*j-u
zacxeds1XuDS`zoN&v0B^Yf##qP_8vbLm#1|6x9`(%C%0>&`0Q~t=|<Jh|?4wH9~~b
zN>R(e2oX-}tv^D9NKqq1Tfgs5a{8$SO8qXe{uC^x0`!5w*@kzLl-UPzeEBuRqo?T{
zbtQH)-akgHIEDS`MNG%|@z_-v@kfU%Y7gR9iN(ZAz1D<2x7|WqL!6g@!nQTxe<ks9
z;>U?am?)kkPIoOQ9w5FzeATfZXA(z4)(AsU`MusCu7td8A#&~@e$;rM1;jUv1#m6#
zT#OlG75Z44;M@!%egX2#=kXY<CH{@LjCeRi&M4wwj2kQ1bH<o`f_M|L3zVPp+gj@I
zW5gTre*CvH#*gLwowx&W$ZBIjx$4G9ywefluZhRhmVAUN*q!)%JQ#l<_9wnBuFp{9
zeP6l%H%dF7S;QxZ_3>~VBz`MEme0$GI~?S_OMIMI7$9q-xTlDiO?;48p~$QyZbBbC
zNB$6f2?M{=h!9zeEMtEsvC6o<hnTC}|8-)eLth$+bBQ?#yyu0)2Hby`*vr;dQ_{t8
zH@pl*2~*VXDEH2?bf^mkG7<0q-4&vwdlQtog?PS2Ua8UU1Qy~t2btBx$qtiuFR?j+
zzVbqNC_vtPMY$&t>%{e)ijuLC9#3%W7C?_&6!k1ahxQTkT@<wwaiK*K-XQ*rxCEMS
zLo$k*j_VrMV3HRKE8v3%bBH37Ekv2pz6Q!wLVSgIOlh->m=U6=Ey{!+0X0;@ifEIO
z7NDeCiBpKPF`+HWGcR{k)JDrQHp5W(_ua0%TO7OSgP7|*SgaDfcw@@^76@f55Q^H<
z_^!9Pa7;lXm4_ZdhkF_iE5xAHr&v+*(OJ35Z-G1D;pNX(20xB1TgtpnX~&8?(3q62
z#NotUq8)EZmxL&)lslC;2rRL<8!r(v6}cl61!4m+QA}VyETSC$a?7?m-_qY#p>QSm
zJ6tT9Matry4CV6Moe3ABS+Uw(ML&9DK6ewR6N`x#8HVpoVjtqQ#F@~ADKMb#D{2f%
zCK0ryJguzkWE6Fr(r&Ef*{o=XMBAkpU~{k^7j51nUTTqfv-12gj*9woVmGDj0ODJs
zEl=u=qFn|ocwAWPF#+SR?S5ZzRMZ7Q+br<{Wy^miz+GD_+8!YG742>lZR+6DHyb``
zsW6s%5d*v*^>eA-^&-yNN1PiFvE7fz{HzpZAa)o>tubU3{%C2tleiy|ypPWzL*PfW
z9FYzb_Z=es$0BnDaRRZgk>zM`==W~oqeyW{yoN~n0g-MSNBol#;hR{8EQAfSFlV{O
zHI}>3$T(==EWvc*!GJdJ5g$f|CXTUKVrg4P+>C6Bnf~LxJt;B=)n03b9U}{AN6*l~
z5khvlOiyt->I~6nX~3j<P^1$nOqFc{UErsxOk^W%;)DD4d*V>z8mD=_fk}{P5CiLq
z*NK$@-_JuztI)WXkBO=`a+9)9XKu(s`G?n9|2tBo;Bui5Htfej4+1OkLkWyQO!=HE
zuKj}eEEZ%j6gykAX@)U5ibcvLqZ>^{9R-b+6Bm|<k9Bae-%t2=@lLMFYB6%7KDZ#}
zzgUPqrV`JA#afH}W-`hC^pNl0hSfC{^<uBJPInDH-=^Gm+~L`rqrJvBVH|*6ZfVGv
zX0$O$ZzlVFG~qx(GbSdEVNo+@5T7QF6>a!H=?3B+<W)~f_~#0x<3TDvMJFFIY~w>Q
z@I{KEa+^FycVag29%7Dh;4mJnf)bVD?_X1J>ZO4XIIb2aex^0)F4`Z!goa@QtWcVv
zgxM+XyDiyoDrAoYW!@@Wokr{^ydzA+VUv0?CAGiCH@T<acy1~>+Brose@uLd_)Fp^
zmFM*`+yno#YdThSs<1x9;xsFM?@kA~nGTk$t;mAKD<Sqy;aHqU{FPy7mcYgQ0T$Yq
zaca3Zk+c4e#9;W8=PLtWX;=-@qPq5fEgW_K2(<`j=+ckk!0=Au5Ul#$9aK{xkps&Z
zw*5D^V|~H1#_^_!Dm*tPENYH}+#ZMn@{QnjCIVnSs=oq@j}>{VIsR#umB~KGXF5<x
z+3)$bqNL?em`@9`1^jn{&p3>;<l7Nt^BMXS;(X;Cp1*%Sg_b1DAIwyqe}#kG?usI%
z!uZ^bt=W`a39C0m%*7xmwJWw5F~Lj(g}j45f_TD@kNRjYRR(7_$B3W@2c(Bm4G!c!
ztGv)?Pp=e8OETk71#ZA+UgdWYzhsOFPr%nK8G=MHEF=h9kA-8-i;KeDD%x?h{?8Ny
zuvdv|N0GT$ZMmn$Q8p{$Wcc4jBFnN0p9jEb?b8%>6Rb*(h)g>NME?yb^oMwo&K9Yq
z8J@kIEv`iP5*HG0F{~MHS5H~;hh-Rp3y7B(*M~Z$%EESwYs594gx5r{CBe^L5g<2D
z=^tkpwkJ6kg$QO%EDBK4w)n-rB|f9LF4J(W&gMI@HGM@yVpn2i*#@iF`*6ZN8FW*&
zu(S{h)h|RQE1mqAb~S=3+h8AW!vusy*?y^{2@W218K3uht)+tJ8P_<VoD<+De@Y1s
zQ}L6ZEcmE06O(2ck9@cTi9++QYlF<Zuc&Jjzv;VPYi*^xhqvUpmi$>;P$Mj4rg!p5
zjgQZJt*0+xi{wSckDZ{rj}P{@`YT&r7`SHkCzkI9AcN2;M4|S>+DiqPMEr;%_gq*X
zxvkDl!7f*?y!Ta>x$Y0kIJ~`mL({+c9kyW8KjBDu9RiCQ3<A3Z*IQB}ZN*BYhD<BT
z5$7yK>}7Z+`!$>p?&2V`8b0>DA}6>Q=?^ZJE`{8F@b~(P+}<3A=dgS909=>1h=0cQ
z8xWL8tM`tlpMWiZk32{$tYK)s45>6OLLY^NWrExMD+P102jlWZ;~J08JQ%a(cs9ES
zV`R|NZV-h7#Q`O15{FQenu?;7bd<1ZXi^H28<l=?HPOXN5q5dNJG>q6-7=+AO)E;N
z6U8}4LdNj^fMSsTsD-ul)h4&xs4xpFO4%0B)-3U>wLGgrsj@qyR8UPypny7*(hua7
zG!B*_2nWz^aX=&+<ZGrY{tEk(8!c@MM4<IeuQib`aYEU~CL$QnV6z4s+}!67u=#Dx
zBg-?qlj|nTVBwJfS-WA`w_5tD$z6nZtPcq0f>L1`76$Al1!5<D3KqUL!IWH57S-oD
z#CwP<P^esi0@qc<?-@VUC_>F-6;@S=<);h>A)^BArdgiLHH%LwC44^Cp+1${j#j?6
ztzs^tyPLS(QY7uyTk_9L?y&qM!)8%eprZY!0Y63IqU7-w3$3vbKgZc`>FY7P%iWgZ
zZj+B;JS#9ys~s$=ho9F>K&hQpXuS*dsag05i7cpJE()=eVl3p}PP+UGH4p7#aKdYp
zQ<ffvlb?pwR~=vh`oYJ`^FAoK+X+9d-Z(uOi~jllO>jH>>7Wyrix7~ti0J+W<oCi(
zgG#**m!qxpKB!<y<&XP3_@r0kAf(9{KTZ{Ga}4(UQzL&48*%vI`u|4r@V*1l2c91;
z7<tY}AF|w=5Wo0sIJkSlb1SY1MVO*SNK8>9v=gF#KoKEQ)CdtGMU4<CYJ>=pqW=FQ
zBjj_04jA+Z;o$N>F8FQ2_#KRfr2P@4rxFL(>6-anR@}|eu(U7!C%^zrh%<Jq3GUti
O0000<MNUMnLSTX!VXR01

diff --git a/app/assets/stylesheets/error_pages.scss b/app/assets/stylesheets/error_pages.scss
index d170a478d..b6d6f2a18 100644
--- a/app/assets/stylesheets/error_pages.scss
+++ b/app/assets/stylesheets/error_pages.scss
@@ -3,46 +3,31 @@
 
 html { min-height: 100%; }
 
-#big-number {
-  color: $light-grey;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 250px;
-  line-height: 1em;
-  padding-top: 80px;
-  text-align: center;
-  text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
+.error-404 {
+  background: image-url('peeping-tom.png') no-repeat bottom;
+  background-attachment: fixed;
 }
-.transparent {
-  opacity: 0.8;
-}
-#content {
+
+.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;
-  font-size: 1.25em;
-  left: 0;
-  line-height: 1.5em;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  text-shadow: 0 1px 0 $white;
-}
-
-#error_404 {
-  width: 100%;
   height: 100%;
-  bottom:0px;
   margin: 0px;
-  font-family: 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;
+  width: 100%;
 
-  #big-number {
-    color: $light-grey;
+  .big-number {
+    color: $text-grey;
     font-family: Helvetica, Arial, sans-serif;
     font-size: 250px;
+    line-height: 1em;
+    padding-top: 50px;
     text-shadow: 0 2px 0 #fff, 0 -1px 0 #999;
   }
 
@@ -56,55 +41,7 @@ html { min-height: 100%; }
   }
 
   .transparent {
-    filter: alpha(opacity=80);
-    opacity: 0.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;
+    filter: alpha(opacity = 60);
+    opacity: .6;
   }
 }
diff --git a/app/controllers/posts_controller.rb b/app/controllers/posts_controller.rb
index 1d1abb931..644970d6e 100644
--- a/app/controllers/posts_controller.rb
+++ b/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
 
diff --git a/app/views/errors/error_404.haml b/app/views/errors/error_404.haml
index e66451207..847b92ef6 100644
--- a/app/views/errors/error_404.haml
+++ b/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()"}
diff --git a/app/views/errors/error_422.haml b/app/views/errors/error_422.haml
index f602b05d0..cd3af7d46 100644
--- a/app/views/errors/error_422.haml
+++ b/app/views/errors/error_422.haml
@@ -1,8 +1,13 @@
 - content_for(:page_title) do
   The change you wanted was rejected (422)
 
-.dialog
-  %h1
-    The change you wanted was rejected.
-  %p
-    Maybe you tried to change something you didn't have access to.
+.transparent.big-number
+  422
+%h3
+  The change you wanted was rejected.
+%p
+  Maybe you tried to change something you didn't have access to.
+
+%p
+  %a{href: "javascript:history.back()"}
+    Go Back?
diff --git a/app/views/errors/error_500.haml b/app/views/errors/error_500.haml
index 25e744d3c..eb88e7eda 100644
--- a/app/views/errors/error_500.haml
+++ b/app/views/errors/error_500.haml
@@ -1,10 +1,12 @@
 - content_for(:page_title) do
   We're sorry, but something went wrong (500)
 
-%header
-  = image_tag "branding/logos/white2x.png", id: "diaspora_logo"
-
-%h1
-  500: Internal server error.
+.transparent.big-number
+  500
 %h3
+  Internal server error.
   Our bad! Sorry about that. :(
+
+%p
+  %a{href: "javascript:history.back()"}
+    Go Back?
diff --git a/app/views/errors/not_public.haml b/app/views/errors/not_public.haml
index c330cb28e..bcd908b26 100644
--- a/app/views/errors/not_public.haml
+++ b/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
-  = stylesheet_link_tag :error_pages, :media => 'all'
-
-#big-number.transparent
+.transparent.big-number
   404
-
-#content
-  = t('error_messages.post_not_public_or_not_exist')
-  %br
-  = t('error_messages.login_try_again', :login_link => new_user_session_path).html_safe
+%h3
+  = t("error_messages.post_not_public_or_not_exist")
+%p
+  = t("error_messages.login_try_again", login_link: new_user_session_path).html_safe
diff --git a/app/views/layouts/error_page.haml b/app/views/layouts/error_page.haml
index 5f7fee3d2..97543be53 100644
--- a/app/views/layouts/error_page.haml
+++ b/app/views/layouts/error_page.haml
@@ -10,5 +10,5 @@
 
     = yield(:head)
 
-  %body{id: "error_#{@code}"}
+  %body{class: "error-#{@code}", id: "error_#{@code}"}
     = yield