[FIX] theme_*: fix numbers snippets layout across themes

*: nano, notes, odoo_experts, treehouse, zap

This commit reviews the occurrences of the `s_numbers_*` snippets
to align them with the new layout of these snippets.

Prior to this commit, the layout of those snippet was "broken" due to
weird structure like nested rows, .. which prevents the editor to apply
a change on the whole content.

As we reworked the layout of these snippets to fix the issue, we need to
apply these changes in themes as well.

task-4223179

closes odoo/design-themes#1012

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

theme_nano/views/snippets/s_numbers.xml

@@ -6,20 +6,24 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc5" remove="o_cc1" separator=" "/>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-4')]" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-5')]" position="replace"/>
-    <xpath expr="//div[hasclass('col-lg-7')]" position="replace">
+    <xpath expr="//div[hasclass('col-lg-2')]" position="replace">
         <div class="col-lg-4 pt24 pb24">
             <p class="lead" style="text-align: center;">
                 <span class="s_number display-1-fs">50+</span><br/>
                 <span class="h5-fs">Happy customers</span>
             </p>
         </div>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]" position="replace">
         <div class="col-lg-4 pt24 pb24" style="box-shadow: var(--o-border-color) 1px 0px 0px 0px inset !important;">
             <p class="lead" style="text-align: center;">
                 <span class="s_number display-1-fs">40h</span><br/>
                 <span class="h5-fs">Average shipping time</span>
             </p>
         </div>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]" position="replace">
         <div class="col-lg-4 pt24 pb24" style="box-shadow: var(--o-border-color) 1px 0px 0px 0px inset !important;">
             <p class="lead" style="text-align: center;">
                 <span class="s_number display-1-fs">4.5</span><br/>

theme_notes/views/snippets/s_numbers.xml

@@ -10,34 +10,31 @@
     <xpath expr="//div[hasclass('container')]" position="attributes">
         <attribute name="class" add="container-fluid" remove="container" separator=" "/>
     </xpath>
-    <!-- Column #1 -->
+    <!-- Title & Subtitle -->
-    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
         <attribute name="class" add="pt104 pb64 o_cc o_cc3" separator=" "/>
     </xpath>
-    <!-- Column #2 -->
+    <!-- First KPI -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[2]" position="attributes">
+    <xpath expr="(//div[hasclass('col-lg-2')])[1]" position="attributes">
         <attribute name="class" add="pt104 pb104 o_cc o_cc1" remove="pt24 pb24" separator=" "/>
     </xpath>
-    <!-- Column #2 - Text -->
    <xpath expr="//span[hasclass('h5-fs')]" position="replace" mode="inner">
         Editions through the Europe
     </xpath>
-    <!-- Column #3 -->
+    <!-- Second KPI -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[3]" position="attributes">
+    <xpath expr="(//div[hasclass('col-lg-2')])[2]" position="attributes">
         <attribute name="class" add="pt104 pb104 o_cc o_cc4" remove="pt24 pb24" separator=" "/>
     </xpath>
-    <!-- Column #3 - Text -->
     <xpath expr="(//span[hasclass('s_number')])[2]" position="replace" mode="inner">
         72
     </xpath>
     <xpath expr="(//span[hasclass('h5-fs')])[2]" position="replace" mode="inner">
         Artists from around the world
     </xpath>
-    <!-- Column #4 -->
+    <!-- Third KPI -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[4]" position="attributes">
+    <xpath expr="(//div[hasclass('col-lg-2')])[3]" position="attributes">
         <attribute name="class" add="pt104 pb104 o_cc o_cc2" remove="pt24 pb24" separator=" "/>
     </xpath>
-    <!-- Column #4 - Text -->
     <xpath expr="(//span[hasclass('h5-fs')])[3]" position="replace" mode="inner">
         Scenes outdoor &amp; indoor
     </xpath>

theme_odoo_experts/views/snippets/s_numbers_list.xml

@@ -3,7 +3,7 @@
 
 <template id="s_numbers_list" inherit_id="website.s_numbers_list">
     <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
-        <attribute name="class" add="col-lg-7" remove="col-lg-5" separator=" "/>
+        <attribute name="class" add="col-lg-6" remove="col-lg-5" separator=" "/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h3" position="replace">
@@ -13,40 +13,34 @@
     <xpath expr="//p" position="replace">
         <h3>Over the last decade, we've help many businesses to grow.</h3>
     </xpath>
-    <!-- Second row -->
+    <!-- KPI's -->
-    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-3')]" position="replace">
-        <attribute name="class" add="col-lg-5" remove="col-lg-6 offset-lg-1" separator=" "/>
+        <div class="col-12 col-lg-4 offset-lg-2">
-    </xpath>
+            <p>
-
+                <span class="h2-fs">200+</span><br/>
-    <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
+                Successful Projects
-        <div class="col-6 col-lg-12 pt16 pb16" data-name="Number">
+            </p>
-            <span class="h2-fs">200+</span>
+            <div class="s_hr pt16 pb40" data-snippet="s_hr" data-name="Separator">
-            <p>Successful Projects</p>
+                <hr class="w-100 mx-auto"/>
-            <div class="s_hr pt16 pb0">
+            </div>
+            <p>
+                <span class="h2-fs">$95%</span><br/>
+                Client Retention Rate
+            </p>
+            <div class="s_hr pt16 pb40" data-snippet="s_hr" data-name="Separator">
+                <hr class="w-100 mx-auto"/>
+            </div>
+            <p>
+                <span class="h2-fs">$50M</span><br/>
+                Revenue Generated for Clients
+            </p>
+            <div class="s_hr pt16 pb40" data-snippet="s_hr" data-name="Separator">
                 <hr class="w-100 mx-auto"/>
             </div>
         </div>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][2]" position="replace">
+    <!-- Remove 2nd KPI's column -->
-        <div class="col-6 col-lg-12 pt16 pb16" data-name="Number">
+    <xpath expr="//div[hasclass('col-lg-3')]" position="replace"/>
-            <span class="h2-fs">95%</span>
-            <p>Client Retentation Rate</p>
-            <div class="s_hr pt16 pb0">
-                <hr class="w-100 mx-auto"/>
-            </div>
-        </div>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')][3]" position="replace">
-        <div class="col-6 col-lg-12 pt16 pb16" data-name="Number">
-            <span class="h2-fs">50M</span>
-            <p>Revenue Generated for Clients</p>
-            <div class="s_hr pt16 pb0">
-                <hr class="w-100 mx-auto"/>
-            </div>
-        </div>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')]" position="replace"/>
-    <xpath expr="//div[hasclass('col-lg-6')][2]" position="replace"/>
 </template>
 
 </odoo>

theme_treehouse/views/snippets/s_numbers_list.xml

@@ -16,40 +16,28 @@
         From carbon footprint reduction to renewable energy adoption and biodiversity preservation, our key milestones reflect our commitment to creating a sustainable future for all.
     </xpath>
     <!-- Numbers -->
-    <xpath expr="//span[hasclass('h2-fs')]" position="replace" mode="inner">
-        45%
-    </xpath>
     <xpath expr="(//p)[2]" position="replace" mode="inner">
+        <span class="h2-fs">45%</span><br/>
         Reduction in carbon emissions
     </xpath>
-    <xpath expr="(//span[hasclass('h2-fs')])[2]" position="replace" mode="inner">
-        2 Million
-    </xpath>
     <xpath expr="(//p)[3]" position="replace" mode="inner">
-        Trees Planted
+        <span class="h2-fs">85%</span><br/>
-    </xpath>
-    <xpath expr="(//span[hasclass('h2-fs')])[3]" position="replace" mode="inner">
-        85%
-    </xpath>
-    <xpath expr="(//p)[4]" position="replace" mode="inner">
         Waste diversion rate
     </xpath>
-    <xpath expr="(//span[hasclass('h2-fs')])[4]" position="replace" mode="inner">
+    <xpath expr="(//p)[4]" position="replace" mode="inner">
-        1.2 Billion
+        <span class="h2-fs">60%</span><br/>
-    </xpath>
-    <xpath expr="(//p)[5]" position="replace" mode="inner">
-        Liters of water saved
-    </xpath>
-    <xpath expr="(//span[hasclass('h2-fs')])[5]" position="replace" mode="inner">
-        60%
-    </xpath>
-    <xpath expr="(//p)[6]" position="replace" mode="inner">
         Renewable Energy usage
     </xpath>
-    <xpath expr="(//span[hasclass('h2-fs')])[6]" position="replace" mode="inner">
+    <xpath expr="(//p)[5]" position="replace" mode="inner">
-        500,000
+        <span class="h2-fs">2 Million</span><br/>
+        Trees Planted
+    </xpath>
+    <xpath expr="(//p)[6]" position="replace" mode="inner">
+        <span class="h2-fs">1.2 Billion</span><br/>
+        Liters of water saved
     </xpath>
     <xpath expr="(//p)[7]" position="replace" mode="inner">
+        <span class="h2-fs">500,000</span><br/>
         Tons of materials recycled
     </xpath>
 </template>

theme_zap/views/snippets/s_numbers.xml

@@ -6,16 +6,16 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc2" remove="o_cc1" separator=" "/>
     </xpath>
-    <!-- Column #2 -->
+    <!-- First KPI -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[2]" position="attributes">
+    <xpath expr="(//div[hasclass('col-lg-2')])[1]" position="attributes">
         <attribute name="class" add="o_cc o_cc1 rounded pt64 pb64" remove="pt24 pb24" separator=" "/>
         <attribute name="style" add="box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px !important;" separator=";"/>
     </xpath>
     <xpath expr="//span[hasclass('h5-fs')]" position="replace" mode="inner">
         <font class="text-o-color-1">Solutions</font>
     </xpath>
-    <!-- Column #3 -->
+    <!-- Second KPI -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[3]" position="attributes">
+    <xpath expr="(//div[hasclass('col-lg-2')])[2]" position="attributes">
         <attribute name="class" add="o_cc o_cc1 rounded pt64 pb64" remove="pt24 pb24" separator=" "/>
         <attribute name="style" add="box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px !important;" separator=";"/>
     </xpath>
@@ -25,8 +25,8 @@
     <xpath expr="(//span[hasclass('h5-fs')])[2]" position="replace" mode="inner">
         <font class="text-o-color-1">Happy customers</font>
     </xpath>
-    <!-- Column #4 -->
+    <!-- Third KPI -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[4]" position="attributes">
+    <xpath expr="(//div[hasclass('col-lg-2')])[3]" position="attributes">
         <attribute name="class" add="o_cc o_cc1 rounded pt64 pb64" remove="pt24 pb24" separator=" "/>
         <attribute name="style" add="box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px !important;" separator=";"/>
     </xpath>