Updated latest posts UI in email template

Refs https://github.com/TryGhost/Team/issues/2801
This commit is contained in:
Sanne de Vries 2023-03-22 15:16:55 +01:00
parent b7361e2f1f
commit 47e343ec18
5 changed files with 513 additions and 43 deletions

View File

@ -268,6 +268,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -654,7 +680,7 @@ exports[`Email Preview API Read can read post email preview with email card and
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "20881",
"content-length": "21371",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -836,6 +862,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -1242,7 +1294,7 @@ exports[`Email Preview API Read can read post email preview with fields 4: [head
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "25704",
"content-length": "26194",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1455,6 +1507,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -1848,7 +1926,7 @@ exports[`Email Preview API Read has custom content transformations for email com
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "20647",
"content-length": "21137",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -2390,6 +2468,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -2793,7 +2897,7 @@ exports[`Email Preview API Read uses the newsletter provided through ?newsletter
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "21139",
"content-length": "21629",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -3361,6 +3465,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -3764,7 +3894,7 @@ exports[`Email Preview API Read uses the posts newsletter by default 4: [headers
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "21139",
"content-length": "21629",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,

View File

@ -161,6 +161,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -709,6 +735,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -1243,6 +1295,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -1777,6 +1855,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -2311,6 +2415,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -2803,6 +2933,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -4411,6 +4567,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -5045,6 +5227,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -6164,6 +6372,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -6755,6 +6989,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -7291,6 +7551,32 @@ table.body .footer a {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}

View File

@ -1,30 +1,40 @@
<h3>Latest</h3>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="latest-posts-table">
{{#each latestPosts}}
{{#each latestPosts}}
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
{{#if ../latestPostsHasImages}}
<td width="140"> {{!-- maximum width of image + 20px padding --}}
{{#if featureImage}}
<a href="{{url}}">
<img
src="{{featureImage}}"
{{#if featureImageWidth }}
width="{{featureImageWidth}}"
<td class="latest-post">
<a href="{{url}}">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
{{#if ../latestPostsHasImages}}
{{#if featureImage}}
<td width="140" class="latest-post-img"> {{!-- maximum width of image + 20px padding --}}
<img
src="{{featureImage}}"
{{#if featureImageWidth }}
width="{{featureImageWidth}}"
{{/if}}
{{#if featureImageHeight }}
height="{{featureImageHeight}}"
{{/if}}
/>
</td>
<td width="100%" class="latest-post-img-mobile">
<img
src="{{featureImage}}"
width="100%"
height="240"
/>
</td>
{{/if}}
{{#if featureImageHeight }}
height="{{featureImageHeight}}"
{{/if}}
/>
</a>
{{/if}}
</td>
{{/if}}
<td>
<h4>
<a href="{{url}}">{{title}}</a>
</h4>
<p><a href="{{url}}">{{publishedAt}}</a></p>
{{/if}}
<td valign="top" align="left" class="latest-post-title">
<h4>{{title}}</h4>
<p>{{publishedAt}}</p>
</td>
</tr>
</table>
</a>
</td>
</tr>
{{/each}}
</table>
</table>
{{/each}}

View File

@ -1112,6 +1112,32 @@ a[data-flickr-embed] img {
font-size: 13px !important;
}
table.body .latest-post a {
height: auto !important;
}
table.body .latest-post-img {
display: none !important;
}
table.body .latest-post-img-mobile {
display: inline-block !important;
}
table.body .latest-post-title {
display: inline-block !important;
width: 100%;
}
table.body .latest-post h4 {
padding: 4px 0 0;
font-size: 18px !important;
}
table.body .latest-post p {
font-size: 13px !important;
}
table.body .subscription-box {
padding: 24px 20px !important;
}
@ -1273,23 +1299,41 @@ a[data-flickr-embed] img {
/* -------------------------------------
LATEST POSTS TABLE
------------------------------------- */
.latest-posts-table p {
.latest-post {
padding: 8px 0;
}
.latest-post-img img,
.latest-post-img-mobile img {
object-fit: cover;
}
.latest-post-img-mobile {
display: none;
}
.latest-post p {
margin: 0;
padding: 0;
color: #738a94;
font-size: 14px;
font-weight: 400;
}
.latest-posts-table td {
padding: 10px 0;
vertical-align: center;
}
.latest-posts-table h4 {
.latest-post h4 {
margin: 0;
padding: 0;
padding: 12px 0 4px;
font-size: 19px;
font-weight: 700;
}
.latest-posts-table a {
.latest-post a {
display: block;
height: 96px;
overflow: hidden;
color: inherit;
text-decoration: none;
}
</style>

View File

@ -121,7 +121,7 @@
{{/if}}
{{/if}}
<tr class="post-content-row">
<td class="{{classes.body}}{{#if (and (not (or feedbackButtons newsletter.showCommentCta)) newsletter.showSubscriptionDetails)}} no-border{{/if}}">
<td class="{{classes.body}}{{#if (and (not (or feedbackButtons newsletter.showCommentCta latestPosts.length)) newsletter.showSubscriptionDetails)}} no-border{{/if}}">
<!-- POST CONTENT START -->
{{{html}}}
<!-- POST CONTENT END -->
@ -139,7 +139,7 @@
{{#if (or feedbackButtons newsletter.showCommentCta) }}
<tr>
<td dir="ltr" width="100%" style="background-color: #ffffff; text-align: center; padding: 32px 0 24px;{{#unless newsletter.showSubscriptionDetails}} border-bottom: 1px solid #e5eff5;{{/unless}}" align="center">
<td dir="ltr" width="100%" style="background-color: #ffffff; text-align: center; padding: 32px 0 24px;{{#unless (and (not latestPosts.length) newsletter.showSubscriptionDetails)}} border-bottom: 1px solid #e5eff5;{{/unless}}" align="center">
<table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
{{#if feedbackButtons }}
@ -168,7 +168,7 @@
{{#if latestPosts.length}}
<tr>
<td>
<td style="padding: 24px 0;{{#unless newsletter.showSubscriptionDetails}} border-bottom: 1px solid #e5eff5;{{/unless}}">
{{> latestPosts}}
</td>
</tr>