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

Removed tabbed look from post analytics page with only one metric

Browse source 
refs https://github.com/TryGhost/Team/issues/2620
This commit is contained in:
Sodbileg Gansukh 2023-03-16 19:51:04 +08:00
parent 0479b1a848
commit 66b749ba90
2 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,7 +41,7 @@
</div>
</GhCanvasHeader>
<Tabs::Tabs class="gh-tabs-analytics" @forceRender={{true}} as |tabs|>
<Tabs::Tabs class="gh-tabs-analytics {{if (eq this.post.hasBeenEmailed null) "no-tabs"}}" @forceRender={{true}} as |tabs|>
{{#if this.post.hasBeenEmailed}}
<tabs.tab>
<h3>{{svg-jar "analytics-tab-sent-large"}}{{format-number this.post.email.emailCount}}</h3>
@ -104,7 +104,14 @@
{{#if this.post.showAttributionAnalytics }}
<tabs.tab>
<h3>{{svg-jar "analytics-tab-conversions-large"}}{{format-number this.post.count.conversions}}</h3>
<h3>
{{svg-jar "analytics-tab-conversions-large"}}
{{#if this.post.hasBeenEmailed}}
{{format-number this.post.count.conversions}}
{{else}}
Conversions
{{/if}}
</h3>
<p>{{svg-jar "analytics-tab-conversions"}}<span class="analytics-tab-label">{{gh-pluralize this.post.count.conversions "Conversions" without-count=true}}</span></p>
</tabs.tab>

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

@ -1517,6 +1517,10 @@
border: 1px solid #ECEEF0;
}
.gh-tabs-analytics.no-tabs {
padding: 28px 24px;
}
.gh-tabs-analytics .tab {
display: flex;
flex-direction: column;
@ -1536,6 +1540,13 @@
border-radius: 5px 5px 0 0;
}
.gh-tabs-analytics.no-tabs .tab-selected {
padding: 0 0 20px;
border: 0;
border-bottom: 1px solid #eceef0;
box-shadow: none;
}
.gh-tabs-analytics .tab-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
@ -1544,6 +1555,11 @@
box-shadow: inset 0 -1px 0 #eceef0;
}
.gh-tabs-analytics.no-tabs .tab-list {
padding: 0;
background: transparent;
}
.gh-tabs-analytics .tab-panel {
display: none;
}
@ -1558,6 +1574,10 @@
min-height: 121px;
}
.gh-tabs-analytics.no-tabs .tab-panel-selected {
padding: 0;
}
.gh-tabs-analytics .tab-list h3 {
display: flex;
flex-direction: row;
@ -1573,6 +1593,13 @@
white-space: nowrap;
}
.gh-tabs-analytics.no-tabs .tab-list h3 {
margin-bottom: 0;
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.5px;
}
.gh-tabs-analytics .tab-list h3 svg {
display: none;
width: 20px;
@ -1596,6 +1623,10 @@
margin: 0;
}
.gh-tabs-analytics.no-tabs .tab-list p {
display: none;
}
.gh-tabs-analytics .tab-list p svg {
width: 16px;
height: 16px;
@ -1972,4 +2003,4 @@
.gh-post-analytics-mentions .gh-dashboard-list-footer a {
font-size: 1.3rem;
}
}