CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Fix Outlook >= 2010 trimming header image (#2277)

Browse Source 
* fix image cutoff with mso-line-height: at-least
* align text to the left; fully centered text is hard to read
* remove mso cellpadding-tables as they double up the spacing
* additionally add background-color to a table with width=100% for broader support (e.g. Yahoo and AOL)
This commit is contained in:
Richard Schreiber
2021-11-02 12:59:09 +01:00
committed by GitHub
parent 9d0fa84277
commit ea6067ab3f
1 changed files with 14 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/pretix/base/templates/pretixbase/email/simple_logo.html
View File

@@ -14,16 +14,17 @@
</o:OfficeDocumentSettings> </o:OfficeDocumentSettings>
</xml><![endif]--> </xml><![endif]-->
<style type="text/css"> <style type="text/css">
body { body, .container {
background-color: #eee; background-color: #eee;
background-position: top;
background-repeat: repeat-x;
font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
color: #333; color: #333;
margin: 0; margin: 0;
padding-top: 20px; padding: 0;
}
.container {
padding: 20px;
} }
table.layout > tr > td, table.layout > tr > td,
@@ -36,7 +37,8 @@
table.layout > tr > td.logo, table.layout > tr > td.logo,
table.layout > tbody > tr > td.logo, table.layout > tbody > tr > td.logo,
table.layout > thead > tr > td.logo { table.layout > thead > tr > td.logo {
padding: 20px 0 0 0; padding: {% if event.settings.logo_image_large %}0 0 0 0{% else %}20px 0 0 0{% endif %};
mso-line-height-rule: at-least;
} }
table.layout > tr > td.header, table.layout > tr > td.header,
@@ -112,10 +114,6 @@
font-size: 12px; font-size: 12px;
} }
.content {
padding: 0 18px;
}
::selection { ::selection {
background: {{ color }}; background: {{ color }};
color: #FFF; color: #FFF;
@@ -149,7 +147,7 @@
table.layout > tr > td.containertd, table.layout > tr > td.containertd,
table.layout > tbody > tr > td.containertd, table.layout > tbody > tr > td.containertd,
table.layout > thead > tr > td.containertd { table.layout > thead > tr > td.containertd {
padding: 15px 0; padding: 20px;
} }
a.button { a.button {
@@ -167,7 +165,8 @@
} }
.order-button { .order-button {
padding-top: 5px padding-top: 5px;
text-align: center;
} }
.order-button a.button { .order-button a.button {
font-size: 12px; font-size: 12px;
@@ -214,14 +213,14 @@
<![endif]--> <![endif]-->
</head> </head>
<body align="center"> <body align="center">
<table width="100%"><tr><td align="center" class="container">
<!--[if gte mso 9]> <!--[if gte mso 9]>
<table width="100%"><tr><td align="center"> <table width="600"><tr><td align="center">
<table width="600"><tr><td align="center"
<![endif]--> <![endif]-->
<table class="layout" style="max-width:600px" border="0" cellspacing="0"> <table class="layout" style="max-width:600px" border="0" cellspacing="0">
{% if event.settings.logo_image %} {% if event.settings.logo_image %}
<tr> <tr>
<td style="line-height: 0; {% if event.settings.logo_image_large %}padding: 0;{% endif %}" align="center" class="logo"> <td align="center" class="logo">
{% if event.settings.logo_image_large %} {% if event.settings.logo_image_large %}
<img src="{% if event.settings.logo_image|thumb:'600_x5000'|first == '/' %}{{ site_url }}{% endif %}{{ event.settings.logo_image|thumb:'600_x5000' }}" alt="{{ event.name }}" style="width:100%" /> <img src="{% if event.settings.logo_image|thumb:'600_x5000'|first == '/' %}{{ site_url }}{% endif %}{{ event.settings.logo_image|thumb:'600_x5000' }}" alt="{{ event.name }}" style="width:100%" />
{% else %} {% else %}
@@ -232,9 +231,6 @@
{% endif %} {% endif %}
<tr> <tr>
<td class="header" align="center"> <td class="header" align="center">
<!--[if gte mso 9]>
<table cellpadding="20"><tr><td align="center">
<![endif]-->
{% if event %} {% if event %}
<h2><a href="{% abseventurl event "presale:event.index" %}" target="_blank">{{ event.name }}</a> <h2><a href="{% abseventurl event "presale:event.index" %}" target="_blank">{{ event.name }}</a>
</h2> </h2>
@@ -247,51 +243,30 @@
{% block header %} {% block header %}
<h1>{{ subject }}</h1> <h1>{{ subject }}</h1>
{% endblock %} {% endblock %}
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="containertd"> <td class="containertd">
<!--[if gte mso 9]>
<table cellpadding="20"><tr><td>
<![endif]-->
<div class="content"> <div class="content">
{{ body|safe }} {{ body|safe }}
</div> </div>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
</td> </td>
</tr> </tr>
{% if order %} {% if order %}
<tr> <tr>
<td class="order containertd"> <td class="order containertd">
<!--[if gte mso 9]>
<table cellpadding="20"><tr><td>
<![endif]-->
<div class="content"> <div class="content">
{% include "pretixbase/email/order_details.html" %} {% include "pretixbase/email/order_details.html" %}
</div> </div>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
</td> </td>
</tr> </tr>
{% endif %} {% endif %}
{% if signature %} {% if signature %}
<tr> <tr>
<td class="order containertd"> <td class="order containertd">
<!--[if gte mso 9]>
<table cellpadding="20"><tr><td>
<![endif]-->
<div class="content"> <div class="content">
{{ signature | safe }} {{ signature | safe }}
</div> </div>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
</td> </td>
</tr> </tr>
{% endif %} {% endif %}
@@ -303,7 +278,7 @@
<br/> <br/>
<!--[if gte mso 9]> <!--[if gte mso 9]>
</td></tr></table> </td></tr></table>
</td></tr></table>
<![endif]--> <![endif]-->
</td></tr></table>
</body> </body>
</html> </html>