[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>
This commit is contained in:
Romain Derie
2019-11-18 13:59:09 +00:00
parent d3fe36d817
commit e9106f8f98
10 changed files with 108 additions and 39 deletions
@@ -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>

After

Width:  |  Height:  |  Size: 1.6 KiB

@@ -100,24 +100,51 @@
</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="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>
</div>
<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">
<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>
</section>
</div>
</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">
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<!-- This template should not use any variable except those provided by http_routing.ir_http._handle_exception -->
+16 -6
View File
@@ -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>
@@ -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>
+8 -5
View File
@@ -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>
@@ -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">
@@ -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">
@@ -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'}">
+6 -16
View File
@@ -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))" />
@@ -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>