mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-15 03:01:37 -05:00
Updated subscription box in email preview and email template
Refs https://github.com/TryGhost/Team/issues/2738 - With all footer additions and changes, the subscription box did not match the rest of the design and is therefore updated.
This commit is contained in:
Sanne de Vries
parent
3623a652ba
commit
3f0ec1af3d
10 changed files with 152 additions and 141 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<div class="gh-members-emailpreview-latest-post">
|
||||
<div class="gh-members-emailpreview-latest-post-image" style={{html-safe (concat "background-image: url(" @imgPath ")")}}></div>
|
||||
<div>
|
||||
<h3>{{@postTitle}}</h3>
|
||||
<h4>{{@postTitle}}</h4>
|
||||
<p>{{@postExcerpt}}</p>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-latest-post-image" style={{html-safe (concat "background-image: url(" @imgPath ")")}}></div>
|
||||
</div>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</GhFormGroup>
|
||||
|
||||
{{#if this.settings.icon}}
|
||||
<GhFormGroup class="gh-stack-item">
|
||||
<GhFormGroup class="gh-stack-item row">
|
||||
<label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
|
||||
<div class="for-switch small {{unless this.settings.icon "disabled"}}">
|
||||
<label class="switch" for="show-header">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
{{#if this.showHeader}}
|
||||
<div class={{if this.showHeaderTitle "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}}>
|
||||
<div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}}>
|
||||
{{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
|
||||
<img src={{this.settings.icon}} alt="" role="presentation" />
|
||||
{{/if}}
|
||||
|
|
@ -45,14 +45,14 @@
|
|||
<div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
|
||||
<div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
|
||||
{{/if}}
|
||||
<div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}} {{if (and (not (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta @newsletter.showLatestPosts) @newsletter.showSubscriptionDetails) "no-border"}}">
|
||||
<div class="gh-members-emailpreview-content">
|
||||
<p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
|
||||
<p>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
|
||||
<p>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
|
||||
</div>
|
||||
|
||||
{{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
|
||||
<div class="gh-members-emailpreview-feedback {{if (and (not @newsletter.showLatestPosts) @newsletter.showSubscriptionDetails) "no-border"}}">
|
||||
<div class="gh-members-emailpreview-feedback">
|
||||
<div class="gh-members-emailpreview-feedback-buttons-group">
|
||||
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
|
|
@ -74,7 +74,8 @@
|
|||
{{/if}}
|
||||
|
||||
{{#if @newsletter.showLatestPosts}}
|
||||
<div class="gh-members-emailpreview-latest-posts {{unless @newsletter.showSubscriptionDetails "border"}}">
|
||||
<div class="gh-members-emailpreview-latest-posts">
|
||||
<h3 class="pb2">Keep reading</h3>
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-1.png"
|
||||
@postTitle="The three latest posts published on your site"
|
||||
|
|
|
|||
|
|
@ -2154,10 +2154,6 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
border-bottom: 1px solid #e5eff5;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-content.no-border {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-content:first-child {
|
||||
margin-top: 52px;
|
||||
}
|
||||
|
|
@ -2272,10 +2268,6 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
border-bottom: 1px solid #e5eff5;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-feedback.no-border {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-feedback-title {
|
||||
text-align: center;
|
||||
color: #15212a;
|
||||
|
|
@ -2311,14 +2303,20 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
|
||||
.gh-members-emailpreview-latest-posts {
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid #e5eff5;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-posts.border {
|
||||
border-bottom: 1px solid #e5eff5;
|
||||
.gh-members-emailpreview-latest-posts h3 {
|
||||
margin: 8px 0 16px;
|
||||
color: #15212A;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-post {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
|
@ -2334,8 +2332,8 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
aspect-ratio: 5 / 4;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-post h3 {
|
||||
margin: 12px 0 4px;
|
||||
.gh-members-emailpreview-latest-post h4 {
|
||||
margin: 2px 0 4px;
|
||||
color: #15212a;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial, sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1.9rem;
|
||||
|
|
@ -2350,16 +2348,16 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
|
||||
|
||||
.gh-members-emailpreview-subscription-details {
|
||||
padding: 24px;
|
||||
background: #F4F5F6;
|
||||
padding: 32px 0;
|
||||
border-bottom: 1px solid #e5eff5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial, sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-subscription-details h4 {
|
||||
font-size: 1.4rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-subscription-details p {
|
||||
|
|
@ -2375,7 +2373,7 @@ a.gh-members-emailpreview-subscription-link {
|
|||
white-space: nowrap;
|
||||
width: 100%;
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -280,6 +280,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -303,7 +307,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -311,10 +315,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -895,6 +895,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -918,7 +922,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -926,10 +930,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -1561,6 +1561,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -1584,7 +1588,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -1592,10 +1596,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -2543,6 +2543,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -2566,7 +2570,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -2574,10 +2578,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -3561,6 +3561,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -3584,7 +3588,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -3592,10 +3596,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -173,6 +173,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -196,7 +200,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -204,10 +208,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -768,6 +768,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -791,7 +795,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -799,10 +803,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -1349,6 +1349,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -1372,7 +1376,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -1380,10 +1384,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -1930,6 +1930,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -1953,7 +1957,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -1961,10 +1965,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -2511,6 +2511,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -2534,7 +2538,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -2542,10 +2546,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -3050,6 +3050,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -3073,7 +3077,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -3081,10 +3085,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -4705,6 +4705,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -4728,7 +4732,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -4736,10 +4740,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -5386,6 +5386,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -5409,7 +5413,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -5417,10 +5421,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -6552,6 +6552,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -6575,7 +6579,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -6583,10 +6587,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -6790,7 +6790,7 @@ table.body figcaption a {
|
|||
</tr>
|
||||
|
||||
<tr class=\\"post-content-row\\">
|
||||
<td class=\\"post-content no-border\\" style=\\"vertical-align: top; font-family: Georgia, serif; font-size: 18px; line-height: 1.5em; color: #15212A; padding-bottom: 20px; border-bottom: 0; max-width: 600px;\\" valign=\\"top\\">
|
||||
<td class=\\"post-content\\" style=\\"vertical-align: top; font-family: Georgia, serif; font-size: 18px; line-height: 1.5em; color: #15212A; padding-bottom: 20px; border-bottom: 1px solid #e5eff5; max-width: 600px;\\" valign=\\"top\\">
|
||||
<!-- POST CONTENT START -->
|
||||
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Hello world</p>
|
||||
<!-- POST CONTENT END -->
|
||||
|
|
@ -6806,20 +6806,20 @@ table.body figcaption a {
|
|||
|
||||
|
||||
<tr>
|
||||
<td class=\\"subscription-box\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; vertical-align: top; padding: 24px; background: #F4F5F6; color: #15212A; border-radius: 3px;\\" valign=\\"top\\">
|
||||
<h3 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; text-rendering: optimizeLegibility; font-size: 14px; font-weight: 700; margin: 0 0 16px;\\">Subscription details</h3>
|
||||
<p style=\\"margin: 0 0 1.5em 0; font-size: 14px; font-weight: 400; line-height: 1.45em; text-decoration: none; margin-bottom: 16px; color: #15212A;\\">
|
||||
<td class=\\"subscription-box\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; vertical-align: top; padding: 32px 0; border-bottom: 1px solid #e5eff5; color: #15212A;\\" valign=\\"top\\">
|
||||
<h3 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; text-rendering: optimizeLegibility; font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0 0 18px;\\">Subscription details</h3>
|
||||
<p style=\\"margin: 0 0 1.5em 0; font-size: 15px; font-weight: 400; line-height: 1.45em; text-decoration: none; margin-bottom: 16px; color: #15212A;\\">
|
||||
<span>You are receiving this because you are a <strong style=\\"font-weight: 700;\\">free subscriber</strong> to Ghost.</span>
|
||||
|
||||
</p>
|
||||
<table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
|
||||
<tr>
|
||||
<td class=\\"subscription-details\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
|
||||
<p class=\\"\\" style=\\"margin: 0 0 1.5em 0; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.45em; text-decoration: none; color: #15212A;\\">Name: Simon Tester</p>
|
||||
<p style=\\"margin: 0 0 1.5em 0; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.45em; text-decoration: none; color: #15212A;\\">Email: <a href=\\"mailto:replacements-test-2@example.com\\" style=\\"overflow-wrap: anywhere; text-decoration: none; color: #15212A;\\" target=\\"_blank\\">replacements-test-2@example.com</a></p>
|
||||
<p style=\\"margin: 0 0 1.5em 0; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.45em; text-decoration: none; color: #15212A;\\">Member since: date</p>
|
||||
<p class=\\"\\" style=\\"margin: 0 0 1.5em 0; margin-bottom: 0; font-size: 15px; font-weight: 400; line-height: 1.45em; text-decoration: none; color: #15212A;\\">Name: Simon Tester</p>
|
||||
<p style=\\"margin: 0 0 1.5em 0; margin-bottom: 0; font-size: 15px; font-weight: 400; line-height: 1.45em; text-decoration: none; color: #15212A;\\">Email: <a href=\\"mailto:replacements-test-2@example.com\\" style=\\"overflow-wrap: anywhere; text-decoration: none; color: #15212A;\\" target=\\"_blank\\">replacements-test-2@example.com</a></p>
|
||||
<p style=\\"margin: 0 0 1.5em 0; margin-bottom: 0; font-size: 15px; font-weight: 400; line-height: 1.45em; text-decoration: none; color: #15212A;\\">Member since: date</p>
|
||||
</td>
|
||||
<td align=\\"right\\" valign=\\"bottom\\" class=\\"manage-subscription\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space: nowrap; font-size: 13.5px; font-weight: 500; text-align: right; line-height: 1.45em; vertical-align: bottom; color: #FF1A75;\\">
|
||||
<td align=\\"right\\" valign=\\"bottom\\" class=\\"manage-subscription\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space: nowrap; font-size: 15px; font-weight: 600; text-align: right; line-height: 1.45em; vertical-align: bottom; color: #FF1A75;\\">
|
||||
<a href=\\"http://127.0.0.1:2369/#/portal/account\\" style=\\"color: #FF1A75; text-decoration: none; overflow-wrap: anywhere;\\" target=\\"_blank\\"> Manage subscription →</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -7190,6 +7190,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -7213,7 +7217,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -7221,10 +7225,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -7773,6 +7773,10 @@ table.body .footer a {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -7796,7 +7800,7 @@ table.body .footer a {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -7804,10 +7808,6 @@ table.body .footer a {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -758,7 +758,7 @@ class EmailRenderer {
|
|||
const {href: featureImageMobile, width: featureImageMobileWidth, height: featureImageMobileHeight} = await this.limitImageWidth(latestPost.get('feature_image'), 600, 480);
|
||||
|
||||
latestPosts.push({
|
||||
title: this.truncateText(latestPost.get('title'), 90),
|
||||
title: this.truncateText(latestPost.get('title'), 85),
|
||||
url: this.#getPostUrl(latestPost),
|
||||
featureImage: featureImage ? {
|
||||
src: featureImage,
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
{{/if}}
|
||||
{{/if}}
|
||||
<td valign="top" align="left" class="latest-post-title">
|
||||
<h4>{{title}}</h4>
|
||||
<h4 class="{{#if ../latestPostsHasImages}}{{#if (not featureImage)}}no-image{{/if}}{{/if}}">{{title}}</h4>
|
||||
{{#if excerpt}}
|
||||
<p>{{excerpt}}</p>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -450,6 +450,16 @@ figure blockquote p {
|
|||
/* -------------------------------------
|
||||
LATEST POSTS TABLE
|
||||
------------------------------------- */
|
||||
|
||||
.latest-posts-header {
|
||||
margin: 0;
|
||||
padding: 8px 0 16px;
|
||||
color: #15212A;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.latest-post {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
|
@ -479,20 +489,23 @@ figure blockquote p {
|
|||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.latest-post h4 {
|
||||
margin: 0;
|
||||
padding: 2px 0 4px;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.latest-post p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #738a94;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.latest-post h4 {
|
||||
margin: 0;
|
||||
.latest-post h4.no-image {
|
||||
padding: 12px 0 4px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
|
||||
/* -------------------------------------
|
||||
|
|
@ -500,22 +513,22 @@ figure blockquote p {
|
|||
------------------------------------- */
|
||||
|
||||
.subscription-box {
|
||||
padding: 24px;
|
||||
background: #F4F5F6;
|
||||
padding: 32px 0;
|
||||
border-bottom: 1px solid #e5eff5;
|
||||
color: #15212A;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.subscription-box h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
.subscription-box p {
|
||||
margin-bottom: 0;
|
||||
color: #15212A !important;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.45em;
|
||||
text-decoration: none;
|
||||
|
|
@ -528,14 +541,18 @@ figure blockquote p {
|
|||
|
||||
.manage-subscription {
|
||||
white-space: nowrap;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
line-height: 1.45em;
|
||||
vertical-align: bottom;
|
||||
color: {{accentColor}};
|
||||
}
|
||||
|
||||
/* -------------------------------------
|
||||
POST CONTENT
|
||||
------------------------------------- */
|
||||
|
||||
.post-content {
|
||||
max-width: 600px !important;
|
||||
font-family: Georgia, serif;
|
||||
|
|
@ -555,11 +572,6 @@ figure blockquote p {
|
|||
border-bottom: 1px solid #e5eff5;
|
||||
}
|
||||
|
||||
.post-content.no-border,
|
||||
.post-content-sans-serif.no-border {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.post-content-row:first-child > td, .header-image-row + .post-content-row > td {
|
||||
padding-top: 52px;
|
||||
}
|
||||
|
|
@ -1181,6 +1193,10 @@ a[data-flickr-embed] img {
|
|||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
table.body .latest-posts-header {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post a {
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
|
|
@ -1204,7 +1220,7 @@ a[data-flickr-embed] img {
|
|||
|
||||
table.body .latest-post h4 {
|
||||
padding: 4px 0 !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
table.body .latest-post p {
|
||||
|
|
@ -1212,10 +1228,6 @@ a[data-flickr-embed] img {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
table.body .subscription-box {
|
||||
padding: 24px 20px !important;
|
||||
}
|
||||
|
||||
table.body .subscription-box h3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@
|
|||
{{/if}}
|
||||
{{/if}}
|
||||
<tr class="post-content-row">
|
||||
<td class="{{classes.body}}{{#if (and (not (or feedbackButtons newsletter.showCommentCta latestPosts.length)) newsletter.showSubscriptionDetails)}} no-border{{/if}}">
|
||||
<td class="{{classes.body}}">
|
||||
<!-- 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 (and (not latestPosts.length) 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; border-bottom: 1px solid #e5eff5;" align="center">
|
||||
<table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
{{#if feedbackButtons }}
|
||||
|
|
@ -168,8 +168,8 @@
|
|||
|
||||
{{#if latestPosts.length}}
|
||||
<tr>
|
||||
<td style="padding: 24px 0;{{#unless newsletter.showSubscriptionDetails}} border-bottom: 1px solid #e5eff5;{{/unless}}">
|
||||
<h3 style="margin: 0.3em 0; color: #15212A;">Keep reading</h3>
|
||||
<td style="padding: 24px 0; border-bottom: 1px solid #e5eff5;">
|
||||
<h3 class="latest-posts-header">Keep reading</h3>
|
||||
{{> latestPosts}}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue