From 7511f34c2b164d7e4087bc61b0f5992fc7ec051c Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Fri, 13 Dec 2019 12:17:39 +0000
Subject: [PATCH] [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>
---
 .../static/src/js/editor/snippets.options.js  | 22 -------------------
 addons/website/static/src/scss/website.scss   |  7 ++++++
 addons/website/views/snippets/snippets.xml    | 11 ++++++----
 .../static/src/scss/website_blog.scss         |  9 ++------
 .../views/website_blog_templates.xml          | 14 ++++++------
 5 files changed, 23 insertions(+), 40 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 6f768f21af1..6efab4b91e7 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/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.
  */
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index b5c478c918a..03a1098bf5c 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/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 {
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index fed05b8c667..9461d377587 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/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>
diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss
index cd5fc6e409c..a25609259a2 100644
--- a/addons/website_blog/static/src/scss/website_blog.scss
+++ b/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"
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 239a2d2374c..83774a44070 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/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 ''}">