From 6427cae1991178a2356239582937a23c4e0459e6 Mon Sep 17 00:00:00 2001
From: "Serge Bayet (seba)" <seba@odoo.com>
Date: Wed, 14 Feb 2024 10:18:19 +0100
Subject: [PATCH] [FIX] theme_vehicle: fix the vehicle s_picture theme layout

This commit addresses the issue with the customization of the s_picture
snippet within the theme_vehicle. Previously, this snippet enforced a
column height, which cannot be modified using the editor. Themes should
not impose customizations that users are unable to adjust using the
editor.

See also : odoo/odoo#145413
task-3626753

Part-of: odoo/design-themes#753
---
 theme_vehicle/views/customizations.xml | 39 +++++++++++++-------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index e246f864e..32e638d85 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -147,29 +147,28 @@
 <template id="s_picture" inherit_id="website.s_picture" name="Vehicle s_picture">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt0 pb0 oe_img_bg o_cc5" remove="pt48 pb24 o_cc2" separator=" "/>
+        <attribute name="class" add="o_cc5" remove="o_cc2" separator=" "/>
     </xpath>
-    <xpath expr="//section" position="attributes">
-        <attribute name="style" add="background-image: url(/web/image/website.s_picture_default_image); background-position: 50% 0;"/>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace">
+        <h2 class="text-center">View the all-new KORAN in 3D wherever you are</h2>
     </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//p" position="replace" mode="inner">
+        Bring the KORAN to life on your smartphone or tablet so you can visualise it for yourself
+    </xpath>
+    <!-- Image + Shape -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="class" add="img-fluid" remove="img-thumbnail padding-large" separator=" "/>
+        <attribute name="src">/web/image/website.s_picture_default_image</attribute>
+        <attribute name="data-file-name">01.svg</attribute>
+    </xpath>
+    <xpath expr="//figcaption" position="replace" mode="inner">
+        <span class="text-o-color-3">Our uniquely designed LED headlights are not only gorgeous but powerfully light your way.</span>
+    </xpath>
+    <!-- Filter -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_bg_filter bg-black-50"></div>
-    </xpath>
-    <!-- Layout -->
-    <xpath expr="//div[hasclass('container')]" position="replace">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col-lg-12 text-center d-flex flex-column" style="height: 850px;">
-                    <div class="pt40 d-flex flex-column flex-grow-1">
-                        <h2 class="text-o-color-3">View the all-new KORAN in 3D wherever you are<br/></h2>
-                        <p class="text-o-color-3">Bring the KORAN to life on your smartphone or tablet so you can visualise it for yourself.<br/></p>
-                    </div>
-                    <div class="pb40 d-flex justify-content-center align-items-end">
-                        <span class="text-o-color-3">Our uniquely designed LED headlights are not only gorgeous but powerfully light your way.<br/></span>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
 </template>