From 154fa878bd33c0185baa07247f05920643620d5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@odoo.com>
Date: Fri, 7 Aug 2020 14:07:30 +0000
Subject: [PATCH] [FIX] website_event(_online): improve event menu header
 display

PURPOSE

Clean menu display, notably when having long event names and/or in mobile
mode.

SPECIFICATIONS

Do not use an ellipsis or crop event name: display it completely even if it
makes it take several lines.

Ensure event menu items are not broken into multiline. Each menu name should
be displayed completely. Move menu name on multiline instead.

In mobile, remove some padding to give as much space as possible to the event
name.

LINKS

Related to testing of EventOnline
Task ID-2314778
Fwd port of PR #55625
PR #55642
---
 .../static/src/scss/website_event.scss            | 15 +++++++++++++++
 addons/website_event/views/event_templates.xml    |  4 ++--
 .../static/src/scss/website_event_templates.scss  |  8 --------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/addons/website_event/static/src/scss/website_event.scss b/addons/website_event/static/src/scss/website_event.scss
index 479880ef1da..5600f4c5670 100644
--- a/addons/website_event/static/src/scss/website_event.scss
+++ b/addons/website_event/static/src/scss/website_event.scss
@@ -148,6 +148,21 @@
 }
 
 .o_wevent_event {
+    // Multi-line event title, even in mobile mode
+    nav > div > a.navbar-brand {
+        text-overflow: revert;
+        white-space: break-spaces;
+        overflow: hidden;
+        max-width: calc(100% - 80px);
+    }
+
+    // Ensure menu labels are not split
+    #o_wevent_event_submenu {
+        li.nav-item {
+            white-space: nowrap;
+        }
+    }
+
     .o_wevent_event_title {
         margin: 3rem 0;
 
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index f37d9c4998d..c3cf0609461 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -374,8 +374,8 @@
             </t>
             <t t-else="">
                 <nav class="navbar navbar-light border-top shadow-sm navbar-expand-md">
-                    <div class="container">
-                        <a href="#" t-field="event.name" class="navbar-brand h4 my-0 mr-4"/>
+                    <div class="container align-items-baseline">
+                        <a href="#" t-field="event.name" class="navbar-brand h4 my-0 mr-0 mr-md-4"/>
                         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
                             <span class="navbar-toggler-icon"></span>
                         </button>
diff --git a/addons/website_event_online/static/src/scss/website_event_templates.scss b/addons/website_event_online/static/src/scss/website_event_templates.scss
index e0bef5a6c54..390536d6f97 100644
--- a/addons/website_event_online/static/src/scss/website_event_templates.scss
+++ b/addons/website_event_online/static/src/scss/website_event_templates.scss
@@ -2,14 +2,6 @@
 
 .o_wevent_index, .o_wevent_event {
 
-    // Text Ellipsis for Event title in mobile mode
-    nav > div > a.navbar-brand {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: calc(100% - 80px);
-    }
-
     // Simple colored tags according to assigned background color
     @for $size from 1 through length($o-colors) {
         .o_tag_color_#{$size - 1} {