[IMP] theme_*: adapt s_product_list

task-4048196
Part of task-3619705

Part-of: odoo/design-themes#919
Related: odoo/odoo#180736
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Antoine (anso)
2024-08-01 12:32:17 +02:00
committed by qsm-odoo
parent bb8254a09f
commit 05fdc8e75f
9 changed files with 263 additions and 285 deletions
+1 -1
View File
@@ -21,7 +21,7 @@ const snippets = [
{
id: 's_product_list',
name: 'Items',
groupName: "Content",
groupName: "Columns",
},
{
id: 's_call_to_action',
+26 -46
View File
@@ -4,92 +4,72 @@
<template id="s_product_list" inherit_id="website.s_product_list">
<!-- Section -->
<xpath expr="//section" position="attributes">
<attribute name="class" add="pt96 pb96" separator=" "/>
<attribute name="class" add="pt96 pb96" remove="pt64 pb64" separator=" "/>
</xpath>
<!-- Container -->
<xpath expr="//div[hasclass('container-fluid')]" position="attributes">
<attribute name="class" add="container" remove="container-fluid" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('row')]" position="attributes">
<attribute name="class" add="justify-content-center" separator=" "/>
<!-- Title -->
<xpath expr="//h2" position="attributes">
<attribute name="style">text-align: center;</attribute>
</xpath>
<!-- Item n°1 -->
<xpath expr="//div[hasclass('col-lg-2')]" position="attributes">
<attribute name="class" add="border rounded mx-3" separator=" "/>
<attribute name="class" add="offset-lg-1" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('col-lg-2')]//h3" position="replace" mode="inner">
About us
</xpath>
<xpath expr="//div[hasclass('col-lg-2')]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath>
<xpath expr="//div[hasclass('s_product_list_item_link')]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('s_product_list_item_link')]//a" position="replace">
<a t-att-href="url">About us</a>
</xpath>
<!-- Item n°1 : SVG with dynamic color -->
<xpath expr="//div[hasclass('col-lg-2')]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_1.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
</xpath>
<!-- Item n°2 -->
<xpath expr="(//div[hasclass('col-lg-2')])[2]" position="attributes">
<attribute name="class" add="border rounded mx-3" separator=" "/>
<xpath expr="(//div[hasclass('col-lg-2')])[2]//h3" position="replace" mode="inner">
Our team
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][2]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[2]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[2]//a" position="replace">
<a t-att-href="url">Our team</a>
</xpath>
<!-- Item n°2 : SVG with dynamic color -->
<xpath expr="(//div[hasclass('col-lg-2')])[2]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_2.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
</xpath>
<!-- Item n°3 -->
<xpath expr="(//div[hasclass('col-lg-2')])[3]" position="attributes">
<attribute name="class" add="border rounded mx-3" separator=" "/>
<xpath expr="(//div[hasclass('col-lg-2')])[3]//h3" position="replace" mode="inner">
Playground
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][3]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[3]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[3]//a" position="replace">
<a t-att-href="url">Playground</a>
</xpath>
<!-- Item n°3 : SVG with dynamic color -->
<xpath expr="(//div[hasclass('col-lg-2')])[3]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_3.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
</xpath>
<!-- Item n°4 -->
<xpath expr="(//div[hasclass('col-lg-2')])[4]" position="attributes">
<attribute name="class" add="border rounded mx-3" separator=" "/>
<xpath expr="(//div[hasclass('col-lg-2')])[4]//h3" position="replace" mode="inner">
Events
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][4]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[4]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[4]//a" position="replace">
<a t-att-href="url">Events</a>
</xpath>
<!-- Item n°4 : SVG with dynamic color -->
<xpath expr="(//div[hasclass('col-lg-2')])[4]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_4.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
</xpath>
<!-- Item n°5 -->
<xpath expr="(//div[hasclass('col-lg-2')])[5]" position="attributes">
<attribute name="class" add="border rounded mx-3" separator=" "/>
<xpath expr="(//div[hasclass('col-lg-2')])[5]//h3" position="replace" mode="inner">
Visit us
</xpath>
<xpath expr="//div[hasclass('col-lg-2')][5]//div[hasclass('card')]" position="attributes">
<attribute name="style">border-radius: 16px !important; border-width: 4px !important; border-style: dotted !important; border-color: var(--o-color-2) !important;</attribute>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[5]" position="attributes">
<attribute name="class" add="pb24" separator=" "/>
</xpath>
<xpath expr="(//div[hasclass('s_product_list_item_link')])[5]//a" position="replace">
<a t-att-href="url">Visit us</a>
</xpath>
<!-- Item n°5 : SVG with dynamic color -->
<xpath expr="(//div[hasclass('col-lg-2')])[5]//img" position="attributes">
<attribute name="src">/web_editor/shape/theme_kiddo/s_product_list_6.svg?c1=o-color-1&amp;c2=o-color-2</attribute>