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

Fixed up the post analytics page so it didn't break at narrower viewports

Browse Source 
- Some layout problems at narrower viewports
- Followed dashboard convention with stacking metrics when narrow
- Stacking resources too

refs https://github.com/TryGhost/Team/issues/1937
This commit is contained in:
James Morris 2022-09-22 12:19:51 +01:00
parent 98fc808e6e
commit 433842b2f2
2 changed files with 70 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -621,6 +621,10 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
.pages-list .gh-list-nodata {
display: none;
}
.gh-post-analytics-item .hide-when-small {
display: none;
}
}
@media (max-width: 800px) {
@ -738,10 +742,9 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
.gh-post-analytics-box {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
display: flex;
margin: 0 0 2.4rem;
padding: 2.4rem;
padding: 2.8rem 2.4rem;
background: var(--main-color-content-greybg);
border-radius: var(--border-radius);
}
@ -752,8 +755,9 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
}
.gh-post-analytics-box.resources {
grid-template-columns: 1fr 1fr;
grid-gap: 24px;
display: flex;
flex-direction: row;
gap: 24px;
}
.gh-post-analytics-resource {
@ -777,6 +781,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
}
.gh-post-analytics-resource {
flex: 1;
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: 24px;
@ -811,8 +816,11 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
}
.gh-post-analytics-item {
border-left: 1px solid var(--whitegrey-d2);
flex: 1;
border-left: 1px solid var(--whitegrey-d1);
padding-left: 2rem;
padding-right: 2rem;
white-space: nowrap;
}
.gh-post-analytics-item:first-child {
@ -821,15 +829,21 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
}
.gh-post-analytics-item h3 {
margin: 0 0 10px;
margin: 0 0 4px;
color: var(--black);
font-size: 2.2rem;
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -.4px;
line-height: 1em;
white-space: nowrap;
}
.gh-post-analytics-item h3 sup {
top: -0.2em;
font-size: 1.7rem;
margin: 0 0 0 2px;
}
.gh-post-analytics-item p {
margin: 0;
color: var(--midgrey);
@ -842,6 +856,10 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
font-weight: 600;
}
.gh-post-analytics-item p:first-letter {
text-transform: uppercase;
}
.gh-links-list {
margin: 0;
padding: 20px;
@ -1027,4 +1045,43 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
.gh-posts-list-item-labs .gh-post-list-cta svg path {
stroke-width: 2;
}
@media screen and (max-width: 1080px) {
.gh-post-analytics-box.resources {
flex-direction: column;
}
}
@media screen and (max-width: 1000px) {
.gh-post-analytics-box {
flex-direction: column;
}
.gh-post-analytics-item {
border-left: 0 none;
border-bottom: 1px solid var(--whitegrey-d1);
padding-left: 0;
padding-bottom: 2rem;
padding-top: 2rem;
}
.gh-post-analytics-item:first-child {
padding-top: 0;
}
.gh-post-analytics-item:last-child {
padding-bottom: 0;
border-bottom: 0 none;
}
.gh-post-analytics-item h3 {
font-size: 2.8rem;
margin-bottom: 2px;
}
.gh-post-analytics-item h3 sup {
top: -0.3em;
font-size: 1.8rem;
}
}

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

@ -30,7 +30,7 @@
on
{{moment-format publishedAt "D MMM YYYY"}}
at
{{moment-format publishedAt "HH:mm"}}.
{{moment-format publishedAt "HH:mm"}}
{{/let}}
</p>
</GhCanvasHeader>
@ -44,20 +44,20 @@
<p>Sent</p>
</div>
<div class="gh-post-analytics-item">
<h3>{{this.post.email.openRate}}%</h3>
<h3>{{this.post.email.openRate}}<sup>%</sup></h3>
<p><strong>{{format-number this.post.email.openedCount}}</strong> opened</p>
</div>
<div class="gh-post-analytics-item">
<h3>{{this.post.clickRate}}%</h3>
<h3>{{this.post.clickRate}}<sup>%</sup></h3>
<p><strong>{{format-number this.post.count.clicks}}</strong> clicked</p>
</div>
<div class="gh-post-analytics-item">
<h3>{{format-number this.post.count.signups}}</h3>
<p>Free {{gh-pluralize this.post.count.signups "signup" without-count=true}}</p>
<p><span class="hide-when-small">Free </span>{{gh-pluralize this.post.count.signups "signup" without-count=true}}</p>
</div>
<div class="gh-post-analytics-item">
<h3>{{format-number this.post.count.conversions}}</h3>
<p>Paid {{gh-pluralize this.post.count.conversions "conversion" without-count=true}}</p>
<p><span class="hide-when-small">Paid </span>{{gh-pluralize this.post.count.conversions "conversion" without-count=true}}</p>
</div>
</div>