mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Added latest posts UI to newsletter preview
Refs https://github.com/TryGhost/Team/issues/2768
This commit is contained in:
parent
c3372f343a
commit
c28b4c61d2
7 changed files with 80 additions and 39 deletions
|
@ -0,0 +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>
|
||||
<p>{{@postDate}}</p>
|
||||
</div>
|
||||
</div>
|
|
@ -225,21 +225,6 @@
|
|||
</GhFormGroup>
|
||||
{{/unless}}
|
||||
|
||||
<GhFormGroup class="gh-stack-item row">
|
||||
<label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
|
||||
<div class="for-switch small">
|
||||
<div class="container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="capture-feedback"
|
||||
checked={{@newsletter.showSubscriptionDetails}}
|
||||
{{on "change" (fn this.onCheckboxChange "showSubscriptionDetails")}}
|
||||
>
|
||||
<button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showSubscriptionDetails")}}></button>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup class="gh-stack-item row">
|
||||
<label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
|
||||
<div class="for-switch small">
|
||||
|
@ -255,6 +240,21 @@
|
|||
</div>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup class="gh-stack-item row">
|
||||
<label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
|
||||
<div class="for-switch small">
|
||||
<div class="container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="capture-feedback"
|
||||
checked={{@newsletter.showSubscriptionDetails}}
|
||||
{{on "change" (fn this.onCheckboxChange "showSubscriptionDetails")}}
|
||||
>
|
||||
<button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showSubscriptionDetails")}}></button>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup class="gh-stack-item">
|
||||
<label class="modal-fullsettings-title">Email footer</label>
|
||||
<KoenigBasicHtmlInput
|
||||
|
|
|
@ -45,15 +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.showSubscriptionDetails) "no-border"}}">
|
||||
<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"}}">
|
||||
<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 @newsletter.showSubscriptionDetails "no-border"}}">
|
||||
|
||||
<div class="gh-members-emailpreview-feedback {{if (and (not @newsletter.showLatestPosts) @newsletter.showSubscriptionDetails) "no-border"}}">
|
||||
<div class="gh-members-emailpreview-feedback-buttons-group">
|
||||
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
|
@ -75,8 +74,19 @@
|
|||
{{/if}}
|
||||
|
||||
{{#if @newsletter.showLatestPosts}}
|
||||
<div class="gh-members-emailpreview-latest-posts">
|
||||
Newsletter latest posts
|
||||
<div class="gh-members-emailpreview-latest-posts {{unless @newsletter.showSubscriptionDetails "border"}}">
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-1.png"
|
||||
@postTitle="The three latest posts published on your site"
|
||||
@postDate="Lorem ipsum dolor sit amet, consectetur elit." />
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-2.png"
|
||||
@postTitle="Displayed at the bottom of each newsletter"
|
||||
@postDate="Lorem ipsum dolor sit amet, consectetur elit." />
|
||||
<Modals::Newsletters::Components::LatestPost
|
||||
@imgPath="assets/img/latest-posts-3.png"
|
||||
@postTitle="To keep your work front and center"
|
||||
@postDate="Lorem ipsum dolor sit amet, consectetur elit." />
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
@ -2268,7 +2268,7 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
.gh-members-emailpreview-feedback {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
padding: 40px;
|
||||
padding: 24px 40px;
|
||||
border-bottom: 1px solid #e5eff5;
|
||||
}
|
||||
|
||||
|
@ -2276,11 +2276,6 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-feedback {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-feedback-title {
|
||||
text-align: center;
|
||||
color: #15212a;
|
||||
|
@ -2294,25 +2289,14 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
|
||||
.gh-members-emailpreview-feedback-button {
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
border-radius: 22px;
|
||||
border: 1px solid #e5eff5;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-feedback-button {
|
||||
border: 0;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-feedback-button svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-feedback-button svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 1.5px;
|
||||
|
@ -2325,6 +2309,46 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
padding: 7px 18px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-posts {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-posts.border {
|
||||
border-bottom: 1px solid #e5eff5;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-post {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-post-image {
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
max-width: 120px;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
aspect-ratio: 5 / 4;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-post h3 {
|
||||
margin: 12px 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;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-latest-post p {
|
||||
margin: 0;
|
||||
color: #738a94;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial, sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
|
||||
.gh-members-emailpreview-subscription-details {
|
||||
padding: 24px;
|
||||
background: #F4F5F6;
|
||||
|
|
BIN
ghost/admin/public/assets/img/latest-posts-1.png
Normal file
BIN
ghost/admin/public/assets/img/latest-posts-1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
BIN
ghost/admin/public/assets/img/latest-posts-2.png
Normal file
BIN
ghost/admin/public/assets/img/latest-posts-2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
BIN
ghost/admin/public/assets/img/latest-posts-3.png
Normal file
BIN
ghost/admin/public/assets/img/latest-posts-3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
Loading…
Add table
Reference in a new issue