[IMP] theme_artists: revamp theme

task-4178014
Part of task-4177975

theme_artists/__manifest__.py

@@ -69,21 +69,18 @@
         'static/description/artists_screenshot.jpg',
     ],
     'images_preview_theme': {
-        'website.s_carousel_default_image_1': '/theme_artists/static/src/img/snippets/s_carousel_1.jpg',
-        'website.s_text_image_default_image': '/theme_artists/static/src/img/snippets/s_text_image.jpg',
-        'website.s_three_columns_default_image_1': '/theme_artists/static/src/img/snippets/s_product_5.jpg',
-        'website.s_three_columns_default_image_2': '/theme_artists/static/src/img/snippets/library_image_13.jpg',
-        'website.s_three_columns_default_image_3': '/theme_artists/static/src/img/snippets/library_image_07.jpg',
-        'website.s_cover_default_image': '/theme_artists/static/src/img/snippets/s_cover.jpg',
-        'website.library_image_02': '/theme_artists/static/src/img/snippets/library_image_03.jpg',
-        'website.library_image_05': '/theme_artists/static/src/img/snippets/library_image_19.jpg',
-        'website.library_image_08': '/theme_artists/static/src/img/snippets/library_image_14.jpg',
-        'website.library_image_10': '/theme_artists/static/src/img/snippets/library_image_10.jpg',
-        'website.library_image_14': '/theme_artists/static/src/img/snippets/library_image_05.jpg',
+        'website.library_image_02': '/theme_artists/static/src/img/snippets/library_image_02.jpg',
+        'website.library_image_03': '/theme_artists/static/src/img/snippets/s_text_image.jpg',
+        'website.library_image_05': '/theme_artists/static/src/img/snippets/library_image_08.jpg',
+        'website.library_image_10': '/theme_artists/static/src/img/snippets/s_banner_2.jpg',
+        'website.library_image_13': '/theme_artists/static/src/img/snippets/s_banner.jpg',
+        'website.s_carousel_default_image_2': '/theme_artists/static/src/img/snippets/s_cover.jpg',
+        'website.library_image_14': '/theme_artists/static/src/img/snippets/library_image_14.jpg',
         'website.library_image_16': '/theme_artists/static/src/img/snippets/library_image_16.jpg',
+        'website.s_image_text_default_image': '/theme_artists/static/src/img/snippets/s_shape_image_default_image.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_carousel', 's_text_image', 's_three_columns', 's_title', 's_images_wall', 's_call_to_action'],
+        'homepage': ['s_sidegrid', 's_product_catalog', 's_cta_box', 's_title', 's_image_frame', 's_images_wall', 's_shape_image'],
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-artists.odoo.com',

theme_artists/models/theme_artists.py

@@ -5,7 +5,7 @@ class ThemeArtists(models.AbstractModel):
     _inherit = 'theme.utils'
 
     def _theme_artists_post_copy(self, mod):
-        self.enable_view('website.template_header_hamburger')
+        self.enable_view('website.template_header_vertical')
         self.enable_view('website.no_autohide_menu')
 
         self.enable_view('website.template_footer_centered')

theme_artists/static/src/js/tour.js

@@ -4,34 +4,39 @@ import * as wTourUtils from '@website/js/tours/tour_utils';
 
 const snippets = [
     {
-        id: 's_carousel',
-        name: 'Carousel',
+        id: 's_sidegrid',
+        name: 'Side Grid',
         groupName: "Intro",
     },
     {
-        id: 's_text_image',
-        name: 'Text - Image',
+        id: 's_product_catalog',
+        name: 'Product Catalog',
         groupName: "Content",
     },
     {
-        id: 's_three_columns',
-        name: 'Columns',
-        groupName: "Columns",
+        id: 's_cta_box',
+        name: 'Box Call to Action',
+        groupName: "Content",
     },
     {
         id: 's_title',
         name: 'Title',
         groupName: "Text",
     },
+    {
+        id: 's_image_frame',
+        name: 'Image Frame',
+        groupName: "Images",
+    },
     {
         id: 's_images_wall',
         name: 'Images Wall',
         groupName: "Images",
     },
     {
-        id: 's_call_to_action',
-        name: 'Call to Action',
-        groupName: "Content",
+        id: 's_shape_image',
+        name: 'Shape Image',
+        groupName: "Images",
     },
 ];
 
@@ -47,4 +52,5 @@ wTourUtils.registerThemeHomepageTour("artists_tour", () => [
     wTourUtils.goBackToBlocks(),
     ...wTourUtils.dragNDrop(snippets[4]),
     ...wTourUtils.dragNDrop(snippets[5]),
+    ...wTourUtils.dragNDrop(snippets[6]),
 ]);

theme_artists/static/src/scss/primary_variables.scss

@@ -85,6 +85,10 @@ $o-theme-font-configs: (
         'family': ('Montserrat', sans-serif),
         'url': 'Montserrat:300,300i,400,400i,700,700i',
     ),
+    'Bebas Neue': (
+        'family': ('Bebas Neue', sans-serif),
+        'url': 'Bebas+Neue:400,700',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -96,11 +100,23 @@ $o-website-values-palettes: (
         'color-palettes-name': 'artists-1',
         'header-font-size': (13 / 16) * 1rem,
         'font': 'Montserrat',
-        'headings-font': 'Oxygen',
+        'headings-font': 'Bebas Neue',
         'btn-ripple': true,
-        'header-template': 'hamburger',
+        'header-template': 'vertical',
         'footer-template': 'centered',
         'link-underline': 'never',
+        'btn-padding-y': .5rem,
+        'btn-padding-x': 1rem,
+        'btn-padding-y-sm': .25rem,
+        'btn-padding-x-sm': .5rem,
+        'btn-padding-y-lg': .75rem,
+        'btn-padding-x-lg': 1.5rem,
+        'btn-border-radius': 2px,
+        'btn-border-radius-sm': 2px,
+        'btn-border-radius-lg': 2px,
+        'input-border-radius': 2px,
+        'input-border-radius-sm': 2px,
+        'input-border-radius-lg': 2px,
     ),
 );
 

theme_artists/views/images.xml

@@ -385,5 +385,36 @@ Check in theme_monglia's primary_variables.scss, theme.scss and theme_common's m
     <field name="name">website.s_empowerment_default_image</field>
     <field name="url">/theme_artists/static/src/img/snippets/s_empowerment_default_image.jpg</field>
 </record>
+<record id="s_sidegrid_default_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_sidegrid_default_image_1</field>
+    <field name="name">website.s_sidegrid_default_image_1</field>
+    <field name="url">website.s_text_image_default_image</field>
+</record>
+<record id="s_sidegrid_default_image_2" model="theme.ir.attachment">
+    <field name="key">website.s_sidegrid_default_image_2</field>
+    <field name="name">website.s_sidegrid_default_image_2</field>
+    <field name="url">website.s_banner_default_image_2</field>
+</record>
+<record id="s_sidegrid_default_image_3" model="theme.ir.attachment">
+    <field name="key">website.s_sidegrid_default_image_3</field>
+    <field name="name">website.s_sidegrid_default_image_3</field>
+    <field name="url">/web/image/website.s_banner_default_image</field>
+</record>
+<record id="s_sidegrid_default_image_4" model="theme.ir.attachment">
+    <field name="key">website.s_sidegrid_default_image_4</field>
+    <field name="name">website.s_sidegrid_default_image_4</field>
+    <field name="url">/web/image/website.library_image_08</field>
+</record>
+<record id="s_image_frame_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_image_frame_default_image</field>
+    <field name="name">website.s_image_frame_default_image</field>
+    <field name="url">website.s_cover_default_image</field>
+</record>
+<record id="website.s_cta_box_default_image" model="ir.attachment">
+    <field name="public" eval="True"/>
+    <field name="name">s_cta_box_default_image.jpg</field>
+    <field name="type">url</field>
+    <field name="url">website.library_image_02</field>
+</record>
 
 </odoo>

theme_artists/views/snippets/s_call_to_action.xml

@@ -15,15 +15,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_call_to_action" inherit_id="website.configurator_s_call_to_action">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/12_001","flip":["y"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_12_001" style="background-image: url('/web_editor/shape/web_editor/Airy/12_001.svg?c1=o-color-1&amp;c3=o-color-5&amp;flip=y'); background-position: 50% 100%;"/>
-    </xpath>
-</template>
-
 </odoo>

theme_artists/views/snippets/s_carousel.xml

@@ -52,33 +52,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_carousel" inherit_id="website.configurator_s_carousel">
-    <!-- Carousel-item #01 -->
-    <xpath expr="//div[hasclass('carousel-item')]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/16","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('carousel-item')]//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_16"/>
-    </xpath>
-
-    <!-- Carousel-item #02 -->
-    <xpath expr="//div[hasclass('carousel-item')][2]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/16","flip":["y"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('carousel-item')][2]//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_16" style="background-image: url('/web_editor/shape/web_editor/Origins/16.svg?c3=o-color-5&amp;flip=y'); background-position: 50% 50%;"/>
-    </xpath>
-
-    <!-- Carousel-item #03 -->
-    <xpath expr="//div[hasclass('carousel-item')][3]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/16","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('carousel-item')][3]//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_16"/>
-    </xpath>
-</template>
-
 </odoo>

theme_artists/views/snippets/s_cta_box.xml

@@ -2,9 +2,12 @@
 <odoo>
 
 <template id="s_cta_box" inherit_id="website.s_cta_box">
-    <!-- Card -->
-    <xpath expr="//div[hasclass('card')]" position="attributes">
-        <attribute name="class" add="o_cc5" remove="o_cc4" separator=" "/>
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc4 pt56 pb56" remove="pt80 pb80" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('s_card')]" position="attributes">
+        <attribute name="style" add="border-radius: 0px !important; --card-spacer-x: 0px;" remove="--card-spacer-x: 64px;" separator=";"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
@@ -14,14 +17,13 @@
     <xpath expr="//p" position="replace" mode="inner">
         Elevate your space with the unique wonders of artistic craftsmanship.<br/><br/>
     </xpath>
-    <!-- Image -->
-    <xpath expr="//img" position="attributes">
-        <attribute name="src">/theme_artists/static/src/img/snippets/library_image_03.jpg</attribute>
-    </xpath>
     <!-- Button -->
     <xpath expr="//a[hasclass('btn')]" position="replace" mode="inner">
         Discover
     </xpath>
+    <xpath expr="//img" position="attributes">
+        <attribute name="class" remove="rounded-end" separator=" "/>
+    </xpath>
 </template>
 
 </odoo>

theme_artists/views/snippets/s_image_frame.xml

@@ -6,9 +6,25 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" remove="o_cc1" add="o_cc5" separator=" "/>
     </xpath>
+    <!-- Grid Item -->
+    <xpath expr="//div[hasclass('o_grid_item')]" position="attributes">
+        <attribute name="class" remove="rounded" separator=" "/>
+        <attribute name="style" remove="border-radius: 6.4px !important;" separator=";"/>
+    </xpath>
+    <!-- Grid Item 2 -->
+    <xpath expr="//div[hasclass('o_grid_item')][2]" position="attributes">
+        <attribute name="class" remove="rounded" separator=" "/>
+        <attribute name="style" add="--grid-item-padding-y: 32px !important;" separator=";"/>
+    </xpath>
     <!-- Image -->
     <xpath expr="//img" position="attributes">
-        <attribute name="src">/web/image/website.library_image_16</attribute>
+        <attribute name="style" remove="padding: 16px;" separator=";"/>
+    </xpath>
+</template>
+
+<template id="configurator_s_image_frame" inherit_id="website.configurator_s_image_frame">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" remove="pt64 pb64" add="pt40 pb0" separator=" "/>
     </xpath>
 </template>
 

theme_artists/views/snippets/s_image_gallery.xml

@@ -4,40 +4,26 @@
 <template id="s_images_wall" inherit_id="website.s_images_wall">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="parallax s_parallax_is_fixed" separator=" "/>
-        <attribute name="data-scroll-background-ratio">1</attribute>
-    </xpath>
-    <!-- Parallax background & filter -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image');"/>
-        <div class="o_we_bg_filter" style="background-color: rgba(17, 13, 22, 0.85) !important;"/>
+        <attribute name="class" add="o_cc o_cc5 pb56 pt16" remove="pt24 pb24" separator=" "/>
     </xpath>
     <!-- Images -->
     <xpath expr="//img" position="attributes">
-        <attribute name="class" add="shadow" separator=" "/>
+        <attribute name="class" remove="rounded" separator=" "/>
     </xpath>
     <xpath expr="(//img)[2]" position="attributes">
-        <attribute name="class" add="shadow" separator=" "/>
+        <attribute name="class" remove="rounded" separator=" "/>
+    </xpath>
+    <xpath expr="(//img)[3]" position="attributes">
+        <attribute name="class" remove="rounded" separator=" "/>
     </xpath>
     <xpath expr="(//img)[4]" position="attributes">
-        <attribute name="class" add="shadow" separator=" "/>
+        <attribute name="class" remove="rounded" separator=" "/>
     </xpath>
     <xpath expr="(//img)[5]" position="attributes">
-        <attribute name="class" add="shadow" separator=" "/>
+        <attribute name="class" remove="rounded" separator=" "/>
     </xpath>
     <xpath expr="(//img)[6]" position="attributes">
-        <attribute name="class" add="shadow" separator=" "/>
-    </xpath>
-</template>
-
-<template id="configurator_s_images_wall" inherit_id="website.configurator_s_images_wall">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/04","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape, parallax background & filter -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_04"/>
+        <attribute name="class" remove="rounded" separator=" "/>
     </xpath>
 </template>
 

theme_artists/views/snippets/s_product_catalog.xml

@@ -4,11 +4,65 @@
 <template id="s_product_catalog" inherit_id="website.s_product_catalog">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc5 pt200 pb200" remove="pb64 pt64" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5 pt0 pb40" remove="pb64 pt64" separator=" "/>
         <attribute name="style"/>
     </xpath>
+    <!-- Title container -->
+    <xpath expr="//div[hasclass('text-center')]" position="attributes">
+        <attribute name="class" remove="text-center pb48" separator=" "/>
+    </xpath>
+    <xpath expr="//h2" position="replace">
+        <h2 style="text-align: left !important;">Upcoming Exhibitions</h2>
+    </xpath>
+    <xpath expr="//p[hasclass('lead')]" position="replace">
+        <p class="lead" style="text-align: left !important;">Artistic journey around the world</p>
+    </xpath>
     <!-- Remove filter -->
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace"/>
+    <!-- Title -->
+    <xpath expr="//div[hasclass('col-lg-6')]/h3[hasclass('h4-fs')]" position="replace"/>
+    <!-- List -->
+    <xpath expr="//div[hasclass('col-lg-6')]/ul[hasclass('list-unstyled')]" position="replace">
+        <ul class="list-unstyled my-3">
+            <t t-call="website.s_product_catalog_dish">
+                <t t-set="name">New York</t>
+                <t t-set="price">02.08.2025</t>
+                <t t-set="description">The Museum of Modern Art (MoMA)</t>
+            </t>
+            <t t-call="website.s_product_catalog_dish">
+                <t t-set="name">Paris</t>
+                <t t-set="price">09.09.2025</t>
+                <t t-set="description">Digital Art Paris</t>
+            </t>
+            <t t-call="website.s_product_catalog_dish">
+                <t t-set="name">Brussels</t>
+                <t t-set="price">12.11.2025</t>
+                <t t-set="description">Royal Museums of Fine Arts of Belgium</t>
+            </t>
+        </ul>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]/h3[hasclass('h4-fs')]" position="replace"/>
+    <!-- List -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]/ul[hasclass('list-unstyled')]" position="replace">
+        <ul class="list-unstyled my-3">
+            <t t-call="website.s_product_catalog_dish">
+                <t t-set="name">Amsterdam</t>
+                <t t-set="price">02.08.2025</t>
+                <t t-set="description">Comput'Art</t>
+            </t>
+            <t t-call="website.s_product_catalog_dish">
+                <t t-set="name">Berlin</t>
+                <t t-set="price">12.12.2025</t>
+                <t t-set="description">Berlin Art Week</t>
+            </t>
+            <t t-call="website.s_product_catalog_dish">
+                <t t-set="name">London</t>
+                <t t-set="price">03.01.2026</t>
+                <t t-set="description">Abstract Vision</t>
+            </t>
+        </ul>
+    </xpath>
 </template>
 
 </odoo>