Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

AO3-4345 Error page markup and styling corrections #2176

Merged
merged 7 commits into from Oct 15, 2015
Merged

AO3-4345 Error page markup and styling corrections #2176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6504635
AO3-4345 Error page markup and styling overhaul
sarken Sep 15, 2015
d226791
AO3-4345 Remove selectors that are now redundant
sarken Sep 15, 2015
43b79db
AO3-4345 Remove maintenance CSS that is no longer used
sarken Sep 15, 2015
9cc9d03
AO3-4345 Use errors-# as class so we don't need slow class for CSS
sarken Sep 15, 2015
b8093b7
AO3-4345 Maintenance 503 page different from regular 503 page
sarken Sep 15, 2015
8b4784c
AO3-4345 Convert tabs to spaces on static error pages
sarken Sep 15, 2015
533d1f5
AO3-4345 Use the ACTUAL class name for the maintenance page in the CSS
sarken Sep 15, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/helpers/application_helper.rb
View file
Open in desktop
Expand Up @@ -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
Expand Down
8 changes: 3 additions & 5 deletions app/views/errors/403.html.erb
View file
Open in desktop
@@ -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>
13 changes: 8 additions & 5 deletions app/views/errors/404.html.erb
View file
Open in desktop
@@ -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>
8 changes: 3 additions & 5 deletions app/views/errors/422.html.erb
View file
Open in desktop
@@ -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>
8 changes: 3 additions & 5 deletions app/views/errors/500.html.erb
View file
Open in desktop
@@ -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>
8 changes: 4 additions & 4 deletions public/500.html
View file
Open in desktop
Expand Up @@ -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">
Expand Down
38 changes: 19 additions & 19 deletions public/502.html
View file
Open in desktop
@@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
34 changes: 17 additions & 17 deletions public/503.html
View file
Open in desktop
@@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
40 changes: 20 additions & 20 deletions public/507.html
View file
Open in desktop
@@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
43 changes: 21 additions & 22 deletions public/nomaintenance.html
View file
Open in desktop
@@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
12 changes: 4 additions & 8 deletions public/stylesheets/site/2.0/05-region-main.css
View file
Open in desktop
Expand Up @@ -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 {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The .error class controls the styling for our flash messages, which have borders, font colors, and shadows. Changing the name we use on our error pages eliminates the need for these styles (besides, we usually use plurals in the #main div).

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;
}

Expand Down