Added subhead to newsletter template (#20276)
REF MOM-146 - Added subhead to email template behind a flag and and wired it up to the subhead newsletter setting.
This commit is contained in:
Sanne de Vries
GitHub
parent
fddcf3ffee
commit
b0940f1b5a
@ -1045,6 +1045,7 @@ class EmailRenderer {
|
||||
newsletter: {
|
||||
name: newsletter.get('name'),
|
||||
showPostTitleSection: newsletter.get('show_post_title_section'),
|
||||
showSubhead: newsletter.get('show_subhead'),
|
||||
showCommentCta: newsletter.get('show_comment_cta') && this.#settingsCache.get('comments_enabled') !== 'off' && !hasEmailOnlyFlag,
|
||||
showSubscriptionDetails: newsletter.get('show_subscription_details')
|
||||
},
|
||||
@ -1078,6 +1079,7 @@ class EmailRenderer {
|
||||
classes: {
|
||||
title: 'post-title' + (newsletter.get('title_font_category') === 'serif' ? ` post-title-serif` : ``) + (newsletter.get('title_alignment') === 'left' ? ` post-title-left` : ``),
|
||||
titleLink: 'post-title-link' + (newsletter.get('title_alignment') === 'left' ? ` post-title-link-left` : ``),
|
||||
subhead: 'post-subhead' + (newsletter.get('title_alignment') === 'left' ? ` post-subhead-left` : ``),
|
||||
meta: 'post-meta' + (newsletter.get('title_alignment') === 'left' ? ` post-meta-left` : ` post-meta-center`),
|
||||
body: newsletter.get('body_font_category') === 'sans_serif' ? `post-content-sans-serif` : `post-content`
|
||||
},
|
||||
|
||||
@ -272,7 +272,7 @@ figcaption {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
line-height: 1.5em;
|
||||
color: {{secondaryTextColor}};
|
||||
color: #738a94;
|
||||
}
|
||||
|
||||
figcaption a {
|
||||
@ -327,11 +327,6 @@ figure blockquote p {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.site-info-bordered {
|
||||
padding-top: 32px;
|
||||
border-bottom: 1px solid #e5eff5;
|
||||
}
|
||||
|
||||
.site-url {
|
||||
color: #15212A;
|
||||
font-size: 16px;
|
||||
@ -342,7 +337,7 @@ figure blockquote p {
|
||||
}
|
||||
|
||||
.site-url-bottom-padding {
|
||||
padding-bottom: 32px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@ -351,7 +346,7 @@ figure blockquote p {
|
||||
|
||||
.site-subtitle {
|
||||
color: #738a94;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
}
|
||||
@ -381,10 +376,28 @@ figure blockquote p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post-subhead-wrapper {
|
||||
width: 100%;
|
||||
max-width: 600px !important;
|
||||
}
|
||||
|
||||
.post-subhead {
|
||||
margin: 0;
|
||||
padding-bottom: 20px;
|
||||
color: #15212A;
|
||||
font-size: 17px;
|
||||
line-height: 1.3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-subhead-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post-meta,
|
||||
.view-online {
|
||||
color: #738a94;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
@ -442,7 +455,7 @@ figure blockquote p {
|
||||
padding-bottom: 32px;
|
||||
text-align: center;
|
||||
font-size: 13px !important;
|
||||
color: {{secondaryTextColor}};
|
||||
color: #738a94;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@ -1111,7 +1124,7 @@ a[data-flickr-embed] img {
|
||||
padding: 20px;
|
||||
margin-bottom: 1.5em;
|
||||
border-radius: 4px;
|
||||
border: 1px solid {{secondaryBorderColor}};
|
||||
border: 1px solid #738a94;
|
||||
}
|
||||
|
||||
|
||||
@ -1287,6 +1300,10 @@ a[data-flickr-embed] img {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
table.body .post-subhead {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
table.body pre {
|
||||
white-space: pre-wrap !important;
|
||||
word-break: break-word !important;
|
||||
@ -1326,15 +1343,10 @@ a[data-flickr-embed] img {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
table.body .site-info,
|
||||
table.body .site-info-bordered {
|
||||
table.body .site-info {
|
||||
padding-top: 24px !important;
|
||||
}
|
||||
|
||||
table.body .site-url-bottom-padding {
|
||||
padding-bottom: 24px !important;
|
||||
}
|
||||
|
||||
table.body .post-title-link {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
|
||||
{{#if (or showHeaderIcon showHeaderTitle showHeaderName) }}
|
||||
<tr>
|
||||
<td class="{{#if (and newsletter.showPostTitleSection showHeaderTitle) }}site-info-bordered{{else}}site-info{{/if}}" width="100%" align="center">
|
||||
<td class="site-info" width="100%" align="center">
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||||
{{#if (and showHeaderIcon site.iconUrl) }}
|
||||
<tr>
|
||||
@ -79,6 +79,15 @@
|
||||
<a href="{{post.url}}" class="{{classes.titleLink}}">{{post.title}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{#hasFeature 'subhead'}}
|
||||
{{#if newsletter.showSubhead}}
|
||||
<tr>
|
||||
<td class="post-subhead-wrapper" style="width: 100%">
|
||||
<p class="{{classes.subhead}}">Jonathan Haidt wrote a best-selling book about teens and social media. Not everyone buys its thesis.</p>
|
||||
</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
{{/hasFeature}}
|
||||
<tr>
|
||||
<td style="width: 100%">
|
||||
<table class="post-meta-wrapper" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 32px;">
|
||||
|
||||
@ -1995,6 +1995,7 @@ describe('Email renderer', function () {
|
||||
title: 'post-title post-title-serif post-title-left',
|
||||
titleLink: 'post-title-link post-title-link-left',
|
||||
meta: 'post-meta post-meta-left',
|
||||
subhead: 'post-subhead post-subhead-left',
|
||||
body: 'post-content-sans-serif'
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user