Merge lp:~elachuni/ubuntu-webcatalog/fix-404 into lp:ubuntu-webcatalog

[Anthony Lenton]

Fixed the 404 error page so that it looks better, makes sense and is generally less navel-looking.

Details
=======
 - Added 404.css and a couple of images that were missing, from the light web-theme.
 - Fixed text per linked bug #585864
 - Made footer match the new one from webcatalog/base.html

[Danny Tamez (zematynnad)]

could get rid of line 7 and line 8 only needs to be
margin: 0;

Why were the changes made to light/404.html (as we're no longer extending it)? Is it for others that might use it?

[lp:~elachuni/ubuntu-webcatalog/fix-404]

83. By Anthony Lenton on 2012-03-19

Removed unused 404.html.

84. By Anthony Lenton on 2012-03-19

Css fix per code review.

[Danny Tamez (zematynnad)]

Looks great.

review: Approve

=== added file 'src/webcatalog/static/light/css/404.css'
--- src/webcatalog/static/light/css/404.css	1970-01-01 00:00:00 +0000
+++ src/webcatalog/static/light/css/404.css	2012-03-19 19:45:22 +0000
@@ -0,0 +1,90 @@
+/* 404 */
+#template-err2 #row-main-row .pane-content{
+  margin: 0;
+  background:url('/assets/light/images/header_error_large_ubuntu.png') no-repeat;
+  padding-left: 8px;
+  width: 944px;
+  height: 244px;
+}
+
+#template-err2 #row-main-row .pane-content .img_404 {
+  width: 207px;
+  height: 247px;
+  float: left;
+}
+
+#template-err2 #row-main-row .pane-content .img_404 h1{
+  color: #fff;
+  margin: 85px 30px;
+}
+
+#template-err2 #row-main-row .pane-content  h2 {
+  padding-bottom:8px;
+  padding-top:24px;
+}
+
+#template-err2 #row-main-row .pane-content  h3 {
+  padding-bottom:8px;
+  padding-top:8px;
+}
+
+#template-err2 #row-main-row  .pane-content p {
+  color: #AEA79F;
+  padding-bottom:8px;
+}
+
+#template-err2 #row-2 .panel-pane {
+  min-height: 192px;
+  padding-bottom:32px;
+  margin-bottom:72px;
+  background-color:#f7f7f7;
+}
+
+#template-err2 #row-2 h2 {
+  font-weight: normal;
+  margin: 8px;
+  width: 210px;
+  color: #333333;
+  letter-spacing: -1px;
+}
+
+#template-err2 #row-2 h2 a {
+  background: url("/assets/light/images/darrow.png") no-repeat right 8px;
+  padding: 1px 13px 0px 0px;
+  display: inline;
+}
+
+#template-err2 #row-2 p {
+  padding-left: 8px;
+  width: 130px;
+}
+
+.row-wrapper-2 {
+    margin-left: 8px;
+}
+
+.grid-4 {
+    background:#f7f7f7;
+    width: 304px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    display: inline;
+    float: left;
+    margin-left: 8px;
+    margin-right: 8px;
+    min-height: 192px;
+    padding-bottom: 32px;
+    margin-bottom: 72px;
+    position: relative;
+}
+
+div.err2_pane_4 img {
+    position: absolute;
+    left: 140px;
+    top: -60px;
+    clip: rect(131px 159px 268px 63px);
+}
+.clear {
+    clear: both;
+}
+

=== added file 'src/webcatalog/static/light/images/darrow.png'
Binary files src/webcatalog/static/light/images/darrow.png	1970-01-01 00:00:00 +0000 and src/webcatalog/static/light/images/darrow.png	2012-03-19 19:45:22 +0000 differ
=== added file 'src/webcatalog/static/light/images/header_error_large_ubuntu.png'
Binary files src/webcatalog/static/light/images/header_error_large_ubuntu.png	1970-01-01 00:00:00 +0000 and src/webcatalog/static/light/images/header_error_large_ubuntu.png	2012-03-19 19:45:22 +0000 differ
=== modified file 'src/webcatalog/templates/404.html'
--- src/webcatalog/templates/404.html	2011-07-04 11:52:26 +0000
+++ src/webcatalog/templates/404.html	2012-03-19 19:45:22 +0000
@@ -1,4 +1,4 @@
-{% extends "light/404.html" %}
+{% extends "webcatalog/base.html" %}
 {% load i18n %}
 
 {% comment %}
@@ -6,11 +6,74 @@
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
-{% block content_container_extra %}
-        <div>
-          <p>
-            {% blocktrans %}(Error <abbr>ID</abbr>: {{ oopsid }}){% endblocktrans %}
-          </p>
-        </div>
+{% block title %}Error | Ubuntu{% endblock %}
+
+{% block header %}{% endblock %}
+
+{% block head_extra %}
+    <link rel="stylesheet" type="text/css" href="{% url wc-combo %}?light/css/reset.css&light/css/styles.css&light/css/404.css&light/css/forms.css"/>
+{% endblock %}
+
+{% block content_container %}
+<div id="template-err2">
+    <div id="row-main-row" >
+        <div class="pane-content">
+            <div class="img_404">
+                <h1>404</h1>
+            </div>
+
+            <h2>Page not found.</h2>
+            <h3>Sorry, we couldn't find the page you were looking for</h3>
+            {% block content_container_default %}
+            <p>Please use the search box above to find what you need.
+                Alternatively, you can make a fresh start at the
+                <a href="http://www.ubuntu.com">Ubuntu home page</a>.
+            </p>
+            {% endblock %}
+        </div>
+    </div>
+    <div>
+      <p>
+        {% blocktrans %}(Error <abbr>ID</abbr>: {{ oopsid }}){% endblocktrans %}
+      </p>
+    </div>
+
+    <div class="clear"> </div>
+
+    <div id="row-2" class="row-wrapper-2">
+
+        <div class="grid-4 err2_pane_4" >
+            <div>
+                <h2><a href="http://www.ubuntu.com/project">About Ubuntu</a></h2>
+                <p></p>
+                <p>Find out more about the Ubuntu Project and how you can contribute.</p>
+                <p></p>
+                <p><img src="http://www.ubuntu.com/sites/default/files/active/error_page_imagery/pictogram_knowledge_medium.png" alt="pictogram_knowledge_medium" /></p>
+            </div>
+        </div>
+
+        <div class="grid-4 err2_pane_4" >
+            <div>
+                <h2><a href="http://www.ubuntu.com/desktop/get-ubuntu">Get Ubuntu</a></h2>
+                <p></p>
+                <p>Download Ubuntu today.</p>
+                <p></p>
+                <p><img src="http://www.ubuntu.com/sites/default/files/active/03_global/02_pictograms/pictogram_download_medium.png" alt="pictogram_download_medium" /></p>
+            </div>
+        </div>
+
+        <div class="grid-4 err2_pane_4" >
+            <div>
+                <h2><a href="http://shop.canonical.com">Visit the shop</a></h2>
+                <p></p>
+                <p>Buy Ubuntu CDs, accessories or training at the Canonical shop.</p>
+                <p></p>
+                <p><img src="http://www.ubuntu.com/sites/default/files/active/error_page_imagery/pictogram_shop_medium.png" alt="pictogram_shop_medium.png" /></p>
+            </div>
+        </div>
+
+        <div class="clear"> </div>
+    </div>
+</div>
 {% endblock %}
 

=== removed file 'src/webcatalog/templates/light/404.html'
--- src/webcatalog/templates/light/404.html	2012-03-05 17:41:06 +0000
+++ src/webcatalog/templates/light/404.html	1970-01-01 00:00:00 +0000
@@ -1,73 +0,0 @@
-{% extends 'light/index.1col.html' %}
-
-{% block title %}Error | Ubuntu{% endblock %}
-
-{% block header %}{% endblock %}
-
-{% block head_extra %}
-    <link rel="stylesheet" type="text/css" href="{% url wc-combo %}?light/css/reset.css&light/css/styles.css&light/css/404.css&light/css/forms.css"/>
-{% endblock %}
-
-{% block content_container %}
-<div id="template-err2">
-    <div id="row-main-row" >
-        <div class="pane-content">
-            <div class="img_404">
-                <h1>404</h1>
-            </div>
-            <h2>This page does not exist.</h2>
-            <h3>Well, obviously <em>this</em> page exists. But the
-                page you requested does not exist. This page is just
-                here to tell you that the page you requested does not exist.
-            </h3>
-            {% block content_container_default %}
-            <p>You can use the search box above to find what you need.
-                Or you can make a fresh start at the
-                <a href="http://www.ubuntu.com">Ubuntu home page</a>.
-            </p>
-            <p>Still can't find what you're looking for?
-                <a href="/contact-us">Get in touch today</a>.
-            </p>
-            {% endblock %}
-        </div>
-    </div>
-    {% block content_container_extra %}{% endblock %}
-
-    <div class="clear"> </div>
-
-    <div id="row-2" class="row-wrapper-2">
-
-        <div class="grid-4 err2_pane_4" >
-            <div>
-                <h2><a href="http://www.ubuntu.com/project">About Ubuntu</a></h2>
-                <p></p>
-                <p>Find out more about the Ubuntu Project and how you can contribute.</p>
-                <p></p>
-                <p><img src="http://www.ubuntu.com/sites/default/files/active/error_page_imagery/pictogram_knowledge_medium.png" alt="pictogram_knowledge_medium" /></p>
-            </div>
-        </div>
-
-        <div class="grid-4 err2_pane_4" >
-            <div>
-                <h2><a href="http://www.ubuntu.com/desktop/get-ubuntu">Get Ubuntu</a></h2>
-                <p></p>
-                <p>Download Ubuntu today.</p>
-                <p></p>
-                <p><img src="http://www.ubuntu.com/sites/default/files/active/03_global/02_pictograms/pictogram_download_medium.png" alt="pictogram_download_medium" /></p>
-            </div>
-        </div>
-
-        <div class="grid-4 err2_pane_4" >
-            <div>
-                <h2><a href="http://shop.canonical.com">Visit the shop</a></h2>
-                <p></p>
-                <p>Buy Ubuntu CDs, accessories or training at the Canonical shop.</p>
-                <p></p>
-                <p><img src="http://www.ubuntu.com/sites/default/files/active/error_page_imagery/pictogram_shop_medium.png" alt="pictogram_shop_medium.png" /></p>
-            </div>
-        </div>
-
-        <div class="clear"> </div>
-    </div>
-</div>
-{% endblock %}