diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index a68e8555c1d..2840bc1e7e3 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -941,6 +941,55 @@ registry.anchorSlide = publicWidget.Widget.extend({
},
});
+registry.FullScreenHeight = publicWidget.Widget.extend({
+ selector: '.o_full_screen_height',
+ disabledInEditableMode: false,
+
+ /**
+ * @override
+ */
+ start() {
+ if (this.$el.outerHeight() > this._computeIdealHeight()) {
+ // Only initialize if taller than the ideal height as some extra css
+ // rules may alter the full-screen-height class behavior in some
+ // cases (blog...).
+ this._adaptSize();
+ $(window).on('resize.FullScreenHeight', _.debounce(() => this._adaptSize(), 250));
+ }
+ return this._super(...arguments);
+ },
+ /**
+ * @override
+ */
+ destroy() {
+ this._super(...arguments);
+ $(window).off('.FullScreenHeight');
+ this.el.style.setProperty('min-height', '');
+ },
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ _adaptSize() {
+ const height = this._computeIdealHeight();
+ this.el.style.setProperty('min-height', `${height}px`, 'important');
+ },
+ /**
+ * @private
+ */
+ _computeIdealHeight() {
+ const windowHeight = $(window).outerHeight();
+ // Doing it that way allows to considerer fixed headers, hidden headers,
+ // connected users, ...
+ const mainTopPos = $('#wrapwrap > main')[0].getBoundingClientRect().top;
+ return (windowHeight - mainTopPos);
+ },
+});
+
registry.ScrollButton = registry.anchorSlide.extend({
selector: '.o_scroll_button',
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 082f6cba958..5819402c93a 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1907,6 +1907,21 @@ options.registry.TopMenuVisibility = VisibilityPageOptionUpdate.extend({
*/
async visibility(previewMode, widgetValue, params) {
await this._super(...arguments);
+ await this._changeVisibility(widgetValue);
+ // TODO this is hacky but changing the header visibility may have an
+ // effect on features like FullScreenHeight which depend on viewport
+ // size so we simulate a resize.
+ $(window).trigger('resize');
+ },
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ async _changeVisibility(widgetValue) {
const show = (widgetValue !== 'hidden');
if (!show) {
return;
@@ -1930,11 +1945,6 @@ options.registry.TopMenuVisibility = VisibilityPageOptionUpdate.extend({
});
});
},
-
- //--------------------------------------------------------------------------
- // Private
- //--------------------------------------------------------------------------
-
/**
* @override
*/
@@ -2539,6 +2549,7 @@ options.registry.ScrollButton = options.Class.extend({
const anchor = document.createElement('a');
anchor.classList.add(
'o_scroll_button',
+ 'mb-3',
'rounded-circle',
'align-items-center',
'justify-content-center',
@@ -2573,12 +2584,6 @@ options.registry.ScrollButton = options.Class.extend({
}
return this._super(...arguments);
},
- /**
- * @override
- */
- _computeVisibility: function () {
- return this.$target.is('.o_full_screen_height, .o_half_screen_height');
- },
});
return {
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index f037f189f5d..ec1c6f6b96e 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -448,13 +448,9 @@ table.table_desc tr td {
}
.o_full_screen_height {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
min-height: 100vh !important;
}
.o_half_screen_height {
- @extend .o_full_screen_height;
min-height: 55vh !important;
}
@@ -1312,6 +1308,7 @@ header {
// Scroll down button
.o_scroll_button {
+ @include o-position-absolute(auto, 0, 0, 0);
display: flex;
width: 50px;
height: 50px;
diff --git a/addons/website/static/src/snippets/s_color_blocks_2/000.scss b/addons/website/static/src/snippets/s_color_blocks_2/000.scss
index 70d476a3308..c8cf79c3121 100644
--- a/addons/website/static/src/snippets/s_color_blocks_2/000.scss
+++ b/addons/website/static/src/snippets/s_color_blocks_2/000.scss
@@ -1,7 +1,10 @@
.s_color_blocks_2 {
+ display: flex; // Needed to be able to stretch the inner container so that
+ // the snippet works with the 50% and 100% height
.row {
display: flex;
flex-flow: row wrap;
+ height: 100%; // Needed for the 50% and 100% height option
// Fix for safari browser as it 'supports' flex but not with the right
// behavior
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index ac44ad6ec71..937e2ac59cf 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1012,10 +1012,12 @@
-
-
+
+
+
+
+ None
+ Extra-Small
+ Small
+ Medium
+ Large
+ Extra-Large
+
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index d2800c149a3..3a92cc5ea36 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -244,7 +244,7 @@ list of filtered posts (by date or tag).
+ class="css_editable_mode_hidden justify-content-center align-items-center rounded-circle mx-auto mb-5 text-decoration-none">