Merge pull request #82 from muffinresearch/improve-error-pages-842845

Improve error page styling (bug 842845)
mozilla · Mar 13, 2013 · a832fcf · a832fcf
2 parents f1c5a54 + a3c41dc
commit a832fcf
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 30 deletions.
diff --git a/media/css/pay/pay.less b/media/css/pay/pay.less
@@ -34,6 +34,9 @@ body {
     padding: 0;
     margin: 0;
     background: url("https://marketplace-dev-cdn.allizom.org/media/img/mkt/grain.png?d99a08c") rgb(239, 241, 243);
+    &.error-page {
+        padding: 10px;
+    }
 }
 
 .hidden {

diff --git a/webpay/base/templates/404.html b/webpay/base/templates/404.html
@@ -1,15 +1,6 @@
-<!DOCTYPE html>
-<html LANG="{{ LANG }}" dir="{{ DIR }}">
-  <head>
-    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
-    <title>{{ _('Page not found') }}</title>
-  </head>
-  <body>
-    <h1>{{ _('Page not found') }}</h1>
-    <p>
-      {% trans %}
-        Sorry, but we couldn't find the page you're looking for.
-      {% endtrans %}
-    </p>
-  </body>
-</html>
+{% extends "base_error.html" %}
+{% block error_title %}{{ _('Page not found') }}{% endblock %}
+{% block error_heading %}{{ _('Page not found') }}{% endblock %}
+{% block error_content -%}
+    <p>{{ _("Sorry, but we couldn't find the page you're looking for.") }}</p>
+{% endblock %}
diff --git a/webpay/base/templates/500.html b/webpay/base/templates/500.html
@@ -1,15 +1,7 @@
-<!DOCTYPE html>
-<html LANG="{{ LANG }}" dir="{{ DIR }}">
-  <head>
-    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
-    <title>{{ _('Something went wrong!') }}</title>
-  </head>
-  <body>
-    <h1>{{ _('Something went wrong!') }}</h1>
-    <p>
-      {% trans %}
-        There was an error processing that request.
-      {% endtrans %}
-    </p>
-  </body>
-</html>
+{% extends "base_error.html" %}
+{% block error_title %}{{ _('Something went wrong!') }}{% endblock %}
+{% block error_heading %}{{ _('Something went wrong!') }}{% endblock %}
+{% block error_content -%}
+    <p>{{ _('There was an error processing that request.') }}</p>
+    <p>{{ _('Please try again in a few moments.') }}</p>
+{% endblock %}
diff --git a/webpay/base/templates/base_error.html b/webpay/base/templates/base_error.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html LANG="{{ LANG }}" dir="{{ DIR }}">
+  <head>
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>{% block error_title %}{% endblock %}</title>
+    {% block site_css -%}
+      {{ css('pay') }}
+    {%- endblock %}
+
+  </head>
+  <body class="error-page">
+    <h1>{% block error_heading %}{% endblock %}</h1>
+    {% block error_content %}{% endblock %}
+  </body>
+</html>
diff --git a/webpay/urls.py b/webpay/urls.py
@@ -36,9 +36,14 @@
 )
 
 if settings.TEMPLATE_DEBUG:
+
+    from django.views.defaults import page_not_found, server_error
+
     # Remove leading and trailing slashes so the regex matches.
     media_url = settings.MEDIA_URL.lstrip('/').rstrip('/')
     urlpatterns += patterns('',
+        (r'^404$', page_not_found),
+        (r'^500$', server_error),
         (r'^%s/(?P<path>.*)$' % media_url, 'django.views.static.serve',
          {'document_root': settings.MEDIA_ROOT}),
     )