574 lines
19 KiB
XML
574 lines
19 KiB
XML
<?xml version="1.0"?>
|
|
<odoo>
|
|
<!--Notable pitfalls-->
|
|
<!--Unpatched wkhtmltoimage uses an old version of webkit, meaning things like standard flexbox
|
|
are not supported and -webkit flags should be used.-->
|
|
<!--Your local fonts may diverge from production fonts, make sure the designs work as intended
|
|
in their final production environment.-->
|
|
<template id="common_template">
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<style>
|
|
body {
|
|
@charset "UTF-8";
|
|
padding: 35px;
|
|
font-family: Roboto, Ubuntu, "Noto Sans", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
font-size: 1em;
|
|
background: <t t-out="card_campaign.card_template_id.primary_color"/>;
|
|
color: <t t-out="card_campaign.card_template_id.primary_text_color"/>;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
flex-direction: column;
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-around;
|
|
}
|
|
.button_background {
|
|
background: <t t-out="card_campaign.card_template_id.secondary_color"/>;
|
|
color: <t t-out="card_campaign.card_template_id.secondary_text_color"/>;
|
|
}
|
|
.header {
|
|
line-height: 1.2em;
|
|
}
|
|
.header, .subheader, .cta_button h1 {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.header, .subheader, .cta_button h1, .cta_button h2 {
|
|
margin: 0.1em;
|
|
}
|
|
.subheader, .cta_button h1{
|
|
line-height: 1.2em;
|
|
}
|
|
.cta_button {
|
|
text-align: center;
|
|
width: fit-content;
|
|
min-width: 30%;
|
|
max-width: 70%;
|
|
padding: 0.2rem 0.2rem;
|
|
}
|
|
.rounded_button {
|
|
border-radius: 50px;
|
|
}
|
|
.rounded_rectangle_button {
|
|
border-radius: 8px;
|
|
}
|
|
.footer {
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
flex-direction: row;
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.footer > div {
|
|
height: 100%;
|
|
}
|
|
.profile_section {
|
|
margin-right: 0.25rem;
|
|
font-size: 1.25rem;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
flex-direction: row;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
.text_section {
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
flex-direction: column;
|
|
-webkit-box-align: start;
|
|
align-items: flex-start;
|
|
align-content: flex-start;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.profile_section .text_section .text_subsections {
|
|
font-size: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<t t-set="values" t-value="card_campaign._get_card_element_values(object)"/>
|
|
<body t-attf-style="background-image: url('data:image/png;base64,{{card_campaign.content_background or card_campaign.card_template_id.default_background}}');">
|
|
</body>
|
|
</html>
|
|
</template>
|
|
|
|
<template id="template_1" inherit_id="common_template" primary="True">
|
|
<xpath expr="//html/head/style" position="after">
|
|
<style>
|
|
body {
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
.center_column {
|
|
text-align: center;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-around;
|
|
line-height: 2rem;
|
|
height: 60%;
|
|
width: 100%;
|
|
}
|
|
.center_column .cta_button {
|
|
min-width: 50%;
|
|
max-width: 70%;
|
|
}
|
|
.footer {
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
height: 30%;
|
|
}
|
|
.profile_section img {
|
|
object-fit: cover;
|
|
border-radius: 50px;
|
|
}
|
|
.profile_section .text_section span {
|
|
display: block;
|
|
}
|
|
.logo {
|
|
max-height: 40px;
|
|
width: auto;
|
|
}
|
|
</style>
|
|
</xpath>
|
|
<xpath expr="//html/body" position="inside">
|
|
<div class="center_column">
|
|
<div class="title">
|
|
<h1 class="header" t-out="values['header']" t-att-style="'color: %s;' % card_campaign.content_header_color"></h1>
|
|
<h2 class="subheader" t-out="values['sub_header']" t-att-style="'color: %s;' % card_campaign.content_sub_header_color"></h2>
|
|
</div>
|
|
<div class="button_background rounded_button cta_button" t-if="card_campaign.content_button">
|
|
<h1 t-out="card_campaign.content_button">Button</h1>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="profile_section">
|
|
<img
|
|
t-attf-src="data:image/png;base64,{{values['image1']}}"
|
|
alt="Profile Picture"
|
|
width="64px"
|
|
height="64px"
|
|
style="margin-right: 10px"
|
|
t-if="values['image1']"
|
|
/>
|
|
<div t-else=""></div>
|
|
<div class="text_section">
|
|
<span t-out="values['section']"/>
|
|
<div class="text_subsections">
|
|
<span t-out="values['sub_section1']"/>
|
|
<span t-out="values['sub_section2']"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
t-attf-src="data:image/png;base64,{{values['image2']}}"
|
|
alt="Profile Picture"
|
|
height="auto"
|
|
class="logo"
|
|
t-if="values['image2']"
|
|
/>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="template_2" inherit_id="common_template" primary="True">
|
|
<xpath expr="//html/head/style" position="after">
|
|
<style>
|
|
body {
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.title {
|
|
line-height: 2rem;
|
|
width: 100%;
|
|
}
|
|
.footer {
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
height: 30%;
|
|
}
|
|
.cta_button {
|
|
text-align: center;
|
|
width: fit-content;
|
|
max-height: 3rem;
|
|
}
|
|
.profile_section img {
|
|
object-fit: cover;
|
|
border-radius: 50px;
|
|
}
|
|
.profile_section .text_section {
|
|
margin-left: 0.25rem;
|
|
}
|
|
.profile_section .text_section span {
|
|
display: block;
|
|
}
|
|
.logo_line {
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
flex-direction: row;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
-webkit-box-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
.logo {
|
|
margin: 0.1rem;
|
|
align-self: flex-end;
|
|
max-height: 40px;
|
|
width: auto;
|
|
}
|
|
</style>
|
|
</xpath>
|
|
<xpath expr="//html/body" position="inside">
|
|
<div class="logo_line">
|
|
<img
|
|
t-attf-src="data:image/png;base64,{{values['image2']}}"
|
|
alt="Profile Picture"
|
|
class="logo"
|
|
t-if="values['image2']"
|
|
/>
|
|
</div>
|
|
<div class="title">
|
|
<h1 class="header" t-out="values['header']" t-att-style="'color: %s;' % card_campaign.content_header_color"/>
|
|
<h2 class="subheader" t-out="values['sub_header']" t-att-style="'color: %s;' % card_campaign.content_sub_header_color"/>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="profile_section">
|
|
<img
|
|
t-attf-src="data:image/png;base64,{{values['image1']}}"
|
|
alt="Profile Picture"
|
|
width="64px"
|
|
height="64px"
|
|
t-if="values['image1']"
|
|
/>
|
|
<div t-else=""></div>
|
|
<div class="text_section">
|
|
<span t-out="values['section']"/>
|
|
<div class="text_subsections">
|
|
<span t-out="values['sub_section1']"/>
|
|
<span t-out="values['sub_section2']"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="button_background rounded_button cta_button" t-if="card_campaign.content_button">
|
|
<h1 t-out="card_campaign.content_button">button text</h1>
|
|
</div>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="template_3" inherit_id="common_template" primary="True">
|
|
<xpath expr="//html/head/style" position="after">
|
|
<style>
|
|
body {
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.title {
|
|
line-height: 2rem;
|
|
width: 80%;
|
|
}
|
|
.footer {
|
|
-webkit-box-align: end;
|
|
align-items: flex-end;
|
|
height: 50%;
|
|
}
|
|
.footer > div {
|
|
min-width: 50%;
|
|
}
|
|
.cta_button {
|
|
margin-top: 20px;
|
|
}
|
|
.profile_image {
|
|
object-fit: cover;
|
|
border-radius: 50px;
|
|
}
|
|
.cta_section {
|
|
max-width: 75%;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.cta_section .text_section {
|
|
width: 100%;
|
|
font-size: 1.25rem;
|
|
}
|
|
.cta_section .text_subsections {
|
|
font-size: 0.85rem;
|
|
}
|
|
.logo {
|
|
position: absolute;
|
|
right: 35px;
|
|
top: 35px;
|
|
max-height: 40px;
|
|
width: auto;
|
|
}
|
|
</style>
|
|
</xpath>
|
|
<xpath expr="//html/body" position="inside">
|
|
<img
|
|
t-attf-src="data:image/png;base64,{{values['image2']}}"
|
|
alt="Profile Picture"
|
|
class="logo"
|
|
t-if="values['image2']"
|
|
/>
|
|
<div class="title">
|
|
<h2 class="subheader" t-out="values['sub_header']" t-att-style="'color: %s;' % card_campaign.content_sub_header_color"></h2>
|
|
<h1 class="header" t-out="values['header']" t-att-style="'color: %s;' % card_campaign.content_header_color"></h1>
|
|
</div>
|
|
<div class="footer">
|
|
<div>
|
|
<div class="text_section">
|
|
<span t-out="values['section']"/>
|
|
<div class="text_subsections">
|
|
<span t-out="values['sub_section1']"/>
|
|
<t t-if="values['sub_section1'] and values['sub_section2']">-</t>
|
|
<span t-out="values['sub_section2']"/>
|
|
</div>
|
|
</div>
|
|
<div class="button_background rounded_rectangle_button cta_button" t-if="card_campaign.content_button">
|
|
<h2 t-out="card_campaign.content_button">button text</h2>
|
|
</div>
|
|
</div>
|
|
<img
|
|
class="profile_image"
|
|
t-attf-src="data:image/png;base64,{{values['image1']}}"
|
|
alt="Profile Picture"
|
|
width="106px"
|
|
height="106px"
|
|
t-if="values['image1']"
|
|
/>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
|
|
|
|
<template id="template_4" inherit_id="common_template" primary="True">
|
|
<xpath expr="//html/head/style" position="after">
|
|
<style>
|
|
body {
|
|
justify-content: space-between;
|
|
}
|
|
.header {
|
|
-webkit-line-clamp: 3;
|
|
max-height: 4.5em;
|
|
line-height: 1.2em;
|
|
}
|
|
.title {
|
|
line-height: 2rem;
|
|
width: 80%;
|
|
}
|
|
.footer {
|
|
height: 50%;
|
|
}
|
|
.cta_button {
|
|
text-align: center;
|
|
max-height: 3rem;
|
|
}
|
|
.profile_image {
|
|
object-fit: cover;
|
|
border-radius: 50px;
|
|
}
|
|
.cta_section {
|
|
max-width: 75%;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
.text_section {
|
|
width: 55%;
|
|
font-size: 1.25rem;
|
|
}
|
|
.text_subsections {
|
|
font-size: 0.85rem;
|
|
}
|
|
.text_subsections span {
|
|
text-wrap: nowrap;
|
|
white-space: nowrap;
|
|
}
|
|
.cta_button {
|
|
width: fit-content;
|
|
margin-top: 30px;
|
|
}
|
|
.logo_line {
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
flex-direction: row;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
-webkit-box-pack: start;
|
|
justify-content: flex-start;
|
|
}
|
|
.logo {
|
|
max-height: 40px;
|
|
width: auto;
|
|
}
|
|
.profile_image {
|
|
background-size: cover;
|
|
position: absolute;
|
|
right: 35px;
|
|
top: 35px;
|
|
}
|
|
</style>
|
|
</xpath>
|
|
<xpath expr="//html/body" position="inside">
|
|
<div class="logo_line">
|
|
<img
|
|
t-attf-src="data:image/png;base64,{{values['image2']}}"
|
|
alt="Profile Picture"
|
|
class="logo"
|
|
t-if="values['image2']"
|
|
/>
|
|
</div>
|
|
<img
|
|
class="profile_image"
|
|
t-attf-src="data:image/png;base64,{{values['image1']}}"
|
|
alt="Profile Picture"
|
|
width="106px"
|
|
height="106px"
|
|
t-if="values['image1']"
|
|
/>
|
|
<div class="title">
|
|
<h2 class="subheader" t-out="values['sub_header']" t-att-style="'color: %s;' % card_campaign.content_sub_header_color"></h2>
|
|
<h1 class="header" t-out="values['header']" t-att-style="'color: %s;' % card_campaign.content_header_color"></h1>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="text_section">
|
|
<span t-out="values['section']"/>
|
|
<div class="text_subsections">
|
|
<span t-out="values['sub_section1']"/>
|
|
<t t-if="values['sub_section1'] and values['sub_section2']">-</t>
|
|
<span t-out="values['sub_section2']"/>
|
|
</div>
|
|
</div>
|
|
<div class="button_background rounded_button cta_button" t-if="card_campaign.content_button">
|
|
<h1 t-out="card_campaign.content_button">button text</h1>
|
|
</div>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
|
|
<template id="template_5" inherit_id="common_template" primary="True">
|
|
<xpath expr="//html/head/style" position="after">
|
|
<style>
|
|
body {
|
|
height: 100%;
|
|
}
|
|
.footer {
|
|
margin-top: 5%;
|
|
height: 40%;
|
|
}
|
|
.cta_button {
|
|
text-align: center;
|
|
}
|
|
.profile_image {
|
|
object-fit: cover;
|
|
border-radius: 50px;
|
|
}
|
|
.cta_section {
|
|
max-width: 75%;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
.text_section {
|
|
font-size: 1.25rem;
|
|
}
|
|
.text_subsections {
|
|
height: 100%;
|
|
width: 100%;
|
|
font-size: 0.85rem;
|
|
}
|
|
.cta_button {
|
|
width: fit-content;
|
|
min-width: 30%;
|
|
max-width: 50%;
|
|
}
|
|
.logo_line {
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
flex-direction: row;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
-webkit-box-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.logo {
|
|
max-height: 40px;
|
|
width: auto;
|
|
}
|
|
</style>
|
|
</xpath>
|
|
<xpath expr="//html/body" position="inside">
|
|
<div class="logo_line">
|
|
<img
|
|
class="profile_image"
|
|
t-attf-src="data:image/png;base64,{{values['image1']}}"
|
|
alt="Profile Picture"
|
|
width="60px"
|
|
height="60px"
|
|
t-if="values['image1']"
|
|
/>
|
|
<!--spacing filler in case there is no image-->
|
|
<div t-if="not values['image1']"></div>
|
|
<div class="button_background rounded_button cta_button" t-if="card_campaign.content_button">
|
|
<h1 t-out="card_campaign.content_button">button text</h1>
|
|
</div>
|
|
</div>
|
|
<div class="title">
|
|
<h2 class="subheader" t-out="values['sub_header']" t-att-style="'color: %s;' % card_campaign.content_sub_header_color"></h2>
|
|
<h1 class="header" t-out="values['header']" t-att-style="'color: %s;' % card_campaign.content_header_color"></h1>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="text_section">
|
|
<span t-out="values['section']"/>
|
|
<div class="text_subsections">
|
|
<span t-out="values['sub_section1']"/>
|
|
<t t-if="values['sub_section1'] and values['sub_section2']">-</t>
|
|
<span t-out="values['sub_section2']"/>
|
|
</div>
|
|
</div>
|
|
<img
|
|
t-attf-src="data:image/png;base64,{{values['image2']}}"
|
|
alt="Profile Picture"
|
|
class="logo"
|
|
t-if="values['image2']"
|
|
/>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
</odoo>
|