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}}
<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>
<div class="flex justify-between w-100 {{if (eq @newsletter.titleAlignment "center") "flex-column"}}">
<p>By {{or this.session.user.name this.session.user.email}} on {{moment-format (moment-site-tz) "D MMM YYYY"}}</p>
<div class="{{if (eq @newsletter.titleAlignment "center") "gh-members-emailpreview-meta-center"}}">
<a href="javascript:">View in browser</a>
<div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
<p>By {{or this.session.user.name this.session.user.email}}
<span>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
{{#if this.showCommentCta}}
<a href="javascript:"> {{svg-jar "comments"}}</a>
<span><a href="javascript:"> {{svg-jar "comments"}}</a></span>
{{/if}}
</div>
</p>
<p>
<a href="javascript:">View in browser</a>
</p>
</div>
</div>
{{/if}}

View File

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