Made the post preview card a link (#20846)

The modal in the new publish flow has a post preview card, which did not
link to the post itself. It does now (except when it's an email).
This commit is contained in:
Daniël van der Winden 2024-08-28 12:08:25 +02:00 committed by GitHub
parent 2b2e5dfeb1
commit 5cc3d943f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 31 deletions

View File

@ -100,6 +100,7 @@
<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button> <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
{{#unless this.post.emailOnly}} {{#unless this.post.emailOnly}}
<a href="{{this.post.url}}" target="_blank" rel="noopener noreferrer" title="View post: {{this.post.title}}">
<div class="gh-post-card"> <div class="gh-post-card">
{{#if this.post.featureImage}} {{#if this.post.featureImage}}
<figure class="modal-image"> <figure class="modal-image">
@ -135,6 +136,7 @@
</div> </div>
</div> </div>
</div> </div>
</a>
<footer class="modal-footer"> <footer class="modal-footer">
{{#if (and this.post.isPublished (not this.post.emailOnly))}} {{#if (and this.post.isPublished (not this.post.emailOnly))}}

View File

@ -895,6 +895,15 @@
border-radius: var(--radius); border-radius: var(--radius);
} }
.modal-post-success a {
text-decoration: none;
color: inherit;
}
.modal-post-success a:hover .gh-post-card {
background: var(--whitegrey-l2);
}
.modal-post-success .gh-post-card { .modal-post-success .gh-post-card {
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--lightgrey-l1); border: 1px solid var(--lightgrey-l1);
@ -1054,7 +1063,7 @@
} }
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .copy-link, .copy-preview-link):hover { .modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .copy-link, .copy-preview-link):hover {
background: var(--whitegrey-l1); background: var(--whitegrey-l2);
} }
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) span { .modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) span {