[IMP] theme_bookstore, *: adapt to new s_masonry_block design

*: theme_notes, theme_real_estate, theme_yes, theme_zap, theme_vehicle

Along with xPath adaptations, this commit also replaces a pixelated
image in the 'theme_yes'.

task-3665303
part of task-3619705

closes odoo/design-themes#839

Related: odoo/odoo#173870
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>

theme_bookstore/views/snippets/s_masonry_block.xml

@@ -4,70 +4,69 @@
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
     <!-- Little block #1 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/10","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="before">
         <div class="o_we_shape o_web_editor_Rainy_10"/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="replace" mode="inner">
         Science fiction
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')]/p" position="replace" mode="inner">
         Discover unknown universes
     </xpath>
 
     <!-- Little block #2 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-4')][2]" position="attributes">
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/02","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="before">
         <div class="o_we_shape o_web_editor_Airy_02"/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="replace" mode="inner">
         Biographies
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')][2]/p" position="replace" mode="inner">
         Meet great people
     </xpath>
 
     <!-- Little block #3 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-3')][3]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="class" add="o_cc5" remove="bg-200 o_cc4" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/04","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
         <div class="o_we_shape o_web_editor_Rainy_04"/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
         Horror
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][3]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
         Enjoy your fears
     </xpath>
 
     <!-- Little block #4 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-3')][4]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')][2]" position="attributes">
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/26","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="before">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
         <div class="o_we_shape o_web_editor_Wavy_26"/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
         Romance
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][4]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
         Read the best love stories
     </xpath>
 </template>

theme_notes/views/snippets/s_masonry_block.xml

@@ -4,41 +4,41 @@
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
     <!-- Little block #01 -->
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="replace" mode="inner">
         Brussels
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')]/p" position="replace" mode="inner">
         21th of August
     </xpath>
 
     <!-- Little block #02 -->
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="replace" mode="inner">
         Paris
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')][2]/p" position="replace" mode="inner">
         24th of August
     </xpath>
 
     <!-- Little block #03 -->
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
         Barcelona
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][3]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
         27th of August
     </xpath>
 
     <!-- Little block #04 -->
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
         Amsterdam
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][4]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
         4th of September
     </xpath>
 </template>

theme_real_estate/views/snippets/s_masonry_block.xml

@@ -2,78 +2,63 @@
 <odoo>
 
 <template id="s_masonry_block" inherit_id="website.s_masonry_block" name="Masonry">
-    <xpath expr="//section/div" position="attributes">
+    <xpath expr="//section" position="attributes">
-        <attribute name="class" add="container" remove="container-fluid" />
+        <attribute name="class" add="pt32" remove="pt48" separator=" "/>
     </xpath>
 </template>
 
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
     <!-- Little block #1 -->
-    <!-- Main div -->
+    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="before">
-    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="class" add="o_cc1" remove="o_cc2" />
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
         <span class="fa fa-star fa-2x mb-4"></span>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="replace" mode="inner">
         Increased Visibility
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')]/p" position="replace" mode="inner">
-        Increase Visitor retention. Customer engagement on a website with virtual tour is 5 times longer compared to a site without it.
+        Increase Visitor retention with virtual tours.
     </xpath>
 
     <!-- Little block #2 -->
-    <!-- Main div -->
+    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="before">
-    <xpath expr="//div[hasclass('col-lg-3')][2]" position="attributes">
-        <attribute name="class" add="o_cc1" remove="o_cc3" />
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
         <span class="fa fa-tag fa-2x mb-4"></span>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="replace" mode="inner">
         No fixed fees
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-4')][2]/p" position="replace" mode="inner">
-        At Real Estate Agency we have fixed price fees. This means we only charge when your home sale is confirmed.
+        We have fixed price fees. We only charge when your sale is confirmed.
     </xpath>
 
     <!-- Little block #3 -->
-    <!-- Main div -->
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
-    <xpath expr="//div[hasclass('col-lg-3')][3]" position="attributes">
-        <attribute name="class" add="o_cc1" remove="o_cc4" />
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="before">
         <span class="fa fa-camera fa-2x mb-4"></span>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][3]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
         Pro Photo Shoot
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][3]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
-        They say an image is worth a thousand words and we know you know how important it is to have the best photography.
+        An image is worth a thousand words.
     </xpath>
 
     <!-- Little block #4 -->
     <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-3')][4]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
-        <attribute name="class" add="o_cc1" remove="o_cc2" />
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="before">
         <span class="fa fa-check fa-2x mb-4"></span>
     </xpath>
     <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][4]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
         Premium Quality
     </xpath>
     <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][4]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
-        We are committed to delivering high quality services that enhance your brand by allowing visitors to interact virtually.
+        We deliver high quality services.
     </xpath>
 </template>
 

theme_vehicle/views/customizations.xml

@@ -82,6 +82,9 @@
     <xpath expr="//section" position="attributes">
         <attribute name="data-masonry-template">image_text_image</attribute>
     </xpath>
+    <xpath expr="//section/div" position="attributes">
+        <attribute name="class" add="container-fluid" remove="container" separator=" "></attribute>
+    </xpath>
 </template>
 
 <template id="s_masonry_block_image_texts_image_template" inherit_id="website.s_masonry_block_image_texts_image_template" name="Vehicle s_masonry_block">
@@ -89,12 +92,12 @@
         <img src="/web/image/website.s_parallax_default_image" class="img img-fluid mx-auto" alt=""/>
     </xpath>
     <!-- Block #02 -->
-    <xpath expr="//h3" position="replace" mode="inner">
+    <xpath expr="(//h3)[2]" position="replace" mode="inner">
         Electrifying <b>Performance</b>.
     </xpath>
     <xpath expr="//p" position="replace" mode="inner"/>
     <!-- Block #03 -->
-    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+    <xpath expr="(//h3)[3]" position="replace" mode="inner">
         Smarter <b>Range</b>.
     </xpath>
     <xpath expr="(//p)[2]" position="replace" mode="inner"/>

theme_yes/views/snippets/s_masonry_block.xml

@@ -2,16 +2,6 @@
 <odoo>
 
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
-    <!-- Image Block -->
-    <xpath expr="//div[hasclass('o_grid_item_image')]" position="attributes">
-        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-6 g-col-lg-6" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 1 / 1 / 11 / 5;" separator="; "/>
-    </xpath>
-    <!-- Image Block - Image -->
-    <xpath expr="//img" position="attributes">
-        <attribute name="style" add="border-radius: 4px !important;" separator="; "/>
-    </xpath>
-
     <!-- Little Blocks -->
     <!-- Little block #01 - Title -->
     <xpath expr="//h3" position="replace" mode="inner">
@@ -22,56 +12,36 @@
         <p>Check out our list of favorite caterers.</p>
         <p><a href="#" class="btn btn-secondary rounded-circle">Find a Caterer</a></p>
     </xpath>
-     <!-- Little block #01 - Main div -->
-     <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-3 g-col-lg-3" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 1 / 5 / 6 / 9;" separator="; "/>
-    </xpath>
 
-    <!-- Little block #02 - Title -->
+    <!-- Bigger block #02 - Title -->
     <xpath expr="(//h3)[2]" position="replace" mode="inner">
         Venues
     </xpath>
-    <!-- Little block #02 - Text -->
+    <!-- Bigger block #02 - Text -->
-    <xpath expr="//*[hasclass('col-lg-3')]//p" position="replace">
+    <xpath expr="//*[hasclass('col-lg-4')]//p" position="replace">
-        <p>Check out our list of favorite venues.</p>
+        <p>Check out our carefully curated list of favorite venues.</p>
         <p><a href="#" class="btn btn-secondary">Find a venue</a></p>
     </xpath>
-    <!-- Little block #02 - Main div -->
-    <xpath expr="//*[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-3 g-col-lg-3" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 1 / 9 / 6 / 13;" separator="; "/>
-    </xpath>
 
-    <!-- Little block #03 - Title -->
+    <!-- Bigger block #03 - Title -->
     <xpath expr="(//h3)[3]" position="replace" mode="inner">
         Attire
     </xpath>
-    <!-- Little block #03 - Text -->
+    <!-- Bigger block #03 - Text -->
-    <xpath expr="//*[hasclass('col-lg-3')]//p" position="replace">
+    <xpath expr="//*[hasclass('col-lg-4')][2]//p" position="replace">
         <p>Find the perfect outfit for before, during and after the main event.</p>
         <p><a href="#" class="btn btn-primary">Shop</a></p>
     </xpath>
-    <!-- Little block #03 - Main div -->
-    <xpath expr="//*[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-3 g-col-lg-3" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 6 / 5 / 11 / 9;" separator="; "/>
-    </xpath>
 
     <!-- Little block #04 - Title -->
     <xpath expr="(//h3)[4]" position="replace" mode="inner">
         FAQ
     </xpath>
     <!-- Little block #04 - Text -->
-    <xpath expr="//*[hasclass('col-lg-3')]//p" position="replace">
+    <xpath expr="//*[hasclass('col-lg-3')][2]//p" position="replace">
-        <p>Find the answers to all your questions <br/>in our FAQ.</p>
+        <p>Find the answers to all your questions in our FAQ.</p>
         <p><a href="#" class="btn btn-primary">Go to FAQ</a></p>
     </xpath>
-    <!-- Little block #04 - Main div -->
-    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="class" add="col-lg-4 g-col-lg-4 border rounded" remove="col-lg-3 g-col-lg-3" separator=" "/>
-        <attribute name="style" add="border-color: rgb(255, 255, 255) !important; border-width: 10px !important; border-radius: 14px !important; grid-area: 6 / 9 / 11 / 13;" separator="; "/>
-    </xpath>
 </template>
 
 </odoo>

theme_zap/views/snippets/s_masonry_block.xml

@@ -3,9 +3,6 @@
 
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
     <!-- Block #01 -->
-    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="class" add="o_cc1" remove="o_cc2" separator=" "/>
-    </xpath>
     <xpath expr="//h3" position="replace"/>
     <xpath expr="//p" position="replace" mode="inner">
         <em class="lead">Maintain a position of constant change<br/> and evolution, while always aiming<br/> for your success.</em>
@@ -17,6 +14,9 @@
     <xpath expr="//h3" position="replace" mode="inner">
         Super <b>Easy</b>
     </xpath>
+    <xpath expr="//h3" position="attributes">
+        <attribute name="class" add="text-center" separator=" "/>
+    </xpath>
     <xpath expr="(//p)[2]" position="replace" mode="inner"/>
     <!-- Block #03 -->
     <xpath expr="(//h3)[2]" position="before">
@@ -25,13 +25,16 @@
     <xpath expr="(//h3)[2]" position="replace" mode="inner">
         Super <b>Fast</b>
     </xpath>
+    <xpath expr="(//h3)[2]" position="attributes">
+        <attribute name="class" add="text-center" separator=" "/>
+    </xpath>
     <xpath expr="(//p)[3]" position="replace" mode="inner"/>
     <!-- Block #04 -->
-    <xpath expr="//*[hasclass('col-lg-3')][4]" position="attributes">
+    <xpath expr="//*[hasclass('col-lg-3')][2]" position="replace" mode="inner"/>
-        <attribute name="class" add="o_grid_item_image" remove="o_cc o_cc2" separator=" "/>
+
-    </xpath>
+    <xpath expr="//*[hasclass('col-lg-3')][2]" position="attributes">
-    <xpath expr="//*[hasclass('col-lg-3')][4]" position="replace" mode="inner">
+        <attribute name="style" add="background-image:url(/web/image/website.s_masonry_block_default_image_2)" separator="; "/>
-        <img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
+        <attribute name="class" add="oe_img_bg o_bg_img_center" separator=" "/>
     </xpath>
 </template>