From c11f25996abd32e201b947d2ba48a178b402ca23 Mon Sep 17 00:00:00 2001
From: Mitul Shah <mish@odoo.com>
Date: Tue, 10 Aug 2021 09:06:57 +0000
Subject: [PATCH] [FIX] website_event: fix event sub-menus display in mobile

Currently in the mobile view, all the event sub-menus are showing horizontally
which looks ugly and hard for selection. This horizontal display is ok for
big screens, not for mobile.

This commit changes the direction of the events sub-menu from horizontal to
vertical when being in mobile. It also sets the left margin to fix the
flicker effect in the mobile view.

Task-2616588

X-original-commit: 2cb67c6be51af61fbdbe6f069e6a32839d7a682a
Part-of: odoo/odoo#80391
---
 addons/website_event/views/event_templates_page.xml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/website_event/views/event_templates_page.xml b/addons/website_event/views/event_templates_page.xml
index 26c80fd65bb..3cd22fcb57d 100644
--- a/addons/website_event/views/event_templates_page.xml
+++ b/addons/website_event/views/event_templates_page.xml
@@ -38,11 +38,11 @@
                 <nav class="navbar navbar-light border-top shadow-sm navbar-expand-md">
                     <div class="container align-items-baseline">
                         <a t-att-href="event.website_url" t-field="event.name" class="navbar-brand h4 my-0 mr-0"/>
-                        <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">
+                        <button class="navbar-toggler ml-auto" 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>
                         <div id="o_wevent_event_submenu" class="collapse navbar-collapse">
-                            <ul class="navbar-nav w-100 d-flex flex-row flex-wrap" t-att-data-menu_name="editable and 'Event Menu'" t-att-data-content_menu_id="editable and event.menu_id.id">
+                            <ul class="navbar-nav w-100 flex-md-wrap" t-att-data-menu_name="editable and 'Event Menu'" t-att-data-content_menu_id="editable and event.menu_id.id">
                                 <t t-foreach="event.menu_id.child_id" t-as="submenu">
                                     <t t-call="website.submenu">
                                         <t t-set="item_class" t-value="'nav-item'"/>