TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

Moving the post analytics layout closer to new design

Browse Source 
- Newsletter clicks module has new header and box
- Source attribution module has new header and box
- Resources have new headers inside the box
- New split layout if there are two modules side-by-side

refs https://github.com/TryGhost/Team/issues/2119
This commit is contained in:
James Morris 2022-10-20 13:07:13 +01:00
parent adf10f0e76
commit 40b8a838ae
3 changed files with 131 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ghost/admin/app/components/posts/analytics.hbs
View File

@ -1,4 +1,4 @@
<section class="gh-canvas" {{did-insert this.loadData}}>
<section class="gh-canvas {{if (feature "audienceFeedback") "feature-audienceFeedback"}}" {{did-insert this.loadData}}>
<GhCanvasHeader class="gh-canvas-header gh-post-analytics-header">
<div class="flex flex-column flex-grow-1">
<div class="gh-canvas-breadcrumb">
@ -89,34 +89,35 @@
</Tabs::Tabs>
{{#if this.isLoaded }}
{{#if this.showLinks }}
{{#if (is-empty this.links) }}
{{!-- Empty state --}}
{{else}}
<Posts::LinksTable @links={{this.links}} @updateLink={{this.updateLink}} />
{{/if}}
{{/if}}
{{#if this.showSources }}
{{#if (is-empty this.sources) }}
{{!-- Empty state --}}
{{else}}
<h4 class="gh-main-section-header small bn">
Growth from this post
</h4>
<div class="gh-post-analytics-box column">
<div class="gh-attribution-box">
<div class="gh-attribution-table-column">
<MemberAttribution::SourceAttributionTable
@sources={{this.sources}}
@sortColumn={{this.sortColumn}}
@setSortColumn={{this.setSortColumn}}
/>
<div class="gh-post-analytics-split">
{{#if this.showSources }}
<div class="gh-post-analytics-box column gh-post-analytics-source-attribution">
<h3 class="gh-dashboard-metric-label">Post growth</h3>
{{#if (is-empty this.sources) }}
<div class="attribution-list-empty">
{{svg-jar "members-outline"}}
<h4>No new members for this post</h4>
<p>Once someone signs up, you'll be able to see where they came from here.</p>
</div>
</div>
{{else}}
<MemberAttribution::SourceAttributionTable
@sources={{this.sources}}
@sortColumn={{this.sortColumn}}
@setSortColumn={{this.setSortColumn}}
class="gh-dashboard-attribution-list gh-dashboard-list"
/>
{{/if}}
</div>
{{/if}}
{{/if}}
{{#if this.showLinks }}
{{#if (is-empty this.links) }}
{{!-- Empty state --}}
{{else}}
<Posts::LinksTable @links={{this.links}} @updateLink={{this.updateLink}} />
{{/if}}
{{/if}}
</div>
<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">

19
ghost/admin/app/components/posts/links-table.hbs
View File

@ -1,7 +1,10 @@
<h4 class="gh-main-section-header small bn">
Newsletter clicks
</h4>
<div class="gh-post-analytics-box column">
{{#if (not (feature "audienceFeedback"))}}
<h4 class="gh-main-section-header small bn">
Newsletter clicks
</h4>
{{/if}}
<div class="gh-post-analytics-box column gh-post-analytics-newsletter-clicks">
{{#if (feature "audienceFeedback")}}<h3 class="gh-post-analytics-header">Newsletter clicks</h3>{{/if}}
<div class="gh-links-list">
<div class="gh-links-list-header">
{{#if (and this.showPagination (feature "fixNewsletterLinks")) }}
@ -9,14 +12,15 @@
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
</div>
{{else}}
<div class="gh-links-list-title">
Link
</div>
<div class="gh-links-list-title">
{{#if (not (feature "audienceFeedback"))}}Link{{/if}}
</div>
{{/if}}
<div class="gh-links-list-title">
No. of Members
</div>
</div>
<div class="gh-links-list-items">
{{#each this.visibleLinks as |link|}}
<div class="gh-links-list-item {{if (eq this.editingLink link.link.link_id) "gh-links-list-item-edit-mode"}}">
{{#if (feature "fixNewsletterLinks")}}
@ -64,6 +68,7 @@
<p class="gh-links-list-clicks">{{link.count.clicks}}</p>
</div>
{{/each}}
</div>
{{#if this.showPagination }}
<div class="gh-links-pagination">
{{#if (feature "fixNewsletterLinks")}}

93
ghost/admin/app/styles/layouts/content.css
View File

@ -797,6 +797,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
}
.gh-post-analytics-box {
flex: 1;
position: relative;
display: flex;
margin: 0 0 2.4rem;
@ -805,6 +806,43 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
border-radius: var(--border-radius);
}
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-newsletter-clicks,
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution {
flex: 1;
border: 1px solid #ebeef0;
padding: 28px 24px 24px;
border-radius: 6px;
display: flex;
flex-direction: column;
position: relative;
align-items: stretch;
background: #ffffff;
}
.feature-audienceFeedback .gh-post-analytics-box .gh-links-list-header .gh-links-pagination-progress {
visibility: hidden;
}
.feature-audienceFeedback .gh-post-analytics-box .gh-links-list {
margin: -20px 0 0;
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
.feature-audienceFeedback .gh-post-analytics-box .gh-links-pagination {
width: 100%;
margin-left: 0;
margin-right: 0;
padding: 1.6rem 0;
border-color: var(--whitegrey);
background: transparent;
}
.gh-post-analytics-box.column {
display: flex;
flex-direction: column;
@ -816,6 +854,24 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
gap: 24px;
}
.gh-post-analytics-split {
display: flex;
gap: 2.4rem;
min-height: 400px;
}
.gh-post-analytics-header {
align-items: center;
font-size: 1.55rem;
font-weight: 700;
line-height: 1em;
margin: 0 0 8px;
padding: 0;
color: var(--black);
white-space: nowrap;
letter-spacing: -.3px;
}
.gh-post-analytics-resource {
padding: 2.4rem;
background: var(--white);
@ -933,6 +989,26 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
opacity: 0.7;
}
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution .gh-dashboard-list-title-sources {
visibility: hidden;
}
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution .gh-dashboard-list-body {
justify-content: flex-start;
padding-top: 0;
padding-bottom: 0;
}
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution .gh-dashboard-list-item {
padding-top: 12px;
padding-bottom: 11px;
border-bottom: 1px solid var(--whitegrey);
}
.feature-audienceFeedback .gh-post-analytics-box.gh-post-analytics-source-attribution .gh-dashboard-list-item:last-child {
border-bottom: none;
}
.gh-attribution-box {
margin: 0;
padding: 24px;
@ -975,6 +1051,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
}
.gh-links-list {
flex: 1;
margin: 0;
padding: 20px;
background: var(--white);
@ -982,7 +1059,16 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
border-radius: var(--border-radius);
}
.gh-links-list-items {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 1.6rem 0;
}
.gh-links-list-item {
flex: 0;
display: grid;
grid-template-columns: auto minmax(min-content,max-content);
align-items: center;
@ -1021,7 +1107,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
.gh-links-list-item a {
margin: 0;
padding: 0;
padding: 0 20px 0 0;
color: var(--darkgrey);
text-overflow: ellipsis;
white-space: nowrap;
@ -1547,6 +1633,11 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
.gh-tabs-analytics p {
font-size: 1.6rem;
}
.gh-post-analytics-split {
flex-direction: column;
gap: 0;
}
}
@media (max-width: 440px) {