Updated comments link UI in email preview

Refs https://github.com/TryGhost/Team/issues/2714
This commit is contained in:
Sanne de Vries 2023-03-15 12:09:33 +01:00
parent da2e56916e
commit f9cb4bcaaf
2 changed files with 36 additions and 16 deletions

View File

@ -28,14 +28,16 @@
{{#if @newsletter.showPostTitleSection}} {{#if @newsletter.showPostTitleSection}}
<div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}"> <div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
<h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2> <h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
<div class="flex justify-between w-100 {{if (eq @newsletter.titleAlignment "center") "flex-column"}}"> <div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
<p>By {{or this.session.user.name this.session.user.email}} on {{moment-format (moment-site-tz) "D MMM YYYY"}}</p> <p>By {{or this.session.user.name this.session.user.email}}
<div class="{{if (eq @newsletter.titleAlignment "center") "gh-members-emailpreview-meta-center"}}"> <span>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
<a href="javascript:">View in browser</a>
{{#if this.showCommentCta}} {{#if this.showCommentCta}}
<a href="javascript:"> {{svg-jar "comments"}}</a> <span><a href="javascript:"> {{svg-jar "comments"}}</a></span>
{{/if}} {{/if}}
</div> </p>
<p>
<a href="javascript:">View in browser</a>
</p>
</div> </div>
</div> </div>
{{/if}} {{/if}}

View File

@ -2056,25 +2056,38 @@ p.gh-members-import-errordetail:first-of-type {
padding: 0 0 16px; padding: 0 0 16px;
} }
.gh-members-emailpreview-meta {
display: flex;
justify-content: space-between;
width: 100%;
height: 20px;
}
.gh-members-emailpreview-meta.center-aligned {
flex-direction: column;
}
.gh-members-emailpreview-title p { .gh-members-emailpreview-title p {
margin: 0; margin: 0;
padding: 0 0 10px; padding: 0 0 10px;
white-space: nowrap; white-space: nowrap;
font-size: 1.3rem; font-size: 1.3rem;
line-height: 1; line-height: 1;
letter-spacing: 0.2px; letter-spacing: 0.1px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
color: #15212A; color: #15212A;
} }
.gh-members-emailpreview-meta-center { .gh-members-emailpreview-meta p {
text-align: center;
}
.gh-members-emailpreview-labs .gh-members-emailpreview-title p {
padding: 0 0 4px; padding: 0 0 4px;
color: var(--midgrey); color: var(--midgrey);
text-transform: none;
}
.gh-members-emailpreview-meta p span::before{
content: "•";
padding: 0 4px;
} }
.gh-members-emailpreview-title p span { .gh-members-emailpreview-title p span {
@ -2086,17 +2099,17 @@ p.gh-members-import-errordetail:first-of-type {
color: #15212A; color: #15212A;
} }
.gh-members-emailpreview-labs .gh-members-emailpreview-title a { .gh-members-emailpreview-meta a {
text-decoration: underline; text-decoration: none;
color: var(--midgrey); color: var(--midgrey);
font-size: 1.3rem; font-size: 1.3rem;
line-height: 1; line-height: 1;
letter-spacing: 0.2px; letter-spacing: 0.2px;
} }
.gh-members-emailpreview-labs .gh-members-emailpreview-title a svg { .gh-members-emailpreview-meta a svg {
display: inline-block; display: inline-block;
margin: -2px 0 0 10px; margin-top: -2px;
vertical-align: middle; vertical-align: middle;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -2126,6 +2139,10 @@ p.gh-members-import-errordetail:first-of-type {
border-bottom: 1px solid #e5eff5; border-bottom: 1px solid #e5eff5;
} }
.gh-members-emailpreview-content:first-child {
margin-top: 48px;
}
.gh-members-emailpreview-content p { .gh-members-emailpreview-content p {
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 1.8rem; font-size: 1.8rem;
@ -2258,6 +2275,7 @@ p.gh-members-import-errordetail:first-of-type {
.gh-members-emailpreview-labs .gh-members-emailpreview-feedback-button { .gh-members-emailpreview-labs .gh-members-emailpreview-feedback-button {
border: 0; border: 0;
font-weight: 600; font-weight: 600;
white-space: nowrap;
} }
.gh-members-emailpreview-feedback-button svg { .gh-members-emailpreview-feedback-button svg {