[FIX] website_event: fix event nav display when no menu is defined

When no menu is defined on an event a custom header is displayed instead of
menus. It holds a link to "All events", link allowing to filter on event
type and address, and a search box. This navigation bar is badly displayed
as it takes too much space, and search is on another line.

This commit fixes it by displaying everything in a clean one line on desktop
and several well ordered lines on mobile.

Event type link is now also displayed only if the relevant option has been
chosen on the Events main page. Otherwise it makes no sense as types are
not displayed by default.

LINKS

Task ID-2169118
odoo/odoo#55967
odoo/enterprise#12438

X-original-commit: c343647506d775cbe09feba1e14b1205da5426a0

3 files changed, 37 insertions, 19 deletions

diff --git a/addons/website_event/i18n/website_event.pot b/addons/website_event/i18n/website_event.pot
index 6a35067dfc1..af1b772770a 100644
--- a/addons/website_event/i18n/website_event.pot
+++ b/addons/website_event/i18n/website_event.pot
@@ -131,7 +131,9 @@ msgstr ""
 
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.layout
-msgid "<i class=\"fa fa-long-arrow-left text-primary mr-2\"/>All Events"
+msgid ""
+"<i class=\"fa fa-long-arrow-left text-primary mr-2\"/>\n"
+"                            <span>All Events</span>"
 msgstr ""
 
 #. module: website_event
@@ -168,21 +170,21 @@ msgstr ""
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_template
 msgid ""
-"<span class=\"py-2\">Tickets</span>\n"
-"                        <span class=\"close d-none\">×</span>"
+"<span class=\"o_wevent_badge badge badge-success ml-3\">\n"
+"                            <i class=\"fa fa-check mr-2\"/>Registered\n"
+"                        </span>"
 msgstr ""
 
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_template
-msgid "<span class=\"text-dark font-weight-bold align-middle pr-2\">Qty</span>"
+msgid ""
+"<span class=\"py-2\">Tickets</span>\n"
+"                        <span class=\"close d-none\">×</span>"
 msgstr ""
 
 #. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.registration_template
-msgid ""
-"<span class=\"text-success ml-3\">\n"
-"                            <i class=\"fa fa-check mr-2\"/>Registered\n"
-"                        </span>"
+msgid "<span class=\"text-dark font-weight-bold align-middle pr-2\">Qty</span>"
 msgstr ""
 
 #. module: website_event
@@ -629,6 +631,16 @@ msgid "Sales start on"
 msgstr ""
 
 #. module: website_event
+#: model_terms:ir.ui.view,arch_db:website_event.layout
+msgid "Search an event ..."
+msgstr ""
+
+#. module: website_event
+#: model_terms:ir.ui.view,arch_db:website_event.index_topbar
+msgid "Search an event..."
+msgstr ""
+
+#. module: website_event
 #: model_terms:ir.ui.view,arch_db:website_event.country_events_list
 msgid "See all events from"
 msgstr ""
diff --git a/addons/website_event/static/src/scss/website_event.scss b/addons/website_event/static/src/scss/website_event.scss
index 1b06d02d7ad..48b2342b806 100644
--- a/addons/website_event/static/src/scss/website_event.scss
+++ b/addons/website_event/static/src/scss/website_event.scss
@@ -151,7 +151,7 @@
     // Multi-line event title, even in mobile mode
     nav > div > a.navbar-brand {
         text-overflow: revert;
-        white-space: break-spaces;
+        white-space: normal;
         overflow: hidden;
         max-width: calc(100% - 80px);
     }
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index 5cf6550e94e..0ff048ad730 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -51,7 +51,7 @@
                 <div class="d-flex align-items-center flex-wrap pl-sm-3 pr-0">
                     <t t-call="website_event.events_search_box">
                         <t t-set="_searches" t-value="searches"/>
-                        <t t-set="_placeholder" t-value="'Search an event ...'"/>
+                        <t t-set="_placeholder">Search an event...</t>
                     </t>
                 </div>
             </div>
@@ -346,15 +346,18 @@
 <!-- Event -->
 <template id="layout" name="Event">
     <t t-call="website.layout">
+        <!-- Options -->
+        <t t-set="opt_events_list_categories" t-value="request.website.viewref('website_event.opt_events_list_categories').active"/>
         <div id="wrap" class="o_wevent_event js_event">
             <t t-if="not event.menu_id">
                 <nav class="navbar navbar-light border-top shadow-sm d-print-none">
-                    <div class="container">
-                        <a href="/event" class="navbar-brand h4 my-0 mr-4">
-                            <i class="fa fa-long-arrow-left text-primary mr-2"/>All Events
+                    <div class="container align-items-baseline justify-content-start">
+                        <a href="/event" class="navbar-brand h4 my-0 mr-0 mr-md-4">
+                            <i class="fa fa-long-arrow-left text-primary mr-2"/>
+                            <span>All Events</span>
                         </a>
-                        <ul class="navbar-nav flex-row">
-                            <li class="nav-item mr-3">
+                        <ul class="navbar-nav flex-row ml-md-auto ml-0">
+                            <li t-if="opt_events_list_categories" class="nav-item mr-3">
                                 <a t-attf-href="/event?type=#{event.event_type_id.id}" t-if="event.event_type_id" class="nav-link">
                                     <i class="fa fa-folder-open text-primary mr-2"/><span t-field="event.event_type_id"/>
                                 </a>
@@ -365,10 +368,13 @@
                                 </a>
                             </li>
                         </ul>
-                        <t t-call="website_event.events_search_box">
-                            <t t-set="_classes" t-value="'ml-auto'"/>
-                            <t t-set="_searches" t-value="searches"/>
-                        </t>
+                        <div class="d-flex align-items-centerflex-wrap pl-sm-3 pr-0">
+                            <t t-call="website_event.events_search_box">
+                                <t t-set="_classes" t-value="'ml-auto'"/>
+                                <t t-set="_searches" t-value="searches"/>
+                                <t t-set="_placeholder">Search an event ...</t>
+                            </t>
+                        </div>
                     </div>
                 </nav>
             </t>