From c0f12692805fb72d4c69b9bcf97262a3b4962e15 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 22 Sep 2020 09:44:01 +0000 Subject: [PATCH] [FIX] website: restore vertical alignement for half/full height snippets Commit [1] broke the vertical alignement for half/full height snippets while trying to improve it. Mentioned commit's goal is kept: not messing up the alignement when enabling the scroll button and allowing those height and scroll options for the big boxes snippets, but now the content is still vertically centered (with or without scroll button now). If the user do not want it centered, he still has the possibility to increase the bottom padding. [1]: https://github.com/odoo/odoo/commit/9d5cd2c1747488524c107e6165d7c55d74b80606 Part of https://github.com/odoo/odoo/pull/58192 closes odoo/odoo#58214 X-original-commit: 08154fb956b4983187eebc3116975772da7b95c4 Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/scss/website.scss | 4 ++++ .../static/src/snippets/s_color_blocks_2/000.scss | 12 +++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index f78da24fa7b..b79a2d1e268 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -448,9 +448,13 @@ 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; } 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 efd84e4e6b0..8982f8e87b0 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,10 +1,16 @@ .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 + // Needed to be able to stretch the inner container so that + // the snippet works with the 50% and 100% height + &.o_half_screen_height, &.o_full_screen_height { + > :first-child { // container + &, > .row { + min-height: inherit; + } + } + } .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