Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Added Mentions page empty state

Browse source 
refs https://github.com/TryGhost/Team/issues/2479
This commit is contained in:
Djordje Vlaisavljevic 2023-01-23 21:42:19 +00:00
parent bbbdd26f3f
commit d394ce6638
2 changed files with 69 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ghost/admin/app/styles/layouts/mentions.css
View file

@ -115,4 +115,34 @@
top: 0;
left: 0;
border-radius: 0 2px 2px 0;
}
.gh-mentions-list-cta {
display: flex;
flex-direction: column;
align-items: center;
padding: 4vw;
}
.gh-mentions-list-cta .love-letter {
fill: var(--lightgrey);
width: 68px;
height: 68px;
margin-bottom: 20px;
}
.gh-mentions-list-cta h4 {
color: var(--black);
text-align: center;
font-weight: 600;
margin-bottom: 8px;
}
.gh-mentions-list-cta p {
max-width: 390px;
color: var(--midgrey);
text-align: center;
line-height: 1.45em;
margin: 0 0 20px;
padding: 0;
}

69
ghost/admin/app/templates/mentions.hbs
View file

@ -5,37 +5,46 @@
</h2>
</GhCanvasHeader>
<section>
{{#each this.mentionsList as |mention|}}
<div class="gh-mention-card">
{{!-- TODO: show the title of your post instead of a link --}}
{{!-- TODO: link to the post analytics page of your post --}}
<p class="gh-mention-your-post">Your post <a href={{mention.target}} class="gh-mention-your-post-link">{{mention.target}}</a> was mentioned in:</p>
<a href="{{mention.source}}" class="gh-mention-container" rel="noreferrer noopener" target="_blank">
<div class="gh-mention-content">
<h3 class="gh-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.target}}</h3>
{{#if mention.sourceExcerpt}}
<p class="gh-mention-description">{{mention.sourceExcerpt}}</p>
{{!-- TODO: Invert logic --}}
{{#if this.mentionsList}}
{{#each this.mentionsList as |mention|}}
<div class="gh-mention-card">
{{!-- TODO: show the title of your post instead of a link --}}
{{!-- TODO: link to the post analytics page of your post --}}
<p class="gh-mention-your-post">Your post <a href={{mention.target}} class="gh-mention-your-post-link">{{mention.target}}</a> was mentioned in:</p>
<a href="{{mention.source}}" class="gh-mention-container" rel="noreferrer noopener" target="_blank">
<div class="gh-mention-content">
<h3 class="gh-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.target}}</h3>
{{#if mention.sourceExcerpt}}
<p class="gh-mention-description">{{mention.sourceExcerpt}}</p>
{{/if}}
<div class="gh-mention-metadata">
{{#if mention.sourceFavicon}}
<img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="gh-mention-icon">
{{/if}}
{{#if mention.sourceSiteTitle}}
<span class="gh-mention-publisher">{{mention.sourceSiteTitle}}</span>
{{/if}}
{{#if mention.sourceAuthor}}
<span class="gh-mention-author">{{mention.sourceAuthor}}</span>
{{/if}}
<span class="gh-mention-timestamp">{{gh-format-post-time mention.timestamp}}</span>
</div>
</div>
{{#if mention.sourceFeaturedImage}}
<div class="gh-mention-thumbnail">
<img src="{{mention.sourceFeaturedImage}}" alt="{{mention.sourceTitle}}">
</div>
{{/if}}
<div class="gh-mention-metadata">
{{#if mention.sourceFavicon}}
<img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="gh-mention-icon">
{{/if}}
{{#if mention.sourceSiteTitle}}
<span class="gh-mention-publisher">{{mention.sourceSiteTitle}}</span>
{{/if}}
{{#if mention.sourceAuthor}}
<span class="gh-mention-author">{{mention.sourceAuthor}}</span>
{{/if}}
<span class="gh-mention-timestamp">{{gh-format-post-time mention.timestamp}}</span>
</div>
</div>
{{#if mention.sourceFeaturedImage}}
<div class="gh-mention-thumbnail">
<img src="{{mention.sourceFeaturedImage}}" alt="{{mention.sourceTitle}}">
</div>
{{/if}}
</a>
</a>
</div>
{{/each}}
{{else}}
<div class="gh-mentions-list-cta">
{{svg-jar "email-love-letter" class="love-letter"}}
<h4>No mentions yet</h4>
<p>When other sites mention your posts, they'll appear here.</p>
</div>
{{/each}}
{{/if}}
</section>
</section>