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

Updated members chart style

Browse Source
This commit is contained in:
Peter Zimon 2021-02-05 15:43:20 +01:00
parent f57438159c
commit abdebe4727
4 changed files with 63 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ghost/admin/app/components/gh-members-chart.hbs
View File

@ -3,8 +3,8 @@
>
{{!-- Chart title/filter graph --}}
<div class="flex-auto gh-content-box black gh-members-chart-box">
<div class="flex justify-between items-center gh-members-chart-header">
<div class="gh-members-chart-box">
<div class="gh-members-chart-header">
<h2 class="gh-members-chart-summary-heading">Total members</h2>
<div class="view-actions">
<div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
@ -36,29 +36,29 @@
@height={{300}} />
{{/if}}
</div>
<div class="flex justify-between pa4 pt0 pb2 nt1">
<span class="f8 midlightgrey">{{this.startDateLabel}}</span>
<span class="f8 midlightgrey">Today</span>
<div class="gh-members-chart-xlabels">
<span>{{this.startDateLabel}}</span>
<span>Today</span>
</div>
</div>
{{!-- Summary --}}
<div class="gh-content-box grey gh-members-chart-summary flex flex-column justify-between">
<div class="flex-auto flex flex-column justify-center items-start pa4">
<div class="gh-content-box vertical gh-members-chart-summary">
<section>
<h3 class="gh-members-chart-summary-heading">Total Members</h3>
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
</div>
<div class="flex-auto flex flex-column justify-center items-start pa4">
</section>
<section>
{{#if (eq this.selectedRange.days "all-time")}}
<h3 class="gh-members-chart-summary-heading">All time signups</h3>
{{else}}
<h3 class="gh-members-chart-summary-heading">Signed up in the last {{this.selectedRange.days}} days</h3>
{{/if}}
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
</div>
<div class="flex-auto flex flex-column justify-center items-start pa4">
</section>
<section>
<h3 class="gh-members-chart-summary-heading">Signed up today</h3>
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
</div>
</section>
</div>
</div>

13
ghost/admin/app/components/gh-members-chart.js
View File

@ -101,10 +101,10 @@ export default Component.extend({
cubicInterpolationMode: 'monotone',
data: dateValues,
fill: false,
backgroundColor: '#B5FF18',
backgroundColor: '#45C32E',
pointRadius: 0,
pointHitRadius: 10,
borderColor: '#B5FF18',
borderColor: '#45C32E',
borderJoinStyle: 'miter'
}]
});
@ -133,7 +133,7 @@ export default Component.extend({
intersect: false,
mode: 'index',
displayColors: false,
backgroundColor: '#24272B',
backgroundColor: '#15171A',
xPadding: 7,
yPadding: 7,
cornerRadius: 5,
@ -165,8 +165,8 @@ export default Component.extend({
labelString: 'Date',
gridLines: {
drawTicks: false,
color: (this.nightShift ? '#333F44' : '#394047'),
zeroLineColor: (this.nightShift ? '#333F44' : '#394047')
color: (this.nightShift ? '#333F44' : '#CED4D9'),
zeroLineColor: (this.nightShift ? '#333F44' : '#CED4D9')
},
ticks: {
display: false,
@ -174,6 +174,7 @@ export default Component.extend({
minRotation: 0,
padding: 6,
autoSkip: false,
fontColor: '#626D79',
maxTicksLimit: 10,
callback: function (value, index, values) {
let step = (values.length - 1) / (maxTicksAllowed);
@ -203,7 +204,7 @@ export default Component.extend({
},
ticks: {
maxTicksLimit: 5,
fontColor: '#9baeb8',
fontColor: '#626D79',
padding: 8,
precision: 0,
callback: function (value) {

44
ghost/admin/app/styles/layouts/members.css
View File

@ -173,13 +173,19 @@ p.gh-members-list-email {
}
.gh-members-chart-box {
margin-right: var(--main-layout-area-padding);
flex: 1 1 auto;
min-width: 0;
min-height: 0;
border: 1px solid var(--main-color-area-divider);
border-left: none;
}
.gh-members-chart-header {
padding: 12px 7px 12px 12px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 12px 0;
margin-bottom: 10px;
border-bottom: var(--main-color-area-divider) 1px solid;
}
.gh-members-chart-header .gh-contentfilter {
@ -188,12 +194,9 @@ p.gh-members-list-email {
}
.gh-members-chart-header .gh-contentfilter-type .gh-contentfilter-menu-trigger {
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 3px;
height: 16px;
padding: 0 8px;
background: var(--white);
color: var(--black);
}
.gh-members-chart-dropdown {
@ -202,15 +205,38 @@ p.gh-members-list-email {
.gh-members-chart-container {
height: 186px;
margin: 0;
padding: 4px 7px 11px 2px;
margin: 0 0 0 -16px;
padding: 4px 20px 11px 0;
}
.gh-members-chart-xlabels {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.3rem;
color: var(--middarkgrey);
padding: 0 28px 0 0;
}
.gh-members-chart-summary {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 24%;
min-width: 244px;
}
.gh-members-chart-summary section {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 20px;
}
.gh-members-chart-summary-heading {
font-size: 1.2rem;
text-transform: uppercase;

9
ghost/admin/app/styles/patterns/boxes.css
View File

@ -85,4 +85,13 @@
border: none;
background: var(--black);
color: var(--white);
}
.gh-content-box.vertical {
background: none;
border-left: none;
border-right: none;
border-top: 1px solid var(--main-color-area-divider);
border-bottom: 1px solid var(--main-color-area-divider);
border-radius: 0;
}