[IMP] website, website_blog: change stretch option to add smaller size

This commit adds the width of blog posts to the "Stretch" snippet option
(previously, only full width aka container-fluid and regular container
were allowed, hence the name), as such it has been renamed to width.
Some code in website_blog has been adapted to reuse that class, such
that the width of the small container can be adjusted and website and
website blog will stay consistent with one another.

task-2155513

closes odoo/odoo#41844

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/editor/snippets.options.js

@@ -1208,28 +1208,6 @@ options.registry.CoverProperties = options.Class.extend({
     },
 });
 
-/**
- * Whether the section should be full-width (container-fluid) or use a classic container
- */
-options.registry.SectionStretch = options.Class.extend({
-    /**
-     * Only shows this option if it changes the visual.
-     *
-     * @override
-     */
-    start: function () {
-        const $container = $('<div>', {class: 'container'}).insertAfter(this.$target);
-        const sizeDifference = this.$target.parent().width() / $container.outerWidth() - 1;
-        $container.remove();
-        // The cutoff for the option is 5% difference in width
-        if (sizeDifference < 0.05) {
-            this.$el.addClass('d-none');
-        }
-
-        return this._super.apply(this, arguments);
-    },
-});
-
 /**
  * Allows snippets to be moved before the preceding element or after the following.
  */

addons/website/static/src/scss/website.scss

@@ -200,6 +200,13 @@ font[class*='bg-'] {
         border-bottom-right-radius: $size;
     }
 }
+// Smaller container
+.o_container_small {
+    @extend .container;
+    @include media-breakpoint-up(lg) {
+        max-width: map-get($container-max-widths, md);
+    }
+}
 
 // Buttons
 .btn {

addons/website/views/snippets/snippets.xml

@@ -408,10 +408,13 @@
     </div>
 
     <!-- Stretch section -->
-    <div data-js="SectionStretch"
-        data-selector="section"
-        data-target="> .container, > .container-fluid">
-        <we-checkbox string="Stretch" data-select-class="container|container-fluid" data-no-preview="true"/>
+    <div data-selector="section"
+        data-target="> .container, > .container-fluid, > .o_container_small">
+        <we-select string="Width" class="o_we_inline">
+            <we-button data-select-class="container-fluid">Full</we-button>
+            <we-button data-select-class="container">Regular</we-button>
+            <we-button data-select-class="o_container_small">Small</we-button>
+        </we-select>
     </div>
 </template>
 </odoo>

addons/website_blog/static/src/scss/website_blog.scss

@@ -1,6 +1,5 @@
 // ======= VARIABLES =======
-$o-wblog-read-width: 620px;
-$o-wblog-read-container-sidebar-width :900px;
+$o-wblog-sidebar-width: 280px;
 $o-wblog-loader-size: 50px;
 
 $o-wblog-title-sizes-variants: (
@@ -99,12 +98,8 @@ $o-wblog-title-sizes-variants: (
         background-color: rgba(black, 0.005);
     }
 
-    .o_wblog_read {
-        max-width: $o-wblog-read-width;
-    }
-
     .o_wblog_read_with_sidebar {
-        max-width: $o-wblog-read-container-sidebar-width;
+        max-width: map-get($container-max-widths, md) + $o-wblog-sidebar-width;
     }
 
     // This option class is assigned to the post's content using the "Customize"

addons/website_blog/views/website_blog_templates.xml

@@ -91,7 +91,7 @@ list of filtered posts (by date or tag).
         <section id="o_wblog_index_content" t-att-class="opt_blog_cards_design and 'o_wblog_page_cards_bg'">
             <div class="container py-4">
                 <div t-attf-class="row #{opt_blog_sidebar_show and 'justify-content-between' or 'justify-content-center'}">
-                    <div id="o_wblog_posts_loop_container" t-attf-class="col #{'o_wblog_read' if opt_blog_list_view else ''}">
+                    <div id="o_wblog_posts_loop_container" t-attf-class="col #{'o_container_small mx-0' if opt_blog_list_view else ''}">
 
                         <t t-call="website_blog.posts_loop">
                             <t t-if="not blog" t-set="posts_list_show_parent_blog" t-value="True"/>
@@ -254,7 +254,7 @@ list of filtered posts (by date or tag).
             <!-- Sidebar-enabled Layout -->
             <div t-if="opt_blog_post_sidebar" t-attf-class="mx-auto #{opt_blog_post_readable and 'o_wblog_read_with_sidebar'}">
                 <div t-attf-class="d-flex flex-column flex-lg-row #{opt_blog_post_readable and 'justify-content-between'}">
-                    <div id="o_wblog_post_content" t-attf-class="#{opt_blog_post_readable and 'o_wblog_read w-100 flex-shrink-0' or 'w-lg-75'}">
+                    <div id="o_wblog_post_content" t-attf-class="#{opt_blog_post_readable and 'o_container_small mx-0 w-100 flex-shrink-0' or 'w-lg-75'}">
                         <t t-call="website_blog.blog_post_content"/>
                     </div>
                     <div id="o_wblog_post_sidebar_col" t-attf-class="pl-lg-5 #{not opt_blog_post_readable and 'flex-grow-1 w-lg-25'}">
@@ -264,9 +264,9 @@ list of filtered posts (by date or tag).
             </div>
 
             <!-- No-Sidebar Layout -->
-            <div t-if="not opt_blog_post_sidebar" t-attf-class="mx-auto #{opt_blog_post_readable and 'o_wblog_read'}">
+            <div t-if="not opt_blog_post_sidebar" t-attf-class="#{opt_blog_post_readable and 'o_container_small'}">
                 <div class="d-flex flex-column flex-lg-row">
-                    <div id="o_wblog_post_content" t-attf-class=" #{opt_blog_post_readable and 'o_wblog_read w-100 flex-shrink-0'}">
+                    <div id="o_wblog_post_content" t-attf-class=" #{opt_blog_post_readable and 'o_container_small w-100 flex-shrink-0'}">
                         <t t-call="website_blog.blog_post_content"/>
                     </div>
                 </div>
@@ -371,11 +371,11 @@ list of filtered posts (by date or tag).
 <template id="opt_blog_post_comment" name="Allow Comments" inherit_id="website_blog.blog_post_complete" active="False" customize_show="True">
     <xpath expr="//section[@id='o_wblog_post_main']" position="inside">
         <t t-set="readableClass" t-if="opt_blog_post_readable and opt_blog_post_sidebar" t-value="'o_wblog_read_with_sidebar'"/>
-        <t t-set="readableClass" t-elif="opt_blog_post_readable" t-value="'o_wblog_read'"/>
+        <t t-set="readableClass" t-elif="opt_blog_post_readable" t-value="'o_container_small'"/>
 
         <div class="container">
             <div t-attf-class="mx-auto #{readableClass}">
-                <div id="o_wblog_post_comments" t-attf-class="pt-4 o_wblog_read">
+                <div id="o_wblog_post_comments" t-attf-class="pt-4 o_container_small">
                     <div groups="base.group_public" class="small mb-4">
                         <a href="/web/login" class="btn btn-sm btn-primary"><b>Sign in</b></a> to leave a comment
                     </div>
@@ -401,7 +401,7 @@ list of filtered posts (by date or tag).
         <div t-if="next_post" class="css_editable_mode_hidden mt-5">
             <t t-if="opt_blog_post_regular_cover">
                 <t t-if="opt_blog_post_sidebar" t-set="readableClass" t-value="'o_wblog_read_with_sidebar'"/>
-                <t t-else="" t-set="readableClass" t-value="'o_wblog_read'"/>
+                <t t-else="" t-set="readableClass" t-value="'o_container_small'"/>
 
                 <div class="container">
                     <div t-attf-class="mb-4 mx-auto #{ readableClass if opt_blog_post_readable else ''}">