From 1c87f1d3bba5c0a2ee05e2de524e8e1fb6f92afe Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 30 Aug 2016 11:12:03 +0200
Subject: [PATCH] [IMP] website(_blog): remove "Style" (blog-style) snippet
 option

The "bigger text" option was an useless option as redundant with the
summernote editor one.

The "narrow" option always resulted in an ugly layout with bugs in
many contexts.

Note: the styling classes are kept for compatibility for now.

+ Adapt demo data of website_blog which rely on the "narrow" option.
Use up to date snippets with reduced column width to get the same
result.
---
 .../static/src/less/website.wrapwrap.less     |  49 +--
 addons/website/views/snippets.xml             |  11 -
 .../website_blog/data/website_blog_demo.xml   | 345 +++++++++---------
 3 files changed, 209 insertions(+), 196 deletions(-)

diff --git a/addons/website/static/src/less/website.wrapwrap.less b/addons/website/static/src/less/website.wrapwrap.less
index 02a0e89d07f..a130087d37f 100644
--- a/addons/website/static/src/less/website.wrapwrap.less
+++ b/addons/website/static/src/less/website.wrapwrap.less
@@ -5,7 +5,7 @@
     table-layout: fixed;
     width: 100%;
     height: 100%;
-    
+
     > * {
         display: table-row;
     }
@@ -37,21 +37,9 @@ footer {
 }
 
 // Odoo options classes
-.para_large {
-    font-size: 120%;
-}
+
 .jumbotron {
     margin-bottom: 0;
-    .para_large p {
-        font-size: 150%;
-    }
-}
-
-.readable {
-    font-size: 120%;
-    max-width: 700px;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 // Odoo image background classes
@@ -77,7 +65,7 @@ footer {
     }
 }
 
-//  Background (kept for 8.0 compatibility)
+//  Background (kept for 8.0 compatibility) (! some are still used by website_blog)
 .oe_dark {
     background-color: rgba(200, 200, 200, 0.14);
 }
@@ -220,12 +208,10 @@ hr {
     max-width: 100%;
 }
 // container inside container
-.container, .readable {
-    .container {
-        padding-left: 0;
-        padding-right: 0;
-        width: auto;
-    }
+.container .container {
+    padding-left: 0;
+    padding-right: 0;
+    width: auto;
 }
 
 // HEADER NAV BAR
@@ -291,3 +277,24 @@ ul.nav-stacked > li > a {
 .oe_search_box {
     padding-right: 23px;
 }
+
+// Kept for (up to) saas-12 compatibility
+.para_large {
+    font-size: 120%;
+}
+.jumbotron .para_large p {
+    font-size: 150%;
+}
+
+.readable {
+    font-size: 120%;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+
+    .container {
+        padding-left: 0;
+        padding-right: 0;
+        width: auto;
+    }
+}
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 2b5214eb1d0..e16dfa3da42 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -690,17 +690,6 @@
 <template id="snippet_options">
     <t t-call="web_editor.snippet_options"/>
 
-    <div data-js='blog-style'
-        data-selector="section:not(.carousel):not(.parallax):not(.o_gallery)">
-        <li class="dropdown-submenu">
-            <a tabindex="-1" href="#"><i class="fa fa-book"/>Style</a>
-            <ul class="dropdown-menu">
-                <li data-toggle_class="para_large"><a href="#">Bigger Text</a></li>
-                <li data-toggle_class="readable"><a href="#">Narrow</a></li>
-            </ul>
-        </li>
-    </div>
-
     <div data-js='background'
         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
         <li class="dropdown-submenu">
diff --git a/addons/website_blog/data/website_blog_demo.xml b/addons/website_blog/data/website_blog_demo.xml
index fe6e9bfaae2..0d15ab37597 100644
--- a/addons/website_blog/data/website_blog_demo.xml
+++ b/addons/website_blog/data/website_blog_demo.xml
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <odoo>
     <data>
-
         <!-- TAGS -->
         <record id="blog_tag_1" model="blog.tag">
             <field name="name">functional</field>
@@ -22,99 +21,109 @@
             <field name="website_meta_description">The Future of Emails</field>
             <field name="cover_properties">{"background-image": "url(/website_blog/static/src/img/library/flower_texture.jpg)", "background-color": "oe_yellow" ,"opacity": "0.6", "resize_class": "cover container cover_narrow"}</field>
             <field name="content"><![CDATA[
+<section class="s_text_block">
     <div class="container">
-        <section class="mt16 mb16 readable">
-            <iframe width="100%" height="250" src="http://www.youtube.com/embed/EkbBFmIWoTE" frameborder="0" allowfullscreen></iframe>
-            <p>
-                Emails are broken.
-            </p><p>
-                Emails make me waste my time. But I need them.
-                Given the importance that emails have in our lives,
-                it's incredible it's still one of the only software
-                areas that did not evolve in the past 20 years!
-            </p><p>
-                Reading my inbox is the most unproductive task I do
-                on a daily basis. I have to spend one full hour a
-                day to process my emails. All the junk flows in the
-                same inbox; spams, information that doesn't matter,
-                quoted answers of quoted answers, etc. At the end
-                of the hour, only 10 emails actually requested an
-                answer from me. With a good tool, I could have done
-                my job in 10 minutes!
-            </p>
-        </section>
-        <section class="mt16 mb16 readable">
-            <p>
-                At Odoo, we build tools to bring productivity to
-                enterprises. As emails and information flows are one of
-                the biggest wastes of time in companies, we have to fix
-                this.
-            </p><p>
-                To disrupt emails, you need more than just another user
-                interface. We need to rethink the whole communication flow.
-            </p>
-            <h3>The Communication Mechanism of Odoo</h3>
-            <p>
-                Here are the ideas behind the Odoo communication tools:
-            </p>
-            <ul>
-                <li>
-                    Get Things Done: your inbox is a
-                    todo list. You should be able to process (not only
-                    read) the inbox and easily mark messages for future
-                    actions. Every inbox should be empty after having
-                    been processed; no more overload of information.
-                    <img class="img-responsive" src="/website_blog/static/src/img/mail-sc-00.png"/>
-                </li><li>
-                    Keep control of what you want to receive or don't want
-                    to receive. People should never receive spam. You
-                    should follow/unfollow any kind of information in one
-                    click.
-                </li><li>
-                    Productivity is key: our smart user
-                    interface does not require you to click on every mail
-                    to read a thread. Reading a full thread, replying,
-                    attaching documents is super fast.
-                    <img class="img-responsive" src="/website_blog/static/src/img/mail-sc-03.png"/>
-                </li><li>
-                    A mix of push & pull: Today, people
-                    are victims of what others decide to push to them.
-                    Odoo differentiates:
-                    <ul>
-                        <li>
-                            Messages "for information":
-                            you can pull them when you need some specific
-                            information; they are not required to be read
-                            every day.You receive only what you decided
-                            to follow.This accounts for 90% of your daily
-                            emails.Use the "Inbox" menu for these.
-                        </li><li>
-                            Messages "for action": they
-                            require your immediate attention and you need
-                            to process them all. This accounts for 10%
-                            of your daily emails. Use the "To: me" menu
-                            for these.
-                        </li>
-                    </ul>
-                </li><li>
-                    Focus on the Content: Everything is
-                    stripped to emphasize on the real message. No more
-                    welcome introductions, greetings, signatures and legal
-                    notes.We standardize the layout of each message.
-                    (signatures are on the profile of a contact, not in
-                    every message)
-                </li><li>
-                    Folders and mailing lists are great tools but too
-                    complex in traditional email clients. In Odoo, a
-                    group of contacts that share a discussion can be
-                    created with one click. Every group should have it's
-                    own email address.
-                </li>
-            </ul>
-        </section>
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2 mb16 mt16">
+                <iframe width="100%" height="250" src="http://www.youtube.com/embed/EkbBFmIWoTE" frameborder="0" allowfullscreen></iframe>
+                <p>
+                    Emails are broken.
+                </p><p>
+                    Emails make me waste my time. But I need them.
+                    Given the importance that emails have in our lives,
+                    it's incredible it's still one of the only software
+                    areas that did not evolve in the past 20 years!
+                </p><p>
+                    Reading my inbox is the most unproductive task I do
+                    on a daily basis. I have to spend one full hour a
+                    day to process my emails. All the junk flows in the
+                    same inbox; spams, information that doesn't matter,
+                    quoted answers of quoted answers, etc. At the end
+                    of the hour, only 10 emails actually requested an
+                    answer from me. With a good tool, I could have done
+                    my job in 10 minutes!
+                </p>
+            </div>
+        </div>
     </div>
+</section>
+<section class="s_text_block">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2 mb16 mt16">
+                <p>
+                    At Odoo, we build tools to bring productivity to
+                    enterprises. As emails and information flows are one of
+                    the biggest wastes of time in companies, we have to fix
+                    this.
+                </p><p>
+                    To disrupt emails, you need more than just another user
+                    interface. We need to rethink the whole communication flow.
+                </p>
+                <h3>The Communication Mechanism of Odoo</h3>
+                <p>
+                    Here are the ideas behind the Odoo communication tools:
+                </p>
+                <ul>
+                    <li>
+                        Get Things Done: your inbox is a
+                        todo list. You should be able to process (not only
+                        read) the inbox and easily mark messages for future
+                        actions. Every inbox should be empty after having
+                        been processed; no more overload of information.
+                        <img class="img-responsive" src="/website_blog/static/src/img/mail-sc-00.png"/>
+                    </li><li>
+                        Keep control of what you want to receive or don't want
+                        to receive. People should never receive spam. You
+                        should follow/unfollow any kind of information in one
+                        click.
+                    </li><li>
+                        Productivity is key: our smart user
+                        interface does not require you to click on every mail
+                        to read a thread. Reading a full thread, replying,
+                        attaching documents is super fast.
+                        <img class="img-responsive" src="/website_blog/static/src/img/mail-sc-03.png"/>
+                    </li><li>
+                        A mix of push & pull: Today, people
+                        are victims of what others decide to push to them.
+                        Odoo differentiates:
+                        <ul>
+                            <li>
+                                Messages "for information":
+                                you can pull them when you need some specific
+                                information; they are not required to be read
+                                every day.You receive only what you decided
+                                to follow.This accounts for 90% of your daily
+                                emails.Use the "Inbox" menu for these.
+                            </li><li>
+                                Messages "for action": they
+                                require your immediate attention and you need
+                                to process them all. This accounts for 10%
+                                of your daily emails. Use the "To: me" menu
+                                for these.
+                            </li>
+                        </ul>
+                    </li><li>
+                        Focus on the Content: Everything is
+                        stripped to emphasize on the real message. No more
+                        welcome introductions, greetings, signatures and legal
+                        notes.We standardize the layout of each message.
+                        (signatures are on the profile of a contact, not in
+                        every message)
+                    </li><li>
+                        Folders and mailing lists are great tools but too
+                        complex in traditional email clients. In Odoo, a
+                        group of contacts that share a discussion can be
+                        created with one click. Every group should have it's
+                        own email address.
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
 ]]>
-</field>
+            </field>
         </record>
 
         <record id="blog_post_2" model="blog.post">
@@ -125,83 +134,91 @@
             <field name="published_date" eval="time.strftime('%Y-%m-%d %H:%M:%S')"/>
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_1'), ref('blog_tag_2')])]"/>
             <field name="cover_properties">{"background-image": "url(/website/static/src/img/library/ship_sea.jpg)", "background-color": "oe_green" ,"opacity": "0.6", "resize_class": "cover container-fluid cover_full"}</field>
-            <field name="content">
-<![CDATA[<section><div class="container">
-            <div class="row">
-                <div class="col-md-6 mt16"><img class="img img-responsive mb16" src="/website_blog/static/src/img/CMS_WMS_screens.jpg" style=""></div>
-
-                <div class="col-md-6 mt16">
-                    <h3>New Features Launched</h3>
-
-                    <p data-chatter-id="counter_0/section/div/div/div">To add to an already comprehensive set of Odoo
-                    features, a website content management system (CMS
-                    or WMS) has been developed and a beta release is
-                    available from today, 31st January 2014.</p>
-                </div>
+            <field name="content"><![CDATA[
+<section class="s_image_text">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6 mt16">
+                <img class="img img-responsive mb16" src="/website_blog/static/src/img/CMS_WMS_screens.jpg"/>
             </div>
-        </section>
-        <section class="readable">
-            <p>
-                Odoo claims to be 'the Open Source software that makes
-                building your company's website and selling your products
-                online easy'. So how true is this statement?
-            </p><p>
-                "Odoo's latest launch will allow a business to go from
-                zero to trading online quicker than ever before,” Stuart
-                Mackintosh, MD of Open Source specialist and Odoo
-                integration partner, OpusVL, explains. “The investment
-                required to have a fully automated business system is
-                dramatically reduced, enabling the small and medium
-                enterprise to compete at a level of functionality and
-                performance previously reserved for the big IT investors."
-            </p>
-            <blockquote>
+            <div class="col-md-6 mt16">
+                <h3>New Features Launched</h3>
+
+                <p data-chatter-id="counter_0/section/div/div/div">To add to an already comprehensive set of Odoo
+                features, a website content management system (CMS or WMS) has been developed and a beta release is
+                available from today, 31st January 2014.</p>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="s_text_block">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2 mb16 mt16">
                 <p>
-                    "Finally, the leading edge is being brought to the masses.
-                    It will now be the turn of the big players to catch up to
-                    the superior technologies of the SME."
+                    Odoo claims to be 'the Open Source software that makes
+                    building your company's website and selling your products
+                    online easy'. So how true is this statement?
+                </p><p>
+                    "Odoo's latest launch will allow a business to go from
+                    zero to trading online quicker than ever before,” Stuart
+                    Mackintosh, MD of Open Source specialist and Odoo
+                    integration partner, OpusVL, explains. “The investment
+                    required to have a fully automated business system is
+                    dramatically reduced, enabling the small and medium
+                    enterprise to compete at a level of functionality and
+                    performance previously reserved for the big IT investors."
                 </p>
-            </blockquote>
-            <p>
-                "This is another clever and highly disruptive move by
-                Odoo,which will force other technology providers to
-                take another look at the value they are providing to ensure
-                that their 'solutions' can still compete."
-            </p><p>
-                "Odoo now competes on many fronts, with no real
-                competition out there to knock them off the top spot.
-                With the launch of their integrated CMS and Ecommerce
-                systems,it only elevates their position as one of the leading
-                lights in the open source revolution. It will be at least 5
-                years before another ERP or CMS provider will be able to
-                compete at this level due to the technology currently
-                employed by most industry providers."
-            </p>
-            <h4>Adding to industry leading technology</h4>
-            <p>
-                Like many modern website editors, with Odoo you can edit
-                content in-line, enabling you to see exactly what you are
-                changing and ensure your changes suit the context.
-            </p><p>
-                However, unlike other web content management systems, it
-                fully integrates into the back-end database. This means
-                that when you edit a product description, image or price,
-                it updates the product database in real time, providing a
-                true self-service window into the business.
-            </p><p>
-                This provides a single source of data for your company and
-                removes the need to create offline synchronisation between
-                website and product database.
-            </p><p>
-                As it comes, there is a default website based on Bootstrap
-                3, the latest industry standard for rapid development of
-                multi-device websites backed by Twitter, so can be directly
-                integrated with many web tools and works across all devices
-                by default.
-            </p>
-        </section>
+                <blockquote>
+                    <p>
+                        "Finally, the leading edge is being brought to the masses.
+                        It will now be the turn of the big players to catch up to
+                        the superior technologies of the SME."
+                    </p>
+                </blockquote>
+                <p>
+                    "This is another clever and highly disruptive move by
+                    Odoo,which will force other technology providers to
+                    take another look at the value they are providing to ensure
+                    that their 'solutions' can still compete."
+                </p><p>
+                    "Odoo now competes on many fronts, with no real
+                    competition out there to knock them off the top spot.
+                    With the launch of their integrated CMS and Ecommerce
+                    systems,it only elevates their position as one of the leading
+                    lights in the open source revolution. It will be at least 5
+                    years before another ERP or CMS provider will be able to
+                    compete at this level due to the technology currently
+                    employed by most industry providers."
+                </p>
+                <h4>Adding to industry leading technology</h4>
+                <p>
+                    Like many modern website editors, with Odoo you can edit
+                    content in-line, enabling you to see exactly what you are
+                    changing and ensure your changes suit the context.
+                </p><p>
+                    However, unlike other web content management systems, it
+                    fully integrates into the back-end database. This means
+                    that when you edit a product description, image or price,
+                    it updates the product database in real time, providing a
+                    true self-service window into the business.
+                </p><p>
+                    This provides a single source of data for your company and
+                    removes the need to create offline synchronisation between
+                    website and product database.
+                </p><p>
+                    As it comes, there is a default website based on Bootstrap
+                    3, the latest industry standard for rapid development of
+                    multi-device websites backed by Twitter, so can be directly
+                    integrated with many web tools and works across all devices
+                    by default.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
 ]]>
-</field>
+            </field>
         </record>
     </data>
 </odoo>