From ac799cf10d4bac1a230303bba5621a89c8cd78fe 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#123058
X-original-commit: 98983d19bdc61828646a570a89658b160792c9a3
Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>
---
.../static/src/js/editor/snippets.options.js | 22 +++++++++++++++++++
.../static/src/scss/website.wysiwyg.scss | 4 ++++
2 files changed, 26 insertions(+)
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 7590d7b2b42f..75361d6dda93 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -3104,6 +3104,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
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 4bca58ac4d13..ff7731b97183 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -48,6 +48,10 @@ html[data-edit_translations="1"] {
opacity: 70%;
position: relative;
+ &.d-lg-flex, &.d-md-flex, &.o_half_screen_height, &.o_full_screen_height {
+ // e.g. Useful if "Height" option (50% or 100%) is enabled.
+ display: flex !important;
+ }
&::before {
position: absolute;
// Content is 0px wide => use available width.
--
GitLab