Implement CSS to inline styles

Refit system layout
This commit is contained in:
Samuel Georges 2017-07-22 21:49:48 +10:00
parent 0a06582ce7
commit b2b82588f2
3 changed files with 49 additions and 14 deletions

View File

@ -11,6 +11,7 @@ use System\Classes\PluginManager;
use System\Classes\MarkupManager;
use System\Twig\MailPartialTokenParser;
use System\Twig\MailComponentTokenParser;
use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;
/**
* This class manages Mail sending functions
@ -147,14 +148,20 @@ class MailManager
$html = $this->render($template->content_html, $data);
$css = MailBrandSetting::renderCss();
if ($template->layout) {
$html = $this->renderTwig($template->layout->content_html, [
'content' => $html,
'css' => $template->layout->content_css,
'brandCss' => MailBrandSetting::renderCss()
'brandCss' => $css
] + (array) $data);
$css += PHP_EOL . $template->layout->content_css;
}
$html = (new CssToInlineStyles)->convert($html, $css);
return $html;
}

View File

@ -43,7 +43,7 @@ name = "Default layout"
<!-- Footer -->
{% component 'footer' %}
&copy; 2017 {{ appName }}. All rights reserved.
&copy; {{ "now"|date("Y") }} {{ appName }}. All rights reserved.
{% endcomponent %}
</table>

View File

@ -6,16 +6,44 @@ name = "System layout"
---
This is an automatic message. Please do not reply to it.
==
<html>
<head>
<style type="text/css" media="screen">
{{ brandCss|raw }}
{{ css|raw }}
</style>
</head>
<body>
{{ content|raw }}
<hr />
<p>This is an automatic message. Please do not reply to it.</p>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<style type="text/css" media="screen">
{{ brandCss|raw }}
{{ css|raw }}
</style>
<table class="wrapper" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="content" width="100%" cellpadding="0" cellspacing="0">
<!-- Email Body -->
<tr>
<td class="body" width="100%" cellpadding="0" cellspacing="0">
<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0">
<!-- Body content -->
<tr>
<td class="content-cell">
{{ content|raw }}
<!-- Subcopy -->
{% component 'subcopy' %}
**This is an automatic message. Please do not reply to it.**
{% endcomponent %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>