From 98983d19bdc61828646a570a89658b160792c9a3 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 11 May 2023 11:42:47 +0000
Subject: [PATCH] [FIX] website: fix contradiction between visibility class and
height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Before this commit, when a snippet section was hidden on mobile devices
and its height was then set to 50% or 100%, the visibility classes
remained as "d-lg-block" instead of "d-lg-flex". This inconsistency
resulted in the content not being vertically centered until the "hidden
on mobile" toggle was turned off and then back on.
Steps to reproduce the bug:
- In edit mode, drag and drop a "Text" snippet onto the page.
- Click on the "Mobile visibility" option button to hide the snippet on
mobile devices.
- Click on the "50%" button in the "Height" option of the snippet.
- Bug: The content within the "Text" snippet is not vertically centered.
This commit fixes the issue by properly updating the CSS class set by
the mobile visibility option when the "height" option is enabled.
task-3224575
closes odoo/odoo#121434
Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>
---
.../static/src/js/editor/snippets.options.js | 22 +++++++++++++++++++
1 file changed, 22 insertions(+)
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index a29c971170ba..48776eed11c7 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -3027,6 +3027,28 @@ options.registry.ScrollButton = options.Class.extend({
this.$button.detach();
}
},
+ /**
+ * @override
+ */
+ async selectClass(previewMode, widgetValue, params) {
+ await this._super(...arguments);
+ // If a "d-lg-block" class exists on the section (e.g., for mobile
+ // visibility option), it should be replaced with a "d-lg-flex" class.
+ // This ensures that the section has the "display: flex" property
+ // applied, which is the default rule for both "height" option classes.
+ if (params.possibleValues.includes("o_half_screen_height")) {
+ if (widgetValue) {
+ this.$target[0].classList.replace("d-lg-block", "d-lg-flex");
+ } else if (this.$target[0].classList.contains("d-lg-flex")) {
+ // There are no known cases, but we still make sure that the
+ // <section> element doesn't have a "display: flex" originally.
+ this.$target[0].classList.remove("d-lg-flex");
+ const sectionStyle = window.getComputedStyle(this.$target[0]);
+ const hasDisplayFlex = sectionStyle.getPropertyValue("display") === "flex";
+ this.$target[0].classList.add(hasDisplayFlex ? "d-lg-flex" : "d-lg-block");
+ }
+ }
+ },
//--------------------------------------------------------------------------
// Private
--
GitLab