[IMP] website: review "boxed" layout

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

Co-authored-by: qsm-odoo <qsm@odoo.com>

6 files changed, 39 insertions, 18 deletions

diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index d9a17a61997..6f20d0c4c20 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -14,7 +14,7 @@ $yiq-text-light: o-color('white') !default;
 //
 // Settings for the `<body>` element.
 
-$body-bg: if($o-theme-layout == 'full', o-color('o-cc1-bg'), o-color('body')) !default;
+$body-bg: if(o-website-value('layout') != 'full', o-color('body'), o-color('o-cc1-bg')) !default;
 $body-color: o-color('o-cc1-text') or color-yiq(o-color('o-cc1-bg')) !default;
 
 // Links
diff --git a/addons/website/static/src/scss/options/layout/option_layout_boxed_variables.scss b/addons/website/static/src/scss/options/layout/option_layout_boxed_variables.scss
deleted file mode 100644
index 9251dde4fa7..00000000000
--- a/addons/website/static/src/scss/options/layout/option_layout_boxed_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$o-theme-layout: 'boxed';
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 7764ae7df9f..a68242f5c4e 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -1,4 +1,3 @@
-$o-theme-layout: 'full';
 
 //------------------------------------------------------------------------------
 // Colors
@@ -247,6 +246,7 @@ $o-base-website-values-palette: (
     'body-image': null,
     'body-image-type': 'image', // 'image' or 'pattern'
 
+    'layout': 'full', // 'full' / 'boxed'
     'color-palettes-number': null, // Default to the individual variables for each color palette type
 
     'btn-primary-outline': false,
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index b9a17bff532..72ac9b20588 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -72,13 +72,42 @@ $-seen-urls: ();
         }
     }
 
-    @if ($o-theme-layout == 'boxed') {
-        @include media-breakpoint-up(md) {
-            padding: 0 7.5%;
+    @if o-website-value('layout') == 'boxed' {
+        > main {
+            background-color: o-color('o-cc1-bg');
         }
 
-        #wrap {
-            background-color: o-color('o-cc1-bg');
+        @include media-breakpoint-up(sm) {
+            padding-right: $grid-gutter-width * 2;
+            padding-left: $grid-gutter-width * 2;
+
+            > * {
+                // When the website is visually acting like a container (eg.
+                // boxed layout), increase its maximum size to handle bigger
+                // horizontal paddings.
+                $-max-widths: ();
+                @each $key, $value in $container-max-widths {
+                    $-max-widths: map-merge($-max-widths, (
+                        #{$key}: $value + $grid-gutter-width * 2,
+                    ));
+                }
+                @include make-container(0);
+                @include make-container-max-widths($-max-widths);
+            }
+
+            > header .container {
+                max-width: 100% !important;
+            }
+
+            // Vertical alignment when top-menu has visually "no background"
+            @if o-color('menu') == o-color('body') {
+                > header {
+                    .navbar, .container {
+                        padding-left: 0;
+                        padding-right: 0;
+                    }
+                }
+            }
         }
     }
 }
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index f478dda4a3a..4dab92e18e2 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -891,9 +891,9 @@
         <we-checkbox string="Show Header"
                      data-customize-website-views="website.option_layout_hide_header|"
                      data-reload="/"/>
-        <we-select string="Layout">
-            <we-button data-customize-website-views="" data-name="layout_full_opt">Full</we-button>
-            <we-button data-customize-website-views="website.option_layout_boxed_variables" id="option_layout_boxed">Boxed</we-button>
+        <we-select string="Layout" data-variable="layout">
+            <we-button data-customize-website-variable="'full'" data-name="layout_full_opt">Full</we-button>
+            <we-button data-customize-website-variable="'boxed'">Boxed</we-button>
         </we-select>
         <we-row string="⌙ Background" data-no-preview="true">
             <we-colorpicker data-dependencies="!layout_full_opt"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index cfbc767b49f..157c9c11e54 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -745,13 +745,6 @@
     </xpath>
 </template>
 
-<!-- Layout options -->
-<template id="option_layout_boxed_variables" inherit_id="website._assets_primary_variables" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/layout/option_layout_boxed_variables.scss"/>
-    </xpath>
-</template>
-
 <template id="kanban">
     <t t-set="step"><t t-esc="step or 0"/></t>
     <t t-set="scope"><t t-esc="scope or 0"/></t>