[IMP] http_routing, portal, website: nicer 404 layout

This commit introduces a nicer 404 page, which is basically the same layout as
the one used on Odoo.com.

Also, the 404 is now fully customizable, blocks can be drag'd & drop'd.

task-1966460

closes odoo/odoo#38901

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

10 files changed, 107 insertions, 38 deletions

diff --git a/addons/http_routing/static/src/img/404.svg b/addons/http_routing/static/src/img/404.svg
new file mode 100644
index 00000000000..c2ef1347720
--- /dev/null
+++ b/addons/http_routing/static/src/img/404.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="310" height="120" viewBox="0 0 310 120">
+    <g>
+        <path fill="#A24789" d="M205.104,48.417c-0.688-26.971-22.805-48.624-49.983-48.624c-26.929,0-48.883,21.258-49.954,47.883h-0.045V120c8.337,0,8.337-14.977,16.674-14.977c8.338,0,8.338,14.977,16.674,14.977c8.332,0,8.332-14.977,16.664-14.977c8.335,0,8.335,14.977,16.668,14.977c8.332,0,8.332-14.977,16.661-14.977c8.33,0,8.33,14.977,16.659,14.977V48.418L205.104,48.417zM146.152,64.963c-6.698,0-12.126-5.419-12.126-12.107s5.429-12.106,12.126-12.106c5.839,0,10.715,4.122,11.866,9.612c-1.011-1.197-2.521-1.958-4.21-1.958c-3.044,0-5.511,2.462-5.511,5.501c0,3.04,2.466,5.505,5.511,5.505c1.147,0,2.21-0.351,3.093-0.95C154.875,62.325,150.822,64.963,146.152,64.963z M180.425,64.963c-6.696,0-12.126-5.419-12.126-12.107s5.43-12.106,12.126-12.106c5.841,0,10.716,4.122,11.867,9.612c-1.011-1.197-2.522-1.958-4.212-1.958c-3.044,0-5.512,2.462-5.512,5.501c0,3.04,2.468,5.505,5.512,5.505c1.146,0,2.211-0.351,3.093-0.95C189.148,62.325,185.096,64.963,180.425,64.963z"/>
+    </g>
+    <g>
+        <path fill="#21323A" d="M308.002,84.182h-24.3V120h-5.04V84.182h-59.758v-3.96l58.139-79.017h6.659v78.656h24.3V84.182zM224.484,79.861h54.178V18.304l0.18-12.419h-0.359c-2.52,3.96-5.76,8.64-8.459,12.419L224.484,79.861z"/>
+    </g>
+    <g>
+        <path fill="#21323A" d="M90.002,84.182H65.703V120h-5.04V84.182H0.906v-3.96L59.043,1.205h6.66v78.656h24.299V84.182zM6.486,79.861h54.178V18.304l0.18-12.419h-0.36c-2.52,3.96-5.76,8.64-8.459,12.419L6.486,79.861z"/>
+    </g>
+    <desc>
+        <!-- Monkey HTML formatted-text fallback -->
+        <h1 style="font-size:12em;line-height:1;">404</h1>
+    </desc>
+</svg>
diff --git a/addons/http_routing/views/http_routing_template.xml b/addons/http_routing/views/http_routing_template.xml
index 648b4c3afd8..54d8fac5a29 100644
--- a/addons/http_routing/views/http_routing_template.xml
+++ b/addons/http_routing/views/http_routing_template.xml
@@ -100,22 +100,49 @@
         </t>
     </template>
 
-    <template id="404">
+    <template id="404" name="Page Not Found">
+        <!-- This template needs this odd `oe_structure_xyz` structure to be
+             fully editable (drag & dropable) by the editor. -->
         <t t-call="web.frontend_layout">
             <div id="wrap">
                 <t t-raw="0"/>
-                <div class="oe_structure oe_empty">
+                <div class="oe_structure" id="oe_structure_404_1"/>
+                <div class="oe_structure" id="oe_structure_404_2"/>
+                <div class="oe_structure" id="oe_structure_404_3"/>
+            </div>
+        </t>
+    </template>
+
+    <template id="404_oe_structure_404_1" inherit_id="http_routing.404">
+        <xpath expr="//div[@id='oe_structure_404_1']" position="replace">
+            <div class="oe_structure oe_empty" id="oe_structure_404_1">
+                <section class="pt128">
                     <div class="container">
-                        <h1 class="mt-5">404: Page not found!</h1>
-                        <p>
-                            The page you were looking for could not be found; it is possible you have
-                            typed the address incorrectly, but it has most probably been removed due
-                            to the recent reorganisation.
-                        </p>
+                        <div class="row">
+                            <div class="col-md-6 text-center text-md-right my-auto mb-sm-5">
+                                <img src="/http_routing/static/src/img/404.svg"/>
+                            </div>
+                            <div class="col-md-6 text-center text-md-left my-auto">
+                                <h1 class="sr-only">Error 404</h1>
+                                <h2 class="mb16">We couldn't find the page you're looking for!</h2>
+                                <p><b>Don't panic.</b> If you think it's our mistake, please send us a message on <a href="/contactus">this page</a>.</p>
+                            </div>
+                            <div class="col-md-12 pt40 pb24">
+                                <hr/>
+                            </div>
+                        </div>
                     </div>
-                </div>
+                </section>
             </div>
-        </t>
+        </xpath>
+    </template>
+
+    <template id="404_oe_structure_404_3" inherit_id="http_routing.404">
+        <xpath expr="//div[@id='oe_structure_404_3']" position="replace">
+            <div class="oe_structure oe_empty" id="oe_structure_404_3">
+                <section class="pt104"/>
+            </div>
+        </xpath>
     </template>
 
     <template id="500">
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 3547c21dfe0..043a5be2bad 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -494,12 +494,22 @@
         </t>
     </template>
 
-    <template id="portal_404" inherit_id="http_routing.404">
-        <xpath expr="//p" position="after">
-            <p>Maybe you were looking for one of these popular pages ?</p>
-            <ul>
-                <li><a href="/my">Documents</a></li>
-            </ul>
+    <template id="404_oe_structure_404_2" inherit_id="http_routing.404" name="Portal 404 Popular Pages">
+        <xpath expr="//div[@id='oe_structure_404_2']" position="replace">
+            <div class="oe_structure oe_empty" id="oe_structure_404_2">
+                <section>
+                    <div class="container">
+                        <div class="row">
+                            <div class="col">
+                                <p class="text-center pt24">Maybe you were looking for one of these <b>popular pages?</b></p>
+                                <ul class="list-inline text-center">
+                                    <li class="list-inline-item mb-2"><a href="/my" class="btn btn-secondary">My Account</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
         </xpath>
     </template>
 </odoo>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 8b6db5eb17d..d4628378b68 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <!-- Front-end/Back-end integration -->
-    <template id="user_navbar" inherit_id="website.layout">
+    <template id="user_navbar" inherit_id="website.layout" name="User Navbar">
         <xpath expr="//t[@t-set='html_data']" position="after">
             <t t-set="body_classname" t-value="(body_classname if body_classname else '') + (' o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else '')"/>
         </xpath>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 259aa6bc9b6..a8f2d7130af 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -409,7 +409,7 @@
     </xpath>
 </template>
 
-<template id="language_selector">
+<template id="language_selector" name="Language Selector">
     <ul class="js_language_selector mb0 list-inline" t-if="(request and request.is_frontend_multilang and len(languages) &gt; 1) or (website and (editable or translatable))">
         <li class="list-inline-item">
             <div class="dropup">
@@ -787,9 +787,9 @@
     1,2,3
 </template>
 
-<template id="page_404">
+<template id="page_404" name="Page Not Found">
     <t t-call="http_routing.404">
-        <div class="container">
+        <div class="container o_not_editable">
             <div class="alert alert-info mt32">
                 <p>This page does not exist, but you can create it as you are administrator of this site.</p>
                 <a role="button" class="btn btn-primary js_disable_on_click" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a>
@@ -930,9 +930,12 @@
     </xpath>
 </template>
 
-<template id="portal_404" inherit_id="portal.portal_404">
+<template id="portal_404" inherit_id="portal.404_oe_structure_404_2" name="Website 404 Popular Page Entry">
+    <xpath expr="//li" position="after">
+        <li class="list-inline-item mb-2"><a href="/contactus" class="btn btn-secondary">Contact Us</a></li>
+    </xpath>
     <xpath expr="//li" position="before">
-        <li><a href="/">Homepage</a></li>
+        <li class="list-inline-item mb-2"><a href="/" class="btn btn-secondary">Home</a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index d15a539cfcd..bd3902a1c72 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -26,6 +26,12 @@
 </template>
 
 
+<template id="portal_404" inherit_id="portal.404_oe_structure_404_2" name="Blog 404 Popular Page Entry">
+    <xpath expr="//li[last()]" position="before">
+        <li class="list-inline-item mb-2"><a href="/blog" class="btn btn-secondary">Blog</a></li>
+    </xpath>
+</template>
+
 <!-- ======   Overall pages layout   ===========================================
 ============================================================================ -->
 <template id="index" name="Blog Navigation">
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index 5f99a5f337c..92f05d05a31 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -18,6 +18,12 @@
     </xpath>
 </template>
 
+<template id="portal_404" inherit_id="portal.404_oe_structure_404_2" name="Event 404 Popular Page Entry">
+    <xpath expr="//li[last()]" position="before">
+        <li class="list-inline-item mb-2"><a href="/event" class="btn btn-secondary">Events</a></li>
+    </xpath>
+</template>
+
 <!-- Index -->
 <template id="index" name="Events">
     <t t-call="website.layout">
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 20d464c86c5..cd3cda634b3 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -26,6 +26,12 @@
     </xpath>
 </template>
 
+<template id="portal_404" inherit_id="portal.404_oe_structure_404_2" name="Forum 404 Popular Page Entry">
+    <xpath expr="//li[last()]" position="before">
+        <li class="list-inline-item mb-2"><a href="/forum" class="btn btn-secondary">Forum</a></li>
+    </xpath>
+</template>
+
 <!-- helper -->
 <template id="link_button">
     <form  t-attf-method="#{form_method or 'POST'}" t-att-action="url" t-attf-class="#{form_classes} #{not inDropdown and 'btn btn-sm border'}">
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 053c14be1f1..29e9c6fc67b 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -72,6 +72,12 @@
         </xpath>
     </template>
 
+    <template id="portal_404" inherit_id="portal.404_oe_structure_404_2" name="Shop 404 Popular Page Entry">
+        <xpath expr="//li[last()]" position="before">
+            <li class="list-inline-item mb-2"><a href="/shop" class="btn btn-secondary">Shop</a></li>
+        </xpath>
+    </template>
+
     <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
         <xpath expr="//header//ul[@id='top_menu']/li" position="before">
             <t t-set="website_sale_order" t-value="website.sale_get_order()" />
@@ -122,22 +128,6 @@
         </xpath>
     </template>
 
-    <template id="404">
-        <t t-call="website.layout">
-            <div id="wrap">
-                <div class="oe_structure oe_empty">
-                    <div class="container">
-                        <h1 class="mt32">Product not found!</h1>
-                        <p>Sorry, this product is not available anymore.</p>
-                        <p>
-                            <a t-attf-href="/shop">Return to the product list.</a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </t>
-    </template>
-
     <template id="products_item" name="Products item">
         <t t-set="product_href" t-value="keep(product.website_url, page=(pager['page']['num'] if pager['page']['num']&gt;1 else None))" />
 
diff --git a/addons/website_slides/data/website_data.xml b/addons/website_slides/data/website_data.xml
index e2e8b1c4a78..9ddf9274681 100644
--- a/addons/website_slides/data/website_data.xml
+++ b/addons/website_slides/data/website_data.xml
@@ -11,5 +11,11 @@
             <field name="parent_id" ref="website.main_menu"/>
             <field name="sequence" type="int">50</field>
         </record>
+
+        <template id="portal_404" inherit_id="portal.404_oe_structure_404_2"  name="Slides 404 Popular Page Entry">
+            <xpath expr="//li[last()]" position="before">
+                <li class="list-inline-item mb-2"><a href="/slides" class="btn btn-secondary">Courses</a></li>
+            </xpath>
+        </template>
     </data>
 </odoo>