MM-35847: fixes email templates (#18634)
Some email clients don't support style tags which results in CTA buttons not being visible, and other styling being "broken". This commit tries to fix that issue by both including style tags and inlining the same CSS.
Этот коммит содержится в:
@@ -58,6 +58,12 @@
|
||||
.mj-outlook-group-fix { width:100% !important; }
|
||||
</style>
|
||||
<![endif]-->
|
||||
<!--[if !mso]><!-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
|
||||
</style>
|
||||
<!--<![endif]-->
|
||||
<style type="text/css">
|
||||
@media only screen and (min-width:480px) {
|
||||
.mj-column-per-100 {
|
||||
@@ -317,7 +323,7 @@
|
||||
</head>
|
||||
|
||||
<body style="word-spacing:normal;">
|
||||
<div class="emailBody" style="">
|
||||
<div class="emailBody" style="background: #F3F3F3;">
|
||||
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
||||
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:0;max-width:600px;">
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:0;">
|
||||
@@ -340,7 +346,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:132px;">
|
||||
<img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
|
||||
<img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -368,7 +374,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="left" class="title" style="font-size:0px;padding:10px 0px;word-break:break-word;">
|
||||
<div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.Title}}</div>
|
||||
<div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -381,7 +387,7 @@
|
||||
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
|
||||
<tr>
|
||||
<td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
|
||||
<a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Arial;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
|
||||
<a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Arial; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
|
||||
{{.Props.Button}}
|
||||
</a>
|
||||
</td>
|
||||
@@ -414,7 +420,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:320px;">
|
||||
<img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/add_payment_method.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
|
||||
<img alt height="auto" src="{{.Props.SiteURL}}/static/images/add_payment_method.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -442,13 +448,13 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="left" class="footerTitle" style="font-size:0px;padding:24px 0px 0px 0px;word-break:break-word;">
|
||||
<div style="font-family:Arial;font-size:13px;line-height:1;text-align:left;color:#000000;">{{.Props.QuestionTitle}}</div>
|
||||
<div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.QuestionTitle}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" style="font-size:0px;padding:0px 0px ;word-break:break-word;">
|
||||
<div style="font-family:Arial;font-size:14px;line-height:20px;text-align:left;color:#3D3C40;">{{.Props.QuestionInfo}}
|
||||
<a href='mailto:{{.Props.SupportEmail}}'> feedback-cloud@mattermost.com </a>
|
||||
<a href="mailto:{{.Props.SupportEmail}}" style="text-decoration: none; color: #1C58D9;"> feedback-cloud@mattermost.com </a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -473,7 +479,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
|
||||
<div style="font-family:Arial;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
|
||||
<div style="font-family: Arial; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
|
||||
{{.Props.FooterV2}}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
Ссылка в новой задаче
Block a user