[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
This commit is contained in:
Mitul Shah
2021-11-25 13:28:51 +00:00
committed by Thibault Delavallée
parent 17497787fd
commit c11f25996a
@@ -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'"/>