OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made the post preview card a link (#20846)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
ghost/admin/app/components/modal-post-success.hbs
View File

@ -100,41 +100,43 @@
<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
{{#unless this.post.emailOnly}}
<div class="gh-post-card">
{{#if this.post.featureImage}}
<figure class="modal-image">
<img src="{{this.post.featureImage}}" alt="{{this.post.title}}">
</figure>
{{else if this.post.twitterImage}}
<figure class="modal-image">
<img src="{{this.post.twitterImage}}" alt="{{this.post.title}}">
</figure>
{{else if this.post.ogImage}}
<figure class="modal-image">
<img src="{{this.post.ogImage}}" alt="{{this.post.title}}">
</figure>
{{/if}}
<div class="modal-body">
<h2>{{this.post.title}}</h2>
{{#if this.post.excerpt}}
<p class="post-excerpt">{{this.post.excerpt}}</p>
<a href="{{this.post.url}}" target="_blank" rel="noopener noreferrer" title="View post: {{this.post.title}}">
<div class="gh-post-card">
{{#if this.post.featureImage}}
<figure class="modal-image">
<img src="{{this.post.featureImage}}" alt="{{this.post.title}}">
</figure>
{{else if this.post.twitterImage}}
<figure class="modal-image">
<img src="{{this.post.twitterImage}}" alt="{{this.post.title}}">
</figure>
{{else if this.post.ogImage}}
<figure class="modal-image">
<img src="{{this.post.ogImage}}" alt="{{this.post.title}}">
</figure>
{{/if}}
<div class="gh-post-details">
{{#if (get-setting "icon")}}
<div class="gh-post-bookmark-site-icon">
<img src={{get-setting "icon"}} alt="" role="presentation" />
<div class="modal-body">
<h2>{{this.post.title}}</h2>
{{#if this.post.excerpt}}
<p class="post-excerpt">{{this.post.excerpt}}</p>
{{/if}}
<div class="gh-post-details">
{{#if (get-setting "icon")}}
<div class="gh-post-bookmark-site-icon">
<img src={{get-setting "icon"}} alt="" role="presentation" />
</div>
{{/if}}
{{#if (get-setting "title")}}
<div class="gh-post-bookmark-site-name">{{get-setting "title"}}</div>
{{/if}}
<div class="gh-post-bookmark-authors">{{post-author-names this.post}}</div>
</div>
{{/if}}
{{#if (get-setting "title")}}
<div class="gh-post-bookmark-site-name">{{get-setting "title"}}</div>
{{/if}}
<div class="gh-post-bookmark-authors">{{post-author-names this.post}}</div>
</div>
</div>
</div>
</a>
<footer class="modal-footer">
{{#if (and this.post.isPublished (not this.post.emailOnly))}}

11
ghost/admin/app/styles/components/publishmenu.css
View File

@ -895,6 +895,15 @@
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 {
border-radius: 8px;
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 {
background: var(--whitegrey-l1);
background: var(--whitegrey-l2);
}
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) span {