Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Added mentions widget empty state

Browse source 
refs https://github.com/TryGhost/Team/issues/2608
This commit is contained in:
Djordje Vlaisavljevic 2023-03-02 20:06:00 +00:00
parent 683a0726df
commit c6185017be
2 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -2627,7 +2627,7 @@ Dashboard Mentions */
.gh-dashboard-mentions {
min-width: 300px;
max-width: 400px;
padding: 20px;
padding-bottom: 20px;
}
.gh-dashboard-mentions-header {
@ -2635,9 +2635,9 @@ Dashboard Mentions */
align-items: center;
justify-content: space-between;
line-height: 1;
margin-bottom: 16px;
border-bottom: 1px solid var(--whitegrey);
padding-bottom: 16px;
border-bottom: 1px solid var(--whitegrey);
margin: 20px 20px 16px 20px;
}
.gh-dashboard-mentions {
@ -2677,12 +2677,15 @@ Dashboard Mentions */
align-items: flex-start; */
/* display: grid; */
display: block;
padding: 4px 0;
padding: 6px 0;
padding: 6px 20px;
font-size: 1.4rem;
line-height: 1.2;
}
.gh-dashboard-mention:hover {
background: color-mod(var(--whitegrey) a(60%) s(-12%));
}
.gh-dashboard-mention-content {
width: 100%;
display: grid;
@ -2729,4 +2732,8 @@ Dashboard Mentions */
.gh-dashboard-mentions .gh-dashboard-list-footer {
margin-top: auto;
}
.gh-dashboard-mentions .gh-mentions-list-cta {
padding: 20px;
}

25
ghost/admin/app/templates/dashboard.hbs
View file

@ -9,8 +9,6 @@
<div class="gh-dashboard-select">
<div {{did-insert this.loadMentions}}>
{{#if (feature 'webmentions')}}
{{!-- Mentions widget using a GhBasicDropdown component --}}
<GhBasicDropdown @horizontalPosition="right" @verticalPosition="below" @onOpen={{this.markMentionsRead}} as |dropdown|>
<dropdown.Trigger class="outline-0 pointer">
<button type="button" class="gh-dashboard-mentions-icon">
@ -24,32 +22,37 @@
<dropdown.Content class="gh-dashboard-mentions-container">
<div class="gh-dashboard-mentions">
<div class="gh-dashboard-mentions-header">
<h2 class="gh-dashboard-mentions-heading">Mentions</h2>
<LinkTo @route="mentions" class="gh-dashboard-mentions-see-all">View all mentions &rarr;</LinkTo>
</div>
{{#if this.mentions}}
<div class="gh-dashboard-mentions-header">
<h2 class="gh-dashboard-mentions-heading">Mentions</h2>
<LinkTo @route="mentions" class="gh-dashboard-mentions-see-all">View all mentions &rarr;</LinkTo>
</div>
{{/if}}
<div>
{{#if this.mentions}}
{{#each this.mentions as |mention|}}
<a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
<div class="gh-dashboard-mention-content">
<img src="{{ or mention.sourceFavicon 'assets/img/orb-squircle.png'}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
<span class="gh-dashboard-mention-title">{{or mention.sourceSiteTitle mention.sourceSiteTitle}}</span>
{{!-- <span>mentioned</span> --}}
<img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
<span class="gh-dashboard-mention-title">{{or mention.sourceSiteTitle mention.sourceTitle}}</span>
<div class="gh-mention-link-icon">
{{svg-jar "twitter-link"}}
</div>
{{#if (gt mention.mentions.length 1) }}
<span class="gh-dashboard-mention-target">{{mention.mentions.length}} links</span>
{{else}}
<span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name 'a link'}}</span>
<span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name mention.target}}</span>
{{/if}}
<span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
</div>
</a>
{{/each}}
{{else}}
Empty state
<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 or pages, they'll appear here.</p>
</div>
{{/if}}
</div>
</div>