Merge pull request #2176 from sarken/AO3-4345

AO3-4345 Error page markup and styling corrections
otwcode · Oct 15, 2015 · 9edd454 · 9edd454
2 parents 82bccb4 + 533d1f5
commit 9edd454
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 110 deletions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -25,6 +25,9 @@ def classes_for_main
     if controller.controller_name == "home"
       class_names = "system docs " + controller.action_name
     end
+    if controller.controller_name == "errors"
+      class_names = "system " + controller.controller_name + " error-" + controller.action_name
+    end
 
     class_names
   end

diff --git a/app/views/errors/403.html.erb b/app/views/errors/403.html.erb
@@ -1,5 +1,3 @@
-<div id="main" class="error">
-  <h2 class="heading">Error 403</h2>
-  <h3 class="heading">Forbidden</h3>
-  <p>You do not have permission to access the requested file on this server.</p>
-</div>
+<h2 class="heading">Error 403</h2>
+<h3 class="heading">Forbidden</h3>
+<p>You do not have permission to access the requested file on this server.</p>
diff --git a/app/views/errors/404.html.erb b/app/views/errors/404.html.erb
@@ -1,5 +1,8 @@
-<div id="main" class="error">
-  <h2 class="heading">Error 404</h2>
-  <h3 class="heading"> <p>The page you were looking for doesn't exist<% if  defined? @message %>: <%= @message %>.<%else%>.<% end %></h3> 
-  <p>You may have mistyped the address or the page may have been deleted.</p>
-</div>
+<h2 class="heading">Error 404</h2>
+<h3 class="heading">The page you were looking for doesn't exist.</h3>
+<% if defined? @message %>
+  <p>
+    <%= @message %>
+  </p>
+<% end %>
+<p>You may have mistyped the address or the page may have been deleted.</p>
diff --git a/app/views/errors/422.html.erb b/app/views/errors/422.html.erb
@@ -1,5 +1,3 @@
-<div id="main" class="error">
-  <h2 class="heading">Error 422</h2>
-  <h3 class="heading">The change you wanted was rejected.</h3>
-  <p>Maybe you tried to change something you didn't have access to.</p>
-</div>
+<h2 class="heading">Error 422</h2>
+<h3 class="heading">The change you wanted was rejected.</h3>
+<p>Maybe you tried to change something you didn't have access to.</p>
diff --git a/app/views/errors/500.html.erb b/app/views/errors/500.html.erb
@@ -1,5 +1,3 @@
-<div id="main" class="error">
-  <h2 class="heading">Error 500</h2>
-  <h3 class="heading">We're sorry, but something went wrong.</h3>
-  <p>We've been notified about this issue and we'll take a look at it shortly</p>
-</div>
+<h2 class="heading">Error 500</h2>
+<h3 class="heading">We're sorry, but something went wrong.</h3>
+<p>We've been notified about this issue and we'll take a look at it shortly.</p>
diff --git a/public/500.html b/public/500.html
@@ -93,10 +93,10 @@ <h3 class="landmark heading">Site Navigation</h3>
       <div class="clear"></div>
     </div>
     <!-- END header -->
-    <div id="main" class="system error 500">
-      <h2>Error 500</h2>
-      <h3>We're sorry, but something went wrong.</h3>
-      <p>We've been notified about this issue and we'll take a look at it shortly</p>
+    <div id="main" class="system errors error-500 region">
+      <h2 class="heading">Error 500</h2>
+      <h3 class="heading">We're sorry, but something went wrong.</h3>
+      <p>We've been notified about this issue and we'll take a look at it shortly.</p>
     </div>
     <!-- END main -->
     <div id="footer" role="contentinfo" class="region">

diff --git a/public/502.html b/public/502.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<meta name="keywords" content="fanfiction, transformative works, otw, fair use, archive" />
-		<meta name="language" content="en-US" />
-		<meta name="subject" content="fandom" />
-		<meta name="description" content="An Archive of Our Own, a project of the
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="keywords" content="fanfiction, transformative works, otw, fair use, archive" />
+    <meta name="language" content="en-US" />
+    <meta name="subject" content="fandom" />
+    <meta name="description" content="An Archive of Our Own, a project of the
     Organization for Transformative Works" />
-		<meta name="distribution" content="GLOBAL" />
-		<meta name="classification" content="transformative works" />
-		<meta name="author" content="Organization for Transformative Works" />
-		<title>
-			Archive Down
-		</title>
+    <meta name="distribution" content="GLOBAL" />
+    <meta name="classification" content="transformative works" />
+    <meta name="author" content="Organization for Transformative Works" />
+    <title>
+      Archive Down
+    </title>
     <link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/1_site_screen_.css">
     <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), handheld" href="/stylesheets/skins/skin_873_archive_2_0/4_site_maxwidth.handheld_.css">
     <link rel="stylesheet" type="text/css" media="speech" href="/stylesheets/skins/skin_873_archive_2_0/5_site_speech_.css">
@@ -22,8 +22,8 @@
     <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/9_site_screen_IE6.css"><![endif]-->
     <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/10_site_screen_IE7.css"><![endif]--> 
   </head>
-	<body>
-		<ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
+  <body>
+    <ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
     <!-- BEGIN header -->
     <div id="header" class="region">
       <h1 class="heading">
@@ -77,7 +77,7 @@ <h3 class="landmark heading">Site Navigation</h3>
             <li><a href="/donate">Donate or Volunteer</a></li>
           </ul>
         </li>
-	      <li class="search"><form accept-charset="UTF-8" action="/works/search" class="search" id="search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
+        <li class="search"><form accept-charset="UTF-8" action="/works/search" class="search" id="search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
           <fieldset>
             <legend>Search Works</legend>
               <p>
@@ -93,16 +93,16 @@ <h3 class="landmark heading">Site Navigation</h3>
       <div class="clear"></div>
     </div>
     <!-- END header -->
-    <div id="main" class="system error 502 slow">
-      <h2>Error 502</h2>
-      <h3>The page was responding too slowly.</h3>
+    <div id="main" class="system errors error-502 region">
+      <h2 class="heading">Error 502</h2>
+      <h3 class="heading">The page was responding too slowly.</h3>
       <!--plain english suggestion: There are so many people using the archive right now, we can't show your page. -->
       <p>We're experiencing heavy load. The problem should be temporary; try refreshing the page.</p>
       <p>Follow <a href="http://twitter.com/ao3_status/">@AO3_Status</a> on Twitter for updates if this keeps happening.</p>
     </div>
     <!-- END main -->
     <div id="footer" role="contentinfo" class="region">
-	    <h3 class="landmark heading">Footer</h3>
+      <h3 class="landmark heading">Footer</h3>
       <ul class="navigation actions" role="navigation">
         <li class="module group">
           <h4 class="heading">About the Archive</h4>

diff --git a/public/503.html b/public/503.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<meta name="keywords" content="fanfiction, transformative works, otw, fair use, archive" />
-		<meta name="language" content="en-US" />
-		<meta name="subject" content="fandom" />
-		<meta name="description" content="An Archive of Our Own, a project of the
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="keywords" content="fanfiction, transformative works, otw, fair use, archive" />
+    <meta name="language" content="en-US" />
+    <meta name="subject" content="fandom" />
+    <meta name="description" content="An Archive of Our Own, a project of the
     Organization for Transformative Works" />
-		<meta name="distribution" content="GLOBAL" />
-		<meta name="classification" content="transformative works" />
-		<meta name="author" content="Organization for Transformative Works" />
-		<title>
+    <meta name="distribution" content="GLOBAL" />
+    <meta name="classification" content="transformative works" />
+    <meta name="author" content="Organization for Transformative Works" />
+    <title>
       Page responding too slowly.
-		</title>
+    </title>
     <link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/1_site_screen_.css">
     <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), handheld" href="/stylesheets/skins/skin_873_archive_2_0/4_site_maxwidth.handheld_.css">
     <link rel="stylesheet" type="text/css" media="speech" href="/stylesheets/skins/skin_873_archive_2_0/5_site_speech_.css">
@@ -22,8 +22,8 @@
     <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/9_site_screen_IE6.css"><![endif]-->
     <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/10_site_screen_IE7.css"><![endif]--> 
   </head>
-	<body>
-		<ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
+  <body>
+    <ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
     <!-- BEGIN header -->
     <div id="header" class="region">
       <h1 class="heading">
@@ -93,15 +93,15 @@ <h3 class="landmark heading">Site Navigation</h3>
       <div class="clear"></div>
     </div>
     <!-- END header -->
-    <div id="main" class="system error 503">
-      <h2>Error 503</h2>
-      <h3>The page was responding too slowly.</h3>
+    <div id="main" class="system errors error-503 region">
+      <h2 class="heading">Error 503</h2>
+      <h3 class="heading">The page was responding too slowly.</h3>
       <!--plain english suggestion: There are so many people using the archive right now, we can't show your page. -->
       <p>Follow <a href="http://twitter.com/ao3_status/">@AO3_Status</a> on Twitter for updates if this keeps happening.</p>
     </div>
     <!-- END main -->
     <div id="footer" role="contentinfo" class="region">
-	    <h3 class="landmark heading">Footer</h3>
+      <h3 class="landmark heading">Footer</h3>
       <ul class="navigation actions" role="navigation">
         <li class="module group">
           <h4 class="heading">About the Archive</h4>

diff --git a/public/507.html b/public/507.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<meta name="keywords" content="fanfiction, transformative works, otw, fair use, archive" />
-		<meta name="language" content="en-US" />
-		<meta name="subject" content="fandom" />
-		<meta name="description" content="An Archive of Our Own, a project of the
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="keywords" content="fanfiction, transformative works, otw, fair use, archive" />
+    <meta name="language" content="en-US" />
+    <meta name="subject" content="fandom" />
+    <meta name="description" content="An Archive of Our Own, a project of the
     Organization for Transformative Works" />
-		<meta name="distribution" content="GLOBAL" />
-		<meta name="classification" content="transformative works" />
-		<meta name="author" content="Organization for Transformative Works" />
-		<title>
-                 Exceeded maximum posting rate.
-		</title>
+    <meta name="distribution" content="GLOBAL" />
+    <meta name="classification" content="transformative works" />
+    <meta name="author" content="Organization for Transformative Works" />
+    <title>
+      Exceeded maximum posting rate.
+    </title>
     <link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/1_site_screen_.css">
     <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), handheld" href="/stylesheets/skins/skin_873_archive_2_0/4_site_maxwidth.handheld_.css">
     <link rel="stylesheet" type="text/css" media="speech" href="/stylesheets/skins/skin_873_archive_2_0/5_site_speech_.css">
@@ -22,8 +22,8 @@
     <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/9_site_screen_IE6.css"><![endif]-->
     <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/10_site_screen_IE7.css"><![endif]--> 
   </head>
-	<body>
-		<ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
+  <body>
+    <ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
     <!-- BEGIN header -->
     <div id="header" class="region">
       <h1 class="heading">
@@ -77,7 +77,7 @@ <h3 class="landmark heading">Site Navigation</h3>
             <li><a href="/donate">Donate or Volunteer</a></li>
           </ul>
         </li>
-	      <li class="search"><form accept-charset="UTF-8" action="/works/search" class="search" id="search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
+        <li class="search"><form accept-charset="UTF-8" action="/works/search" class="search" id="search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
           <fieldset>
             <legend>Search Works</legend>
               <p>
@@ -93,15 +93,15 @@ <h3 class="landmark heading">Site Navigation</h3>
       <div class="clear"></div>
     </div>
     <!-- END header -->
-    <div id="main" class="system error 507">
-      <h2>Error 507</h2>
-      <h3>Exceeded maximum posting rate.</h3>
-      <p> To combat bots, we are currently banning IP addresses that post too many works in a short time period. If you see this page repeatedly please pause a while between posting works. If you are banned, you will be unable to access the Archive. Access will be restored 24 hours after the ban started.</p>
+    <div id="main" class="system errors error-507 region">
+      <h2 class="heading">Error 507</h2>
+      <h3 class="heading">Exceeded maximum posting rate.</h3>
+      <p>To combat bots, we are currently banning IP addresses that post too many works in a short time period. If you see this page repeatedly please pause a while between posting works. If you are banned, you will be unable to access the Archive. Access will be restored 24 hours after the ban started.</p>
       <p>Follow <a href="http://twitter.com/ao3_status/">@AO3_Status</a> on Twitter for updates.</p>
     </div>
     <!-- END main -->
     <div id="footer" role="contentinfo" class="region">
-	    <h3 class="landmark heading">Footer</h3>
+      <h3 class="landmark heading">Footer</h3>
       <ul class="navigation actions" role="navigation">
         <li class="module group">
           <h4 class="heading">About the Archive</h4>

diff --git a/public/nomaintenance.html b/public/nomaintenance.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<meta name="keywords" content="fanfiction, transformative works, otw, fair use, archive" />
-		<meta name="language" content="en-US" />
-		<meta name="subject" content="fandom" />
-		<meta name="description" content="An Archive of Our Own, a project of the
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="keywords" content="fanfiction, transformative works, otw, fair use, archive" />
+    <meta name="language" content="en-US" />
+    <meta name="subject" content="fandom" />
+    <meta name="description" content="An Archive of Our Own, a project of the
     Organization for Transformative Works" />
-		<meta name="distribution" content="GLOBAL" />
-		<meta name="classification" content="transformative works" />
-		<meta name="author" content="Organization for Transformative Works" />
-		<title>
-			Archive Down for Maintenance
-		</title>
+    <meta name="distribution" content="GLOBAL" />
+    <meta name="classification" content="transformative works" />
+    <meta name="author" content="Organization for Transformative Works" />
+    <title>
+      Archive Down for Maintenance
+    </title>
     <link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/1_site_screen_.css">
     <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), handheld" href="/stylesheets/skins/skin_873_archive_2_0/4_site_maxwidth.handheld_.css">
     <link rel="stylesheet" type="text/css" media="speech" href="/stylesheets/skins/skin_873_archive_2_0/5_site_speech_.css">
@@ -22,8 +22,8 @@
     <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/9_site_screen_IE6.css"><![endif]-->
     <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/skins/skin_873_archive_2_0/10_site_screen_IE7.css"><![endif]--> 
   </head>
-	<body>
-		<ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
+  <body>
+    <ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
     <!-- BEGIN header -->
     <div id="header" class="region">
       <h1 class="heading">
@@ -76,7 +76,7 @@ <h3 class="landmark heading">Site Navigation</h3>
             <li><a href="/donate">Donate or Volunteer</a></li>
           </ul>
         </li>
-	      <li class="search"><form accept-charset="UTF-8" action="/works/search" class="search" id="search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
+        <li class="search"><form accept-charset="UTF-8" action="/works/search" class="search" id="search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
           <fieldset>
             <legend>Search Works</legend>
               <p>
@@ -92,15 +92,14 @@ <h3 class="landmark heading">Site Navigation</h3>
       <div class="clear"></div>
     </div>
     <!-- END header -->
-    <div id="main" class="system error 503 maintenance">
-			<h2>Error 503 - Service unavailable</h2>
-			<h3>The archive is down for maintenance.</h3>
-			<p>If <a href="http://twitter.com/ao3_status/">@AO3_Status</a> says the site is up, but you still see this page, try <a href="http://kb.iu.edu/data/ahic.html">clearing your browser cache</a> and refreshing the page.
-			</p>
-		</div>
+    <div id="main" class="system errors error-503-maintenance region">
+      <h2 class="heading">Error 503 - Service unavailable</h2>
+      <h3 class="heading">The Archive is down for maintenance.</h3>
+      <p>If <a href="http://twitter.com/ao3_status/">@AO3_Status</a> says the site is up, but you still see this page, try <a href="http://kb.iu.edu/data/ahic.html">clearing your browser cache</a> and refreshing the page.</p>
+    </div>
     <!-- END main -->
     <div id="footer" role="contentinfo" class="region">
-	    <h3 class="landmark heading">Footer</h3>
+      <h3 class="landmark heading">Footer</h3>
       <ul class="navigation actions" role="navigation">
         <li class="module group">
           <h4 class="heading">About the Archive</h4>

diff --git a/public/stylesheets/site/2.0/05-region-main.css b/public/stylesheets/site/2.0/05-region-main.css
@@ -28,23 +28,19 @@ http://otwcode.github.com/docs/front_end_coding/patterns/supertypes
   padding: 2em 7.5em 3.5em;
 }
 
-#main.error, #main.slow, #main.maintenance {
+#main.errors {
   background: url("/images/ao3_logos/sadface.png") top right no-repeat;
-  border: 0;
-  color: #222;
-    border-radius: 0;
-    box-shadow: none;
 }
 
-#main.slow {
+#main.error-502 {
   background: url("/images/ao3_logos/ao3-502.png") top right no-repeat;
 }
 
-#main.maintenance {
+#main.error-503-maintenance {
   background: url("/images/ao3_logos/logo-ruby.png") top right no-repeat;
 }
 
-#main.error p {
+#main.errors p {
   margin-right: 400px;
 }