[FIX] website: handle affixed header in full screen mode

The affixed header was not properly repositioned in editor full screen
mode (introduced in 13.4).

closes odoo/odoo#58447

X-original-commit: 7502c8aa6e5422b1ecf446002e187fa2f7ca3aa7
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2020-09-24 15:01:39 +00:00
parent d86a1fa685
commit 86a02be12e
2 changed files with 21 additions and 8 deletions
+14 -8
View File
@@ -69,6 +69,18 @@ const BaseAnimatedHeader = animations.Animation.extend({
// Private
//--------------------------------------------------------------------------
/**
* @private
*/
_adaptFixedHeaderPosition() {
// Compensate scrollbar
this.el.style.removeProperty('right');
if (this.fixedHeader) {
const scrollableEl = this.$el.parent().closestScrollable()[0];
const style = window.getComputedStyle(this.el);
this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important');
}
},
/**
* @private
*/
@@ -128,14 +140,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
_toggleFixedHeader: function (useFixed = true) {
this.fixedHeader = useFixed;
this.el.classList.toggle('o_header_affixed', useFixed);
// Compensate scrollbar
if (useFixed) {
const scrollableEl = this.$el.parent().closestScrollable()[0];
const style = window.getComputedStyle(this.el);
this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important');
} else {
this.el.style.removeProperty('right');
}
this._adaptFixedHeaderPosition();
this._adaptToHeaderChange();
},
/**
@@ -191,6 +196,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
* @private
*/
_updateHeaderOnResize: function () {
this._adaptFixedHeaderPosition();
if (document.body.classList.contains('overflow-hidden')
&& config.device.size_class > config.device.SIZES.SM) {
document.body.classList.remove('overflow-hidden');
@@ -18,6 +18,9 @@ body.o_connected_user {
#oe_main_menu_navbar, #web_editor-top-edit, .o_we_website_top_actions, #oe_snippets {
transition: transform 400ms ease 0s !important;
}
.o_header_affixed {
transition: top 0.35s !important;
}
}
&.o_fullscreen {
padding-top: 0 !important;
@@ -31,6 +34,10 @@ body.o_connected_user {
.o_we_website_top_actions, #oe_snippets {
transform: translateX(100%);
}
.o_header_affixed {
top: 0 !important;
right: 0 !important;
}
}
}