Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Added mentions widget to post analytics

Browse source 
refs https://github.com/TryGhost/Team/issues/2575
This commit is contained in:
Djordje Vlaisavljevic 2023-02-21 19:55:57 +00:00
parent d3563d9c06
commit 1545d4fb5b
3 changed files with 98 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
ghost/admin/app/components/posts/analytics.hbs
View file

@ -115,32 +115,30 @@
</Tabs::Tabs> </Tabs::Tabs>
{{#if this.isLoaded }} {{#if this.isLoaded }}
{{#if this.showLinks }} <div class="gh-post-analytics-split {{if this.showMentions "gh-post-analytics-with-mentions"}}">
{{#if (is-empty this.links) }} {{#if this.showLinks }}
{{!-- Empty state --}} {{#if (is-empty this.links) }}
{{else}} {{!-- Empty state --}}
<Posts::LinksTable {{else}}
@links={{this.links}} <Posts::LinksTable
@updateLink={{this.updateLink}} @links={{this.links}}
@showSuccess={{this.showSuccess}} @updateLink={{this.updateLink}}
/> @showSuccess={{this.showSuccess}}
/>
{{/if}}
{{/if}} {{/if}}
{{/if}}
{{#if this.showMentions }} {{#if this.showMentions }}
<div class="pa4"> <div class="gh-post-analytics-box gh-post-analytics-mentions">
<h3>Mentions</h3> <h3 class="gh-post-analytics-mentions-header">Mentions</h3>
<div> <div class="gh-post-analytics-mentions-list">
<div>
{{#if this.mentions}} {{#if this.mentions}}
{{#each this.mentions as |mention|}} {{#each this.mentions as |mention|}}
<div class="flex"> <a href="{{mention.source}}" class="gh-post-analytics-mention" rel="noreferrer noopener" target="_blank">
<img src="assets/img/orb-squircle.png" alt="Ghost" class="w5 h5 mr2 flex-shrink-0" /> <img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0" />
<div class="flex flex-column"> <span class="gh-post-analytics-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.source}}</span>
<span class="gh-dashboard-list-text">{{if mention.sourceSiteTitle mention.sourceSiteTitle mention.source}}</span> <span class="gh-post-analytics-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
<span>{{moment-from-now mention.timestamp}}</span> </a>
</div>
</div>
{{/each}} {{/each}}
{{else}} {{else}}
<div> <div>
@ -148,10 +146,12 @@
</div> </div>
{{/if}} {{/if}}
</div> </div>
<div class="gh-dashboard-list-footer">
<LinkTo @route="mentions">View all mentions &rarr;</LinkTo>
</div>
</div> </div>
<a href="#">See all mentions</a> {{/if}}
</div> </div>
{{/if}}
<div class="gh-post-analytics-box resources"> <div class="gh-post-analytics-box resources">
<a href="https://ghost.org/help/post-analytics/" target="_blank" class="gh-post-analytics-resource" rel="noopener noreferrer"> <a href="https://ghost.org/help/post-analytics/" target="_blank" class="gh-post-analytics-resource" rel="noopener noreferrer">

4
ghost/admin/app/styles/app-dark.css
View file

@ -1424,7 +1424,9 @@ kbd {
/* Post Analytics */ /* Post Analytics */
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-newsletter-clicks, .feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-newsletter-clicks,
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution { .feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution,
.gh-post-analytics-box.gh-post-analytics-mentions
{
background: #101114; background: #101114;
border-color: #26282b; border-color: #26282b;
} }

72
ghost/admin/app/styles/layouts/content.css
View file

@ -706,7 +706,8 @@
} }
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-newsletter-clicks, .feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-newsletter-clicks,
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution { .feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution,
.gh-post-analytics-box.gh-post-analytics-mentions {
flex: 1; flex: 1;
border: 1px solid #ebeef0; border: 1px solid #ebeef0;
padding: 28px 24px 24px; padding: 28px 24px 24px;
@ -753,7 +754,7 @@
gap: 24px; gap: 24px;
} }
.gh-newsletter-clicks-header { .gh-newsletter-clicks-header, .gh-mentions-header {
align-items: center; align-items: center;
font-size: 1.55rem; font-size: 1.55rem;
font-weight: 700; font-weight: 700;
@ -1893,3 +1894,70 @@
padding: 0 0 24px; padding: 0 0 24px;
} }
} }
.gh-post-analytics-split {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr;
}
.gh-post-analytics-split.gh-post-analytics-with-mentions {
grid-template-columns: 1fr 1fr;
}
.gh-post-analytics-mentions {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.gh-post-analytics-mentions-header {
font-size: 1.55rem;
font-weight: 700;
line-height: 1em;
margin: 0 0 8px;
padding: 0;
color: var(--darkgrey);
white-space: nowrap;
letter-spacing: -.3px;
}
.gh-post-analytics-mentions-list {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.gh-post-analytics-mention {
display: grid;
grid-template-columns: 20px auto;
grid-template-rows: 20px auto;
grid-column-gap: 8px;
padding: 4px 0;
flex-direction: column;
padding: 10px 0;
}
.gh-post-analytics-mention-title {
color: var(--darkgrey);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gh-post-analytics-mention-timestamp {
color: var(--midlightgrey);
font-size: 1.3rem;
font-weight: 500;
padding-left: 28px;
white-space: nowrap;
}
.gh-post-analytics-mentions .gh-dashboard-list-footer {
margin-top: auto;
}