diff options
| author | Dharmraj Jhala <dja@odoo.com> | 2019-04-11 07:05:54 +0000 |
|---|---|---|
| committer | Dharmraj Jhala <dja@odoo.com> | 2019-04-18 05:18:49 +0000 |
| commit | c1dbc3f5ab2e8d76b2c9acb272290618effb0030 (patch) | |
| tree | 72cba1df2ac9f90e5e24dc409b4dcd4e5e0bb76b /addons/website/static/src | |
| parent | 82f33e90d5db964ff207e7037311fae986636b53 (diff) | |
[IMP] website: make hamburger menu scrollable in small devices
Currently, in small devices, hamburger menu of the cloned navbar
is not scrollable due to fixed position.
This commit improves the behavior and makes the affixed navbar
scrollable, enabling user to navigate through all the available
menus.
task-1938637
closes odoo/odoo#32359
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Diffstat (limited to 'addons/website/static/src')
| -rw-r--r-- | addons/website/static/src/js/content/menu.js | 6 | ||||
| -rw-r--r-- | addons/website/static/src/scss/website.scss | 6 |
2 files changed, 12 insertions, 0 deletions
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js index 913740098b6..3034c2e5e70 100644 --- a/addons/website/static/src/js/content/menu.js +++ b/addons/website/static/src/js/content/menu.js @@ -34,6 +34,12 @@ publicWidget.registry.affixMenu = publicWidget.Widget.extend({ $source.attr('data-target', targetIDSelector + '_clone'); $target.attr('id', targetIDSelector.substr(1) + '_clone'); }); + // While scrolling through navbar menus, body should not be scrolled with it + this.$headerClone.find('div.navbar-collapse').on('show.bs.collapse', function () { + $(document.body).addClass('overflow-hidden'); + }).on('hide.bs.collapse', function () { + $(document.body).removeClass('overflow-hidden'); + }); // Window Handlers $(window).on('resize.affixMenu scroll.affixMenu', _.throttle(this._onWindowUpdate.bind(this), 200)); diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index e384e8df34b..5fb20b332c8 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -1050,6 +1050,12 @@ table.table_desc tr td { background: $light; margin-top: -999px; transition: margin-top 500ms ease 0s; + @include media-breakpoint-down(sm) { + .navbar-collapse { + max-height: 70vh; + overflow-y: auto; + } + } &.affixed { margin-top: 0px !important; // the default margin-top is adapted in JS } |