[FIX] theme_kiddo: refine the theme

Since the redesign of some snippets, some customizations have been
broken. This commit adapts these customizations.
This commit also adjusts some spacing and font sizes.

task-4178078
Part of task-4177978

closes odoo/design-themes#953

X-original-commit: 7846e2cb96
Signed-off-by: Alice Gaudon (agau) <agau@odoo.com>

theme_kiddo/__manifest__.py

@@ -51,6 +51,7 @@
         'views/snippets/s_image_frame.xml',
         'views/snippets/s_wavy_grid.xml',
         'views/snippets/s_shape_image.xml',
+        'views/snippets/s_showcase.xml',
         'views/snippets/s_images_constellation.xml',
         'views/snippets/s_text_cover.xml',
         'views/snippets/s_empowerment.xml',

theme_kiddo/static/src/scss/primary_variables.scss

@@ -123,8 +123,6 @@ $o-website-values-palettes: (
     (
         'color-palettes-name': 'default-16',
 
-        'font-size-base': (14 / 16) * 1.075rem,
-        'header-font-size': .875rem,
         'logo-height': 3rem,
         'fixed-logo-height': 3rem,
         'btn-border-radius': 2rem,

theme_kiddo/views/images_library.xml

@@ -399,5 +399,10 @@
     <field name="name">website.s_empowerment_default_image</field>
     <field name="url">/theme_kiddo/static/src/img/snippets/s_empowerment_default_image.jpg</field>
 </record>
+<record id="s_showcase_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_showcase_default_image</field>
+    <field name="name">website.s_showcase_default_image</field>
+    <field name="url">/theme_kiddo/static/src/img/snippets/s_images_mosaic_default_image_2.jpg</field>
+</record>
 
 </odoo>

theme_kiddo/views/snippets/s_banner.xml

@@ -4,9 +4,9 @@
 <template id="s_banner" inherit_id="website.s_banner">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="s_parallax_no_overflow_hidden o_full_screen_height oe_img_bg o_bg_img_center pb216 pt72 o_cc o_cc5" remove="pt96 pb96" separator=" "/>
+        <attribute name="class" add="o_full_screen_height oe_img_bg o_bg_img_center pb216 pt72 o_cc o_cc5" remove="pt96 pb96" separator=" "/>
-        <attribute name="data-scroll-background-ratio">0</attribute>
         <attribute name="style">background-image: url("/web/image/website.s_banner_default_image");</attribute>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Wavy/22','colors':{'c3':'o-color-3'},'flip':['x'],'showOnMobile':true,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
 
     <!-- Row - remove grid mode -->
@@ -25,6 +25,11 @@
         <div class="o_we_bg_filter" style="background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 100%) !important;"/>
     </xpath>
 
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="after">
+        <div class="o_we_shape o_web_editor_Wavy_22 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor/Wavy/22.svg?c3=o-color-3&amp;flip=x'); background-position: 50% 100%;"/>
+    </xpath>
+
     <!-- Paragraph -->
     <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
         <attribute name="class" add="col-lg-6 pt32 pb32" remove="o_grid_item g-height-10 g-col-lg-4 col-lg-4" separator=" "/>
@@ -35,10 +40,10 @@
     </xpath>
     <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
         This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
-    </xpath>  
+    </xpath>
     <xpath expr="//div[hasclass('col-lg-6')]//p[2]" position="attributes">
         <attribute name="class" add="mb-0" separator=" "/>
-    </xpath>  
+    </xpath>
 </template>
 
 <template id="configurator_s_banner" inherit_id="website.configurator_s_banner">

theme_kiddo/views/snippets/s_carousel.xml

@@ -3,7 +3,7 @@
 
 <template id="s_carousel" inherit_id="website.s_carousel">
     <xpath expr="(//div[hasclass('container')])[2]" position="before">
-        <div class="o_we_bg_filter bg-white-50"/>
+        <div class="o_we_bg_filter bg-white-75"/>
     </xpath>
     <xpath expr="(//div[hasclass('container')])[3]" position="before">
         <div class="o_we_bg_filter bg-black-50"/>

theme_kiddo/views/snippets/s_showcase.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_showcase" inherit_id="website.s_showcase">
+    <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="attributes">
+        <attribute name="class" add="offset-lg-1 col-lg-5" remove="col-lg-6" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_kiddo/views/snippets/s_text_image.xml

@@ -13,11 +13,6 @@
         <div class="o_we_shape o_web_editor_Floats_13" style="background-image: url('/web_editor/shape/web_editor/Floats/13.svg?c1=o-color-1&amp;c2=o-color-2&amp;c5=o-color-5&amp;flip=y'); background-position: 50% 50%;"/>
     </xpath>
 
-    <!-- First column -->
-    <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
-        <attribute name="class" add="offset-lg-1" separator=" "/>
-    </xpath>
-
     <!-- Separator -->
     <xpath expr="//h2" position="after">
         <div class="s_hr pb32 pt8" data-snippet="s_hr" data-name="Separator">

theme_kiddo/views/snippets/s_three_columns.xml

@@ -23,6 +23,7 @@
         <attribute name="style">text-align: center;</attribute>
     </xpath>
     <xpath expr="//h5" position="replace" mode="inner">
+        <br/>
         Our mission
     </xpath>
     <!-- Column n°1 - Add separator -->
@@ -38,6 +39,10 @@
     <xpath expr="//p" position="replace" mode="inner">
         Our aim is to make the early years of your child’s life as enjoyable, rewarding and positive as possible.
     </xpath>
+    <!-- Column n°1 - Image -->
+    <xpath expr="//figure" position="attributes">
+        <attribute name="class" add="ratio-1x1" remove="ratio-16x9" separator=" "/>
+    </xpath>
 
     <!-- Column n°2 -->
     <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
@@ -55,6 +60,7 @@
         <attribute name="style">text-align: center;</attribute>
     </xpath>
     <xpath expr="(//h5)[2]" position="replace" mode="inner">
+        <br/>
         For every kid
     </xpath>
     <!-- Column n°2 - Add separator -->
@@ -70,6 +76,10 @@
     <xpath expr="(//p)[2]" position="replace" mode="inner">
         All activities are planned to meet each child’s individual needs. This approach will help your child to develop to the best of their ability.
     </xpath>
+    <!-- Column n°2 - Image -->
+    <xpath expr="(//figure)[2]" position="attributes">
+        <attribute name="class" add="ratio-1x1" remove="ratio-16x9" separator=" "/>
+    </xpath>
 
     <!-- Column n°3 -->
     <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
@@ -87,6 +97,7 @@
         <attribute name="style">text-align: center;</attribute>
     </xpath>
     <xpath expr="(//h5)[3]" position="replace" mode="inner">
+        <br/>
         Open-door policy
     </xpath>
     <!-- Column n°3 - Add separator -->
@@ -102,17 +113,21 @@
     <xpath expr="(//p)[3]" position="replace" mode="inner">
         You are welcome to come and see the nursery and meet the team at any time convenient to you.
     </xpath>
+    <!-- Column n°3 - Image -->
+    <xpath expr="(//figure)[3]" position="attributes">
+        <attribute name="class" add="ratio-1x1" remove="ratio-16x9" separator=" "/>
+    </xpath>
 </template>
 
 <template id="configurator_s_three_columns" inherit_id="website.configurator_s_three_columns">
     <!-- Shape option -->
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14_001","flip":["y"]}</attribute>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/14_001','colors':{'c3':'o-color-3','c4':'rgba(0, 0, 0, 0)'},'flip':['y'],'showOnMobile':true,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_14_001" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-3&amp;c4=rgba%280%2C%200%2C%200%2C%200%29&amp;flip=y'); background-position: 50% 0%;"/>
+        <div class="o_we_shape o_web_editor_Origins_14_001 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-3&amp;c4=rgba%280%2C%200%2C%200%2C%200%29&amp;flip=y'); background-position: 50% 0%;"/>
     </xpath>
 </template>