[FIX] website, *: auto-fold menu review

* portal

Review https://github.com/odoo/odoo/commit/392c91cda3133b921e9aca9a7b1c511231027438

- Some elements should not be folded in the "+" dropdown, like the login
  button and related stuff
- Using pull-right instead of navbar-right (https://github.com/odoo/odoo/blob/392c91cda3133b921e9aca9a7b1c511231027438/addons/portal/views/portal_templates.xml#L37)
  broke the mobile version of the menu
- Folded menu <li/> seemed too small (but it was only an illusion)
- On Chrome, the menu was sometimes not folded when it should have been.
  This was because of rounded width calculations.

For the first point, the code has been made so that everything that
follows a divider is considered unfoldable.

1 files changed, 17 insertions, 9 deletions

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 034a1e41b64..52e4e2c5319 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -87,8 +87,9 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
      * @override
      */
     start: function () {
-        this.$topMenu = this.$('#top_menu');
-        this.$items = this.$topMenu.children();
+        var $allItems = this.$('#top_menu').children();
+        this.$unfoldableItems = $allItems.filter('.divider, .divider ~ li');
+        this.$items = $allItems.not(this.$unfoldableItems);
 
         $(window).on('resize', _.debounce(this._adapt.bind(this), 500));
         this._adapt();
@@ -117,13 +118,14 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
         }
 
         this.maxWidth = this.$el.width();
-        this.maxWidth -= _.reduce(this.$el.children().not('.navbar-collapse'), function (sum, el) {
-            return sum + $(el).outerWidth(true);
+        var $unfoldable = this.$unfoldableItems.add(this.$el.children().not('.navbar-collapse'));
+        this.maxWidth -= _.reduce($unfoldable, function (sum, el) {
+            return sum + computeFloatOuterWidthWithMargins(el);
         }, 0);
 
         var nbItems = this.$items.length;
         var menuItemsWidth = _.reduce(this.$items, function (sum, el) {
-            return sum + $(el).outerWidth(true);
+            return sum + computeFloatOuterWidthWithMargins(el);
         }, 0);
 
         if (menuItemsWidth > this.maxWidth) {
@@ -131,24 +133,30 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
             this.$extraItemsToggle.append($('<a/>', {href: '#', class: 'dropdown-toggle', 'data-toggle': 'dropdown'})
                 .append($('<i/>', {class: 'fa fa-plus'})));
             this.$extraItemsToggle.append($('<ul/>', {class: 'dropdown-menu'}));
-            this.$extraItemsToggle.appendTo(this.$topMenu);
+            this.$extraItemsToggle.insertAfter(this.$items.last());
 
-            menuItemsWidth += this.$extraItemsToggle.outerWidth(true);
+            menuItemsWidth += computeFloatOuterWidthWithMargins(this.$extraItemsToggle[0]);
             do {
-                menuItemsWidth -= this.$items.eq(--nbItems).outerWidth(true);
+                menuItemsWidth -= computeFloatOuterWidthWithMargins(this.$items.eq(--nbItems)[0]);
             } while (menuItemsWidth > this.maxWidth);
 
             var $extraItems = this.$items.slice(nbItems).detach();
             this.$extraItemsToggle.children('ul').append($extraItems);
             this.$extraItemsToggle.toggleClass('active', $extraItems.hasClass('active'));
         }
+
+        function computeFloatOuterWidthWithMargins(el) {
+            var rect = el.getBoundingClientRect();
+            var style = window.getComputedStyle(el);
+            return rect.right - rect.left + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+        }
     },
     /**
      * @private
      */
     _restore: function () {
         if (this.$extraItemsToggle) {
-            this.$extraItemsToggle.find("> ul > *").appendTo(this.$topMenu);
+            this.$extraItemsToggle.find("> ul > *").insertBefore(this.$extraItemsToggle);
             this.$extraItemsToggle.remove();
             delete this.$extraItemsToggle;
         }