[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:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user