[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) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2023-03-07 19:04:10 +01:00
parent 14d74a1d65
commit acedfc6882
2 changed files with 5 additions and 1 deletions
@@ -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'),
@@ -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 {