mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-15 03:01:37 -05:00
Updated design of the post analytics page
Refs https://github.com/TryGhost/Team/issues/1893 - Added html structure with hardcoded date to get a sense of look & feel of the page
This commit is contained in:
Sanne de Vries
parent
6482d2d4c5
commit
70ae355ba6
3 changed files with 179 additions and 6 deletions
|
|
@ -704,3 +704,124 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
|
|||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* Post stats
|
||||
/* --------------------------------------------------------- */
|
||||
|
||||
.gh-post-stats-box {
|
||||
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;
|
||||
}
|
||||
|
||||
.gh-post-stats-box.grey {
|
||||
border: none;
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.gh-post-stats-title {
|
||||
margin: 0;
|
||||
padding: 0 0 2px;
|
||||
color: var(--black);
|
||||
font-size: 1.6rem;
|
||||
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);
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.gh-post-stats-item:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.gh-post-stats-item h3 {
|
||||
margin: 0 0 10px;
|
||||
color: var(--black);
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.4px;
|
||||
line-height: 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-post-stats-item p {
|
||||
margin: 0;
|
||||
color: var(--midgrey);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.gh-post-stats-item p.strong {
|
||||
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-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 -2.4rem;
|
||||
padding: 1rem 2.4rem;
|
||||
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;
|
||||
color: var(--darkgrey);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-links-list-item a:hover {
|
||||
color: var(--midgrey-d2);
|
||||
}
|
||||
|
||||
.gh-links-list-clicks {
|
||||
margin: 0;
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
|
@ -670,7 +670,6 @@ Dashboard List */
|
|||
color: var(--midgrey);
|
||||
padding: 0 20px 8px 0;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-dashboard-list-body {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,60 @@
|
|||
<section class="gh-canvasg">
|
||||
<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
|
||||
</h2>
|
||||
</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>
|
||||
</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>https://vanschneider.com/blog/#/portal/signup</a>
|
||||
<p class="gh-links-list-clicks">18</p>
|
||||
</div>
|
||||
<div class="gh-links-list-item">
|
||||
<a>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>https://vanschneider.com/blog/#/portal/unsubscribe</a>
|
||||
<p class="gh-links-list-clicks">3</p>
|
||||
</div>
|
||||
<div class="gh-links-list-item">
|
||||
<a>https://vanschneider.com/blog/#/portal/signin</a>
|
||||
<p class="gh-links-list-clicks">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>{{this.post.title}}</h1>
|
||||
<p>This is the analytics page for post {{this.post.id}}</p>
|
||||
<p>Sends: {{this.post.email.emailCount}}</p>
|
||||
<p>Opened: {{this.post.email.openedCount}}</p>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue