From 8366f30360bd1f92423259373bbeac899de791a5 Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Mon, 18 Nov 2024 10:36:01 +0100
Subject: [PATCH] [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       |  8 ++-
 theme_notes/views/snippets/s_numbers.xml      | 19 +++----
 .../views/snippets/s_numbers_list.xml         | 56 +++++++++----------
 .../views/snippets/s_numbers_list.xml         | 36 ++++--------
 theme_zap/views/snippets/s_numbers.xml        | 12 ++--
 5 files changed, 57 insertions(+), 74 deletions(-)

diff --git a/theme_nano/views/snippets/s_numbers.xml b/theme_nano/views/snippets/s_numbers.xml
index f7c2ccf14..a7ac367f3 100644
--- a/theme_nano/views/snippets/s_numbers.xml
+++ b/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-7')]" position="replace">
+    <xpath expr="//div[hasclass('col-lg-5')]" 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/>
diff --git a/theme_notes/views/snippets/s_numbers.xml b/theme_notes/views/snippets/s_numbers.xml
index 32f023ca9..5cb631f08 100644
--- a/theme_notes/views/snippets/s_numbers.xml
+++ b/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 -->
-    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+    <!-- Title & Subtitle -->
+    <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
         <attribute name="class" add="pt104 pb64 o_cc o_cc3" separator=" "/>
     </xpath>
-    <!-- Column #2 -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[2]" position="attributes">
+    <!-- First KPI -->
+    <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 -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[3]" position="attributes">
+    <!-- Second KPI -->
+    <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 -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[4]" position="attributes">
+    <!-- Third KPI -->
+    <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>
diff --git a/theme_odoo_experts/views/snippets/s_numbers_list.xml b/theme_odoo_experts/views/snippets/s_numbers_list.xml
index 39b5e8c02..b83feb4f0 100644
--- a/theme_odoo_experts/views/snippets/s_numbers_list.xml
+++ b/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 -->
-    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="col-lg-5" remove="col-lg-6 offset-lg-1" separator=" "/>
-    </xpath>
-
-    <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
-        <div class="col-6 col-lg-12 pt16 pb16" data-name="Number">
-            <span class="h2-fs">200+</span>
-            <p>Successful Projects</p>
-            <div class="s_hr pt16 pb0">
+    <!-- KPI's -->
+    <xpath expr="//div[hasclass('col-lg-3')]" position="replace">
+        <div class="col-12 col-lg-4 offset-lg-2">
+            <p>
+                <span class="h2-fs">200+</span><br/>
+                Successful Projects
+            </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">$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">
-        <div class="col-6 col-lg-12 pt16 pb16" data-name="Number">
-            <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"/>
+    <!-- Remove 2nd KPI's column -->
+    <xpath expr="//div[hasclass('col-lg-3')]" position="replace"/>
 </template>
 
 </odoo>
diff --git a/theme_treehouse/views/snippets/s_numbers_list.xml b/theme_treehouse/views/snippets/s_numbers_list.xml
index 62eb5b973..009595fe4 100644
--- a/theme_treehouse/views/snippets/s_numbers_list.xml
+++ b/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
-    </xpath>
-    <xpath expr="(//span[hasclass('h2-fs')])[3]" position="replace" mode="inner">
-        85%
-    </xpath>
-    <xpath expr="(//p)[4]" position="replace" mode="inner">
+        <span class="h2-fs">85%</span><br/>
         Waste diversion rate
     </xpath>
-    <xpath expr="(//span[hasclass('h2-fs')])[4]" position="replace" mode="inner">
-        1.2 Billion
-    </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">
+    <xpath expr="(//p)[4]" position="replace" mode="inner">
+        <span class="h2-fs">60%</span><br/>
         Renewable Energy usage
     </xpath>
-    <xpath expr="(//span[hasclass('h2-fs')])[6]" position="replace" mode="inner">
-        500,000
+    <xpath expr="(//p)[5]" position="replace" mode="inner">
+        <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>
diff --git a/theme_zap/views/snippets/s_numbers.xml b/theme_zap/views/snippets/s_numbers.xml
index c6029afb9..38a13d9a9 100644
--- a/theme_zap/views/snippets/s_numbers.xml
+++ b/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 -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[2]" position="attributes">
+    <!-- First KPI -->
+    <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 -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[3]" position="attributes">
+    <!-- Second KPI -->
+    <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 -->
-    <xpath expr="(//div[hasclass('col-lg-4')])[4]" position="attributes">
+    <!-- Third KPI -->
+    <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>