OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed paywall button border radius (#20582)

Browse Source 
Fixes
https://linear.app/tryghost/issue/DES-544/upgrade-email-paywall-button-doesnt-match-normal-buttons-in-newsletter

In emails, the button for the paywall wasn't getting the border-radius,
as [Gmail strips out font styling applied to the `td` element in the
HTML](https://stackoverflow.com/a/38041282). Those styles are now moved
out of that element, and look to apply correctly.
This commit is contained in:
Daniël van der Winden 2024-07-10 14:45:49 +02:00 committed by GitHub
parent f8966e26c8
commit 22824b9685
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap
View File

@ -1885,7 +1885,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
</tr>
</table>
<div class=\\"kg-bookmark-spacer--outlook\\" style=\\"height: 1.5em;\\">&nbsp;</div>
<![endif]--></div><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">Hey </span><span>Vinz</span><span style=\\"white-space: pre-wrap;\\">,</span></p><!--members-only--><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"></p><div class=\\"btn btn-accent\\" style=\\"box-sizing: border-box; width: 100%; display: table;\\"><table border=\\"0\\" cellspacing=\\"0\\" cellpadding=\\"0\\" align=\\"center\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;\\" width=\\"auto\\"><tr><td align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A; border-radius: 5px; text-align: center; background-color: #FF1A75;\\" valign=\\"top\\" bgcolor=\\"#FF1A75\\"><a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" style=\\"overflow-wrap: anywhere; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; background-color: #FF1A75; border-color: #FF1A75; color: #FFFFFF;\\" target=\\"_blank\\">Click me, I&#39;m a button!</a></td></tr></table></div><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"></p><div class=\\"kg-card kg-callout-card kg-callout-card-blue\\" style=\\"display: flex; margin: 0 0 1.5em 0; padding: 20px 28px; border-radius: 3px; background: #E9F6FB;\\"><div class=\\"kg-callout-emoji\\" style=\\"padding-right: 12px; font-size: 20px;\\">&#x1F4A1;</div><div class=\\"kg-callout-text\\">I had an idea...</div></div><div style=\\"background: transparent;
<![endif]--></div><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">Hey </span><span>Vinz</span><span style=\\"white-space: pre-wrap;\\">,</span></p><!--members-only--><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"></p><div class=\\"btn btn-accent\\" style=\\"box-sizing: border-box; width: 100%; display: table;\\"><table border=\\"0\\" cellspacing=\\"0\\" cellpadding=\\"0\\" align=\\"center\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;\\" width=\\"auto\\"><tr><td align=\\"center\\" style=\\"font-size: 18px; vertical-align: top; color: #15212A; border-radius: 5px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; background-color: #FF1A75;\\" valign=\\"top\\" bgcolor=\\"#FF1A75\\"><a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" style=\\"overflow-wrap: anywhere; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; background-color: #FF1A75; border-color: #FF1A75; color: #FFFFFF;\\" target=\\"_blank\\">Click me, I&#39;m a button!</a></td></tr></table></div><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"></p><div class=\\"kg-card kg-callout-card kg-callout-card-blue\\" style=\\"display: flex; margin: 0 0 1.5em 0; padding: 20px 28px; border-radius: 3px; background: #E9F6FB;\\"><div class=\\"kg-callout-emoji\\" style=\\"padding-right: 12px; font-size: 20px;\\">&#x1F4A1;</div><div class=\\"kg-callout-text\\">I had an idea...</div></div><div style=\\"background: transparent;
border: 1px solid rgba(124, 139, 154, 0.25); border-radius: 4px; padding: 20px; margin-bottom: 1.5em;\\">
<h4 style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; text-rendering: optimizeLegibility; margin: 1.8em 0 0.5em 0; line-height: 1.2em; font-size: 1.375rem; font-weight: 600; margin-bottom: 8px; margin-top: 0px;\\"><span style=\\"white-space: pre-wrap;\\">Spoiler alert!</span></h4>
<div style=\\"font-size: 1rem; line-height: 1.5; margin-bottom: -1.5em;\\"><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">Just kidding</span></p></div>

14
ghost/email-service/lib/email-templates/partials/paywall.hbs
View File

@ -3,21 +3,15 @@
style="position: relative; display: block; width: 100%; margin: 3em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #e5eff5;">
<h2
style="margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 26px;">
Upgrade to <span style="white-space: nowrap; font-size: 26px !important;">continue reading.</span></h2>
Upgrade to <span style="white-space: nowrap; font-size: 26px!important;">continue reading.</span></h2>
<p style="margin: 0 auto 1.5em auto; line-height: 1.6em; max-width: 440px;">Become a paid member of {{site.title}} to get access to all
<span style="white-space: nowrap;">premium content.</span></p>
<div class="btn btn-accent" style="box-sizing: border-box; width: 100%; display: table;">
<table border="0" cellspacing="0" cellpadding="0" align="center"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<tr>
<td align="center"
style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; vertical-align: top; text-align: center; border-radius: 5px;"
valign="top" bgcolor="{{accentColor}}">
<a href="{{paywall.signupUrl}}"
style="overflow-wrap: anywhere; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; background-color: {{accentColor}}; border-color: {{accentColor}}; color: #FFFFFF;"
target="_blank">Upgrade
</a>
<td align="center" valign="top" bgcolor="{{accentColor}}" style="vertical-align: top; text-align: center; border-radius: 5px;">
<a href="{{paywall.signupUrl}}" style="overflow-wrap: anywhere; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; background-color: {{accentColor}}; border-color: {{accentColor}}; color: #FFFFFF;" target="_blank">Upgrade</a>
</td>
</tr>
</tbody>

1
ghost/email-service/lib/email-templates/partials/styles.hbs
View File

@ -1216,6 +1216,7 @@ a[data-flickr-embed] img {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.btn a {