From acedfc688202bad966aaedd1fe8e815ae8452b8e Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Mon, 16 Jan 2023 13:23:17 +0000 Subject: [PATCH] [FIX] website: fix scroll table of content This commit fixes two bugs with the table of content snippet: - Before this commit, the scrollspy position for the table of content navbar was incorrect in fullscreen or edit mode due to the calculation being based on the presence of the main navbar, which is not present in those modes. - Before this commit, when the table of content navbar contained enough elements to exceed the height of the page, the bottom elements were not accessible without first scrolling through the entire table of content. This commit addresses this issue by adding a scrollbar to the navbar, allowing for easier access to these links. opw-3115597 closes odoo/odoo#114569 X-original-commit: e5d826e03be1fe8c617ef9a8bb8169ad196657fd Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/snippets/s_table_of_content/000.js | 3 ++- addons/website/static/src/snippets/s_table_of_content/000.scss | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/addons/website/static/src/snippets/s_table_of_content/000.js b/addons/website/static/src/snippets/s_table_of_content/000.js index 03083afa004..2b7b0ade23a 100644 --- a/addons/website/static/src/snippets/s_table_of_content/000.js +++ b/addons/website/static/src/snippets/s_table_of_content/000.js @@ -28,7 +28,7 @@ const TableOfContent = publicWidget.Widget.extend({ extraMenuUpdateCallbacks.splice(indexCallback, 1); } this.$el.css('top', ''); - this.$el.find('.s_table_of_content_navbar').css('top', ''); + this.$el.find('.s_table_of_content_navbar').css({top: '', maxHeight: ''}); this._super(...arguments); }, @@ -51,6 +51,7 @@ const TableOfContent = publicWidget.Widget.extend({ this.$el.css('top', isHorizontalNavbar ? position : ''); this.$el.find('.s_table_of_content_navbar').css('top', isHorizontalNavbar ? '' : position + 20); position += isHorizontalNavbar ? this.$el.outerHeight() : 0; + this.$el.find('.s_table_of_content_navbar').css('maxHeight', isHorizontalNavbar ? '' : `calc(100vh - ${position + 40}px)`); if (this.previousPosition !== position) { new ScrollSpy(this.$scrollingElement, { target: this.$el.find('.s_table_of_content_navbar'), diff --git a/addons/website/static/src/snippets/s_table_of_content/000.scss b/addons/website/static/src/snippets/s_table_of_content/000.scss index 4f4b83377f6..4b93cc0da7b 100644 --- a/addons/website/static/src/snippets/s_table_of_content/000.scss +++ b/addons/website/static/src/snippets/s_table_of_content/000.scss @@ -4,6 +4,9 @@ &.s_table_of_content_horizontal_navbar, &.s_table_of_content_vertical_navbar .s_table_of_content_navbar { @include o-position-sticky($top: 0px); } + &.s_table_of_content_vertical_navbar .s_table_of_content_navbar { + overflow: auto; + } } &:not(.s_table_of_content_navbar_sticky) { &, .s_table_of_content_navbar {