mirror of
https://github.com/odoo/design-themes.git
synced 2025-10-07 01:18:52 +07:00
[IMP] theme_graphene: revamp the theme
task-4178075 Part of task-4177975 closes odoo/design-themes#913 Signed-off-by: Robin Lejeune (role) <role@odoo.com>
This commit is contained in:
mano-odoo
@@ -18,12 +18,9 @@
|
||||
],
|
||||
'images_preview_theme': {
|
||||
'website.s_cover_default_image': '/theme_graphene/static/src/img/pictures/bg_image_08.jpg',
|
||||
'website.s_text_image_default_image': '/theme_graphene/static/src/img/pictures/content_02.jpg',
|
||||
'website.s_parallax_default_image': '/theme_graphene/static/src/img/pictures/content_12.jpg',
|
||||
'website.s_picture_default_image': '/theme_graphene/static/src/img/pictures/content_04.jpg',
|
||||
},
|
||||
'configurator_snippets': {
|
||||
'homepage': ['s_cover', 's_text_image', 's_numbers', 's_picture', 's_comparisons'],
|
||||
'homepage': ['s_cover', 's_text_image', 's_numbers_grid', 's_mockup_image', 's_comparisons', 's_references'],
|
||||
},
|
||||
'new_page_templates': {
|
||||
'about': {
|
||||
|
||||
@@ -5,7 +5,7 @@ class ThemeGraphene(models.AbstractModel):
|
||||
_inherit = 'theme.utils'
|
||||
|
||||
def _theme_graphene_post_copy(self, mod):
|
||||
self.enable_view('website.template_header_sales_three')
|
||||
self.enable_view('website.template_header_stretch')
|
||||
|
||||
self.enable_view('website.template_footer_centered')
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 115 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -14,13 +14,13 @@ const snippets = [
|
||||
groupName: "Content",
|
||||
},
|
||||
{
|
||||
id: 's_numbers',
|
||||
name: 'Numbers',
|
||||
id: 's_numbers_grid',
|
||||
name: 'Numbers Grid',
|
||||
groupName: "Content",
|
||||
},
|
||||
{
|
||||
id: 's_picture',
|
||||
name: 'Title - Image',
|
||||
id: 's_mockup_image',
|
||||
name: 'Mockup Image',
|
||||
groupName: "Images",
|
||||
},
|
||||
{
|
||||
@@ -28,11 +28,16 @@ const snippets = [
|
||||
name: 'Comparisons',
|
||||
groupName: "Content",
|
||||
},
|
||||
{
|
||||
id: 's_references',
|
||||
name: 'References',
|
||||
groupName: "Content",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
wTourUtils.registerThemeHomepageTour("graphene_tour", () => [
|
||||
wTourUtils.assertCssVariable('--color-palettes-name', '"graphene-1"'),
|
||||
wTourUtils.assertCssVariable('--color-palettes-name', '"base-1"'),
|
||||
...wTourUtils.dragNDrop(snippets[0]),
|
||||
...wTourUtils.clickOnText(snippets[0], 'h1', 'top'),
|
||||
wTourUtils.goBackToBlocks('left'),
|
||||
|
||||
@@ -93,25 +93,24 @@ $o-theme-font-configs: (
|
||||
|
||||
$o-website-values-palettes: (
|
||||
(
|
||||
'color-palettes-name': 'graphene-1',
|
||||
'color-palettes-name': 'base-1',
|
||||
|
||||
'font': 'Source Sans Pro',
|
||||
'headings-font': 'Assistant',
|
||||
|
||||
'btn-ripple': true,
|
||||
'layout': 'boxed',
|
||||
'header-template': 'sales_three',
|
||||
'header-template': 'stretch',
|
||||
'footer-template': 'centered',
|
||||
|
||||
'btn-font-size-lg': 1rem,
|
||||
'btn-padding-y-lg': .6rem,
|
||||
'btn-padding-x-lg': 2.2rem,
|
||||
'btn-border-radius-lg': 2px,
|
||||
'btn-border-radius': 2px,
|
||||
'btn-border-radius-sm': 2px,
|
||||
'btn-border-radius-lg': 4px,
|
||||
),
|
||||
);
|
||||
|
||||
$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'graphene-1');
|
||||
|
||||
$o-color-palettes-compatibility-indexes: (
|
||||
1: 'graphene-1',
|
||||
2: 'graphene-2',
|
||||
|
||||
@@ -4,21 +4,24 @@
|
||||
<!-- ======== COVER ======== -->
|
||||
<template id="s_cover" inherit_id="website.s_cover" name="Graphene s_cover">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" add="pt160 pb240 s_parallax_no_overflow_hidden o_cc3" remove="pt232 pb232 s_parallax_is_fixed s_parallax o_cc5" separator=" "/>
|
||||
<attribute name="class" add="pt160 pb192" remove="pt232 pb232 s_parallax_is_fixed s_parallax" separator=" "/>
|
||||
<attribute name="data-scroll-background-ratio">0</attribute>
|
||||
<attribute name="style">background-image: url('/web/image/website.s_cover_default_image');</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
|
||||
<xpath expr="//h1" position="replace"/>
|
||||
<xpath expr="//p" position="replace"/>
|
||||
<xpath expr="//p" position="replace"/>
|
||||
<xpath expr="//section/div[hasclass('container')]" position="inside">
|
||||
<div class="row">
|
||||
<div class="col col-lg-11">
|
||||
<h1 style="text-align: right;">
|
||||
<div class="col col-lg-7">
|
||||
<h1>
|
||||
Making the difference.
|
||||
</h1>
|
||||
<p class="lead o_default_snippet_text" style="text-align: right">
|
||||
<p class="lead o_default_snippet_text">
|
||||
Our mission is to give customers the best experience.<br/>Extensive documentation & guides, an active community,<br/>24/7 support make it a pleasure to work with us.
|
||||
</p>
|
||||
<p style="text-align: right">
|
||||
<p>
|
||||
<a t-att-href="cta_btn_href" class="btn btn-primary btn-lg o_default_snippet_text"><t t-esc="cta_btn_text">Contact us</t></a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -33,6 +36,9 @@
|
||||
<xpath expr="//section/div[hasclass('container')]" position="before">
|
||||
<div class="o_we_shape o_web_editor_Origins_02_001"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('col-lg-7')]" position="attributes">
|
||||
<attribute name="class" add="pb128" separator=" "/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- ======== STRIPED TOP ======== -->
|
||||
@@ -45,29 +51,27 @@
|
||||
|
||||
<!-- ======== TEXT-IMAGE ======== -->
|
||||
<template id="s_text_image" inherit_id="website.s_text_image" name="Graphene s_text_image">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" add="pb96 pt0" remove="pb80 pt80" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="//h2" position="replace">
|
||||
<h3>Unique experiences to drive engagement</h3>
|
||||
<h2>Unique experiences to drive engagement</h2>
|
||||
<div class="s_hr pt16 pb0" data-snippet="s_hr" data-name="Separator">
|
||||
<hr class="w-100 mx-auto" style="border-top-color: rgba(0, 0, 0, 0) !important;"/>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath expr="//img" position="attributes">
|
||||
<attribute name="src">/web_editor/image_shape/website.s_image_text_device_perspective/web_editor/devices/iphone_3d_portrait_02.svg</attribute>
|
||||
<attribute name="data-shape">web_editor/devices/iphone_3d_portrait_02</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//p[1]" position="replace" mode="inner">
|
||||
Users are looking to consume engaging content.<br/>We empowers our teams to create the most relevant content.
|
||||
</xpath>
|
||||
<xpath expr="//p[2]" position="replace">
|
||||
<p>We have one goal in mind, the user satisfaction.</p>
|
||||
<div class="s_hr p0 pb32" data-snippet="s_hr" data-name="Separator">
|
||||
<hr class="w-100 mx-auto" style="border-top-color: var(--o-color-3) !important;"/>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
|
||||
<attribute name="class" add="col-lg-4 offset-lg-1" remove="col-lg-5" separator=" "/>
|
||||
<attribute name="class" add="offset-lg-1" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
|
||||
<attribute name="class" add="col-lg-5" remove="col-lg-6" separator=" "/>
|
||||
<attribute name="class" add="col-lg-4" remove="col-lg-6" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="//a[hasclass('btn')]" position="attributes">
|
||||
<attribute name="class" add="btn-lg" remove="btn-primary" separator=" "/>
|
||||
@@ -76,10 +80,11 @@
|
||||
|
||||
<template id="configurator_s_text_image" inherit_id="website.configurator_s_text_image" name="Graphene s_text_image">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":["x","y"]}</attribute>
|
||||
<attribute name="class" add="pb96 pt0" remove="pb80 pt80" separator=" "/>
|
||||
<attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/05','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//section/div[hasclass('container')]" position="before">
|
||||
<div class="o_we_shape o_web_editor_Origins_02_001 o_second_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-3&c5=rgba%280%2C%200%2C%200%2C%200%29&flip=xy'); background-position: 50% 0%;"/>
|
||||
<xpath expr="//div[hasclass('container')]" position="before">
|
||||
<div class="o_we_shape o_web_editor_Origins_05"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
@@ -106,6 +111,29 @@
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- ======== MOCKUP IMAGE ======== -->
|
||||
<template id="s_mockup_image" inherit_id="website.s_mockup_image" name="Graphene s_mockup_image_text">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" add="pt96 pb96" remove="pt72 pb72" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
|
||||
<attribute name="class" add="col-lg-5" remove="col-lg-4" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('col-lg-8')]" position="attributes">
|
||||
<attribute name="class" add="offset-lg-1 col-lg-6" remove="col-lg-8" separator=" "/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="configurator_s_mockup_image" inherit_id="website.configurator_s_mockup_image" name="Graphene s_mockup_image">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/02_001','colors':{'c4':'o-color-3','c5':'o-color-4'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
|
||||
<xpath expr="//section/div" position="before">
|
||||
<div class="o_we_shape o_web_editor_Origins_02_001" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-3&c5=o-color-4');"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- ======== CAROUSEL ======== -->
|
||||
<template id="s_carousel" inherit_id="website.s_carousel" name="Graphene s_carousel">
|
||||
<xpath expr="//div[hasclass('s_carousel')]" position="attributes">
|
||||
@@ -233,16 +261,7 @@
|
||||
<!-- ======== COMPARISON ======== -->
|
||||
<template id="s_comparisons" inherit_id="website.s_comparisons" name="Graphene s_comparisons">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" add="pt24 o_cc o_cc4" remove="pt48" separator=" "/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="configurator_s_comparisons" inherit_id="website.configurator_s_comparisons" name="Graphene s_comparisons">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/06_001","flip":["x"]}</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//section/div[hasclass('container')]" position="before">
|
||||
<div class="o_we_shape o_web_editor_Origins_06_001" style="background-image: url('/web_editor/shape/web_editor/Origins/06_001.svg?c3=o-color-3&c4=o-color-4&flip=x'); background-position: 50% 50%;"/>
|
||||
<attribute name="class" add="o_cc o_cc2 pt64 pb64" remove="pt48 pb48" separator=" "/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
@@ -250,6 +269,7 @@
|
||||
<template id="s_numbers" inherit_id="website.s_numbers" name="Graphene s_numbers">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" add="oe_img_bg o_bg_img_center pb56 pt56 s_parallax_no_overflow_hidden parallax s_parallax_is_fixed o_cc3" remove="pb80 pt80 o_cc1" separator=" "/>
|
||||
<attribute name="data-scroll-background-ratio">1</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//section/div[hasclass('container')]" position="before">
|
||||
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
|
||||
@@ -257,14 +277,59 @@
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- ======== NUMBERS GRID ======== -->
|
||||
<template id="s_numbers_grid" inherit_id="website.s_numbers_grid" name="Graphene s_numbers_grid">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" add="o_cc5 pt96 pb96" remove="o_cc2 pb56 pt56" separator=" "/>
|
||||
<attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/01_001","flip":[]}</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//section/div[hasclass('container')]" position="before">
|
||||
<div class="o_we_shape o_web_editor_Rainy_01_001"/>
|
||||
</xpath>
|
||||
<xpath expr="(//div[hasclass('o_grid_item')])[1]" position="attributes">
|
||||
<attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="(//div[hasclass('o_grid_item')])[2]" position="attributes">
|
||||
<attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="(//div[hasclass('o_grid_item')])[3]" position="attributes">
|
||||
<attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="(//div[hasclass('o_grid_item')])[4]" position="attributes">
|
||||
<attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="(//div[hasclass('o_grid_item')])[5]" position="attributes">
|
||||
<attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="(//div[hasclass('o_grid_item')])[6]" position="attributes">
|
||||
<attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="(//div[hasclass('o_grid_item')])[7]" position="attributes">
|
||||
<attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
|
||||
</xpath>
|
||||
<xpath expr="(//div[hasclass('o_grid_item')])[8]" position="attributes">
|
||||
<attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="configurator_s_references" inherit_id="website.configurator_s_references" name="Graphene s_configurator_references">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" add="pt96 pb96" remove="pt80 pb80" separator=" "/>
|
||||
<attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/02_001','colors':{'c4':'o-color-3','c5':'o-color-4'},'flip':['x','y'],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//section/div" position="before">
|
||||
<div class="o_we_shape o_web_editor_Origins_02_001" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-3&c5=o-color-4&flip=xy'); background-position: 50% 0%;"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- ======== PICTURE ======== -->
|
||||
<template id="s_picture" inherit_id="website.s_picture" name="Graphene s_picture">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" add="pb0 pt48" remove="pb64 pt64" separator=" "/>
|
||||
<attribute name="data-oe-shape-data">{"shape":"web_editor/Zigs/01_001","flip":[]}</attribute>
|
||||
<attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/02_001","flip":[]}</attribute>
|
||||
</xpath>
|
||||
<xpath expr="//section/div[hasclass('o_container_small')]" position="before">
|
||||
<div class="o_we_shape o_web_editor_Zigs_01_001"/>
|
||||
<div class="o_we_shape o_web_editor_Rainy_02_001"/>
|
||||
</xpath>
|
||||
<!-- Content -->
|
||||
<xpath expr="//h2" position="replace" mode="inner">
|
||||
|
||||
@@ -432,6 +432,21 @@ Check in images.scss, primary_variables.scss, main.scss and theme_common's mixin
|
||||
<field name="url">/theme_graphene/static/src/img/pictures/content_08.jpg</field>
|
||||
</record>
|
||||
|
||||
<!-- Image Text Device -->
|
||||
<!-- This record is required to allow replacing the image with the web_editor -->
|
||||
<record id="s_image_text_device" model="theme.ir.attachment">
|
||||
<field name="key">website.s_image_text_device</field>
|
||||
<field name="name">website.s_image_text_device</field>
|
||||
<field name="url">/theme_graphene/static/src/img/pictures/s_image_text_device.jpg</field>
|
||||
</record>
|
||||
|
||||
<!-- Image Text Device Perspective -->
|
||||
<record id="s_image_text_device_perspective" model="theme.ir.attachment">
|
||||
<field name="key">website.s_image_text_device_perspective</field>
|
||||
<field name="name">website.s_image_text_device_perspective</field>
|
||||
<field name="url">/theme_graphene/static/src/img/pictures/s_image_text_device_perspective.jpg</field>
|
||||
</record>
|
||||
|
||||
<!-- Kickoff -->
|
||||
<record id="s_kickoff_default_image" model="theme.ir.attachment">
|
||||
<field name="key">website.s_kickoff_default_image</field>
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
|
||||
<template id="new_page_template_landing_0_s_cover" inherit_id="website.new_page_template_landing_0_s_cover">
|
||||
<xpath expr="//section" position="attributes">
|
||||
<attribute name="class" remove="pt160 pb240" separator=" "/>
|
||||
<attribute name="class" remove="pt160 pb192" separator=" "/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user