TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 14:03:48 +03:00
Code Issues Projects Releases Wiki Activity

Updated post stats page

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1893
This commit is contained in:
Sanne de Vries 2022-09-14 14:22:25 +01:00
parent 8b24022e5f
commit 50e00a3b4c
4 changed files with 143 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -705,19 +705,40 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
/* Post stats
/* --------------------------------------------------------- */
.gh-post-stats-box {
.gh-post-stats-header {
position: relative;
display: flex;
flex-direction: column;
margin: 0 0 2.4rem;
padding: 2.8rem 2.4rem 2.4rem;
border: 1px solid var(--whitegrey);
border-radius: 6px;
padding: 0 0 1.6rem;
border-bottom: 1px solid var(--whitegrey);
}
.gh-post-stats-box.grey {
border: none;
.gh-canvas-title.gh-post-title {
max-width: 880px;
padding: 12px 0 8px;
font-size: 3.1rem;
overflow: inherit;
white-space: inherit;
}
.gh-post-stats-meta {
margin: 0;
color: var(--midlightgrey-d1);
font-size: 1.35rem;
}
.gh-post-stats-box {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
margin: 0 0 2.4rem;
padding: 2.8rem 2.4rem 2.4rem;
background: var(--main-color-content-greybg);
border-radius: var(--border-radius);
}
.gh-post-stats-box.column {
display: flex;
flex-direction: column;
}
.gh-post-stats-title {
@ -728,23 +749,8 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
font-weight: 600;
}
.gh-post-stats-meta {
margin: 0 0 2.4rem;
color: var(--midgrey);
}
.gh-post-stats {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
padding: 2.8rem 2.4rem 2.4rem;
background: var(--main-bg-color);
border-radius: 6px;
box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1);
}
.gh-post-stats-item {
border-left: 1px solid var(--whitegrey);
border-left: 1px solid var(--whitegrey-d2);
padding-left: 2rem;
}
@ -756,7 +762,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
.gh-post-stats-item h3 {
margin: 0 0 10px;
color: var(--black);
font-size: 2.4rem;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -.4px;
line-height: 1em;
@ -775,34 +781,34 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
font-weight: 600;
}
.gh-links-list-header {
margin: 0 0 12px;
padding: 0 0 8px;
border-bottom: 1px solid var(--whitegrey);
color: var(--midgrey);
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1em;
text-transform: uppercase;
white-space: nowrap;
.gh-links-list {
margin: 0;
padding: 20px;
background: var(--white);
box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1);
border-radius: var(--border-radius);
}
.gh-links-list-item:first-child {
padding-top: 0;
}
.gh-links-list-item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.gh-links-list-item {
display: flex;
justify-content: space-between;
margin: 0 -2.4rem;
padding: 1rem 2.4rem;
padding: 1.6rem 0;
border-bottom: 1px solid var(--whitegrey);
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0;
text-decoration: none;
}
.gh-links-list-item:hover {
background: linear-gradient(315deg,#fafafb 60%,#fff);
}
.gh-links-list-item a {
margin: 0;
padding: 0 32px 0 0;

45
ghost/admin/app/styles/layouts/main.css
View File

@ -1117,6 +1117,45 @@
background: var(--main-color-content-greybg);
}
.gh-canvas-header.stacked {
padding-top: 36px;
}
.gh-canvas-header.stacked .gh-canvas-breadcrumb {
display: flex;
align-items: center;
padding: 6px 0;
color: var(--darkgrey-l1);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: .2px;
background: none;
}
.gh-canvas-header.stacked .gh-canvas-breadcrumb svg {
display: block;
width: 9px;
height: 9px;
margin: 1px 8px 0 0;
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
}
.gh-canvas-header.stacked .gh-canvas-breadcrumb svg path {
stroke: var(--darkgrey-l1);
}
.gh-canvas-header.stacked .gh-canvas-breadcrumb:hover svg {
transform: translateX(-3px)
}
.gh-canvas-header.stacked .gh-canvas-breadcrumb:hover svg path {
stroke: var(--black);
}
.gh-canvas-header.stacked .gh-canvas-breadcrumb:hover {
color: var(--black);
}
.gh-main-grey-gradient .gh-canvas-header {
background: transparent;
position: relative;
@ -1131,6 +1170,12 @@
align-items: center;
}
.gh-canvas-header.stacked .gh-canvas-header-content {
flex-direction: column;
align-items: flex-start;
height: unset;
}
.gh-main-width {
width: 100%;
max-width: var(--main-layout-content-maxwidth);

2
ghost/admin/app/styles/layouts/settings.css
View File

@ -1789,7 +1789,7 @@ p.theme-validation-details {
width: 9px;
height: 9px;
margin: 1px 8px 0 0;
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);;
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
}
.gh-nav-menu-back-button svg path {

97
ghost/admin/app/templates/posts/analytics.hbs
View File

@ -1,59 +1,60 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title">
<LinkTo @route="posts">Posts</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
Stats
<GhCanvasHeader class="gh-canvas-header stacked gh-post-stats-header">
<LinkTo @route="posts" class="gh-canvas-breadcrumb">{{svg-jar "arrow-left-small"}} Posts</LinkTo>
<h2 class="gh-canvas-title gh-post-title">
{{this.post.title}}
</h2>
<p class="gh-post-stats-meta">Published and sent on 12 Feb 2022 at 11:57 to free subscribers</p>
</GhCanvasHeader>
<div class="gh-post-stats-box grey">
<p class="gh-post-stats-title">{{this.post.title}}</p>
<p class="gh-post-stats-meta">Published and sent on 12 Feb 2022 at 11:57 to free subscribers</p>
<div class="gh-post-stats">
<div class="gh-post-stats-item">
<h3>20.251</h3>
<p>Sent</p>
</div>
<div class="gh-post-stats-item">
<h3>60%</h3>
<p><strong>12.200</strong> opened</p>
</div>
<div class="gh-post-stats-item">
<h3>15%</h3>
<p><strong>3.038</strong> clicked</p>
</div>
<div class="gh-post-stats-item">
<h3>16</h3>
<p>Free signups</p>
</div>
<div class="gh-post-stats-item">
<h3>10</h3>
<p>Paid conversions</p>
</div>
<h4 class="gh-main-section-header small bn">
Engagement
</h4>
<div class="gh-post-stats-box">
<div class="gh-post-stats-item">
<h3>20.251</h3>
<p>Sent</p>
</div>
<div class="gh-post-stats-item">
<h3>60%</h3>
<p><strong>12.200</strong> opened</p>
</div>
<div class="gh-post-stats-item">
<h3>15%</h3>
<p><strong>3.038</strong> clicked</p>
</div>
<div class="gh-post-stats-item">
<h3>16</h3>
<p>Free signups</p>
</div>
<div class="gh-post-stats-item">
<h3>10</h3>
<p>Paid conversions</p>
</div>
</div>
<div class="gh-post-stats-box gh-links-list">
<div class="gh-links-list-header">
Link clicks
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/signup</a>
<p class="gh-links-list-clicks">18</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/an-unsolicited-portfolio-review-featuring-2/</a>
<p class="gh-links-list-clicks">16</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/unsubscribe</a>
<p class="gh-links-list-clicks">3</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/signin</a>
<p class="gh-links-list-clicks">0</p>
<h4 class="gh-main-section-header small bn">
Link clicks
</h4>
<div class="gh-post-stats-box column">
<div class="gh-links-list">
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/signup</a>
<p class="gh-links-list-clicks">18</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/an-unsolicited-portfolio-review-featuring-2/</a>
<p class="gh-links-list-clicks">16</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/unsubscribe</a>
<p class="gh-links-list-clicks">3</p>
</div>
<div class="gh-links-list-item">
<a href="#">https://vanschneider.com/blog/#/portal/signin</a>
<p class="gh-links-list-clicks">0</p>
</div>
</div>
</div>