mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Added in dark mode grid lines for charts and futher style tweaks to the new dashboard
refs: https://github.com/TryGhost/Team/issues/1462 - added in dynamic dark mode grid lines for the charts - added in some subtle other dark mode tweaks for borders - limited the recent posts to 3 instead of 5
This commit is contained in:
James Morris
parent
e4891e3462
commit
356a1ead2a
5 changed files with 86 additions and 57 deletions
|
|
@ -30,6 +30,7 @@ const PAID_OPTIONS = [{
|
|||
|
||||
export default class Anchor extends Component {
|
||||
@service dashboardStats;
|
||||
@service feature;
|
||||
@tracked chartDisplay = 'total';
|
||||
@tracked paidOptionSelected = 'paid';
|
||||
|
||||
|
|
@ -238,6 +239,16 @@ export default class Anchor extends Component {
|
|||
}
|
||||
|
||||
get chartOptions() {
|
||||
let maxNumberOfTicks = 7;
|
||||
|
||||
if (this.selectedDaysOption.value === 30) {
|
||||
maxNumberOfTicks = 15;
|
||||
}
|
||||
|
||||
if (this.selectedDaysOption.value === 90 || this.selectedDaysOption.value === 'all') {
|
||||
maxNumberOfTicks = 20;
|
||||
}
|
||||
|
||||
if (this.chartDisplay === 'breakdown') {
|
||||
return {
|
||||
responsive: true,
|
||||
|
|
@ -313,7 +324,7 @@ export default class Anchor extends Component {
|
|||
minRotation: 0,
|
||||
padding: 8,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 7
|
||||
maxTicksLimit: maxNumberOfTicks
|
||||
},
|
||||
type: 'time',
|
||||
time: {
|
||||
|
|
@ -394,7 +405,7 @@ export default class Anchor extends Component {
|
|||
display: true,
|
||||
drawBorder: false,
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'rgba(200, 204, 217, 0.75)',
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
zeroLineWidth: 1
|
||||
},
|
||||
ticks: {
|
||||
|
|
@ -409,13 +420,13 @@ export default class Anchor extends Component {
|
|||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(200, 204, 217, 0.75)',
|
||||
color: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
borderDash: [4,4],
|
||||
display: true,
|
||||
drawBorder: true,
|
||||
drawTicks: false,
|
||||
zeroLineWidth: 1,
|
||||
zeroLineColor: 'rgba(200, 204, 217, 0.75)',
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
zeroLineBorderDash: [4,4]
|
||||
},
|
||||
ticks: {
|
||||
|
|
@ -424,10 +435,10 @@ export default class Anchor extends Component {
|
|||
minRotation: 0,
|
||||
padding: 14,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 8,
|
||||
maxTicksLimit: maxNumberOfTicks,
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif',
|
||||
fontSize: 11,
|
||||
fontColor: '#7c8b9a'
|
||||
fontColor: '#ABB4BE'
|
||||
},
|
||||
type: 'time',
|
||||
time: {
|
||||
|
|
@ -450,11 +461,11 @@ export default class Anchor extends Component {
|
|||
}
|
||||
|
||||
get chartHeight() {
|
||||
return 300;
|
||||
return 275;
|
||||
}
|
||||
|
||||
get chartHeightSmall() {
|
||||
return 250;
|
||||
return 225;
|
||||
}
|
||||
|
||||
calculatePercentage(from, to) {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {inject as service} from '@ember/service';
|
|||
|
||||
export default class EmailOpenRate extends Component {
|
||||
@service dashboardStats;
|
||||
@service feature;
|
||||
|
||||
/**
|
||||
* Call this method when you need to fetch new data from the server.
|
||||
|
|
@ -110,13 +111,13 @@ export default class EmailOpenRate extends Component {
|
|||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(200, 204, 217, 0.75)',
|
||||
color: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
borderDash: [4,4],
|
||||
display: true,
|
||||
drawBorder: true,
|
||||
drawTicks: false,
|
||||
zeroLineWidth: 1,
|
||||
zeroLineColor: 'rgba(200, 204, 217, 0.75)',
|
||||
zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
|
||||
zeroLineBorderDash: [4,4]
|
||||
},
|
||||
ticks: {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ export default class RecentPosts extends Component {
|
|||
|
||||
@action
|
||||
async loadPosts() {
|
||||
this.posts = await this.store.query('post', {limit: 5, filter: 'status:published', order: 'published_at desc'});
|
||||
this.posts = await this.store.query('post', {limit: 3, filter: 'status:published', order: 'published_at desc'});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1102,6 +1102,12 @@ kbd {
|
|||
|
||||
|
||||
/* Dashboard v5 */
|
||||
.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected {
|
||||
.gh-dashboard5 .gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected {
|
||||
border-color: #394047;
|
||||
}
|
||||
|
||||
.gh-dashboard5 .gh-dashboard5-list-header,
|
||||
.gh-dashboard5 .gh-dashboard5-list-item,
|
||||
.gh-dashboard5 .gh-dashboard5-list-footer {
|
||||
border-color: #394047;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ Dashboard v5 Layout */
|
|||
}
|
||||
|
||||
.gh-dashboard5-row:last-child {
|
||||
padding-top: 16px;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-section {
|
||||
|
|
@ -163,13 +163,13 @@ Dashboard v5 Layout */
|
|||
}
|
||||
|
||||
.gh-dashboard5-select .ember-power-select-selected-item {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: .3px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
color: var(--midlightgrey);
|
||||
color: var(--midgrey);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -266,12 +266,13 @@ Dashboard v5 Metric */
|
|||
|
||||
.gh-dashboard5-metric-label {
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: .2px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .3px;
|
||||
line-height: 1em;
|
||||
margin: 0 0 14px;
|
||||
margin: 0 0 12px;
|
||||
padding: 0;
|
||||
color: var(--midgrey);
|
||||
white-space: nowrap;
|
||||
|
|
@ -293,7 +294,7 @@ Dashboard v5 Metric */
|
|||
.gh-dashboard5-metric-value {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 2.8rem;
|
||||
font-size: 2.6rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.1px;
|
||||
line-height: 1em;
|
||||
|
|
@ -303,7 +304,7 @@ Dashboard v5 Metric */
|
|||
}
|
||||
|
||||
.gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
|
||||
font-size: 3.6rem;
|
||||
font-size: 3.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -399,7 +400,7 @@ Dashboard v5 List */
|
|||
}
|
||||
|
||||
.gh-dashboard5-list-item > span {
|
||||
font-size: 2rem;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -458,7 +459,7 @@ Dashboard v5 Section Anchor */
|
|||
cursor: pointer;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 20px 16px 24px 12px;
|
||||
padding: 20px 16px 24px 16px;
|
||||
margin: 2px 4px 2px 2px;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
|
|
@ -518,15 +519,6 @@ Dashboard v5 Section Anchor */
|
|||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Email */
|
||||
|
||||
.gh-dashboard5-email {
|
||||
grid-area: email;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Engagement */
|
||||
|
||||
|
|
@ -535,6 +527,50 @@ Dashboard v5 Section Engagement */
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.gh-dashboard5-engagement .gh-dashboard5-box {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-engagement .gh-dashboard5-select {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Email */
|
||||
|
||||
.gh-dashboard5-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email .gh-dashboard5-box {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Email Open Rate */
|
||||
|
||||
.gh-dashboard5-email-open-rate {
|
||||
grid-area: email-open-rate;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-box {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-chart {
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-chart-ticks {
|
||||
padding: 0 16px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-metric-label {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Recent Posts */
|
||||
|
|
@ -559,12 +595,7 @@ Dashboard v5 Section Recent Posts */
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-posts .gh-dashboard5-list-item:nth-child(4),
|
||||
.gh-dashboard5-recent-posts .gh-dashboard5-list-item:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-posts .gh-dashboard5-list-item a > span{
|
||||
.gh-dashboard5-recent-posts .gh-dashboard5-list-item a > span {
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
color: var(--darkgrey);
|
||||
|
|
@ -640,26 +671,6 @@ Dashboard v5 Section Recent Activity */
|
|||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Email Open Rate */
|
||||
|
||||
.gh-dashboard5-email-open-rate {
|
||||
grid-area: email-open-rate;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-chart {
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-chart-ticks {
|
||||
padding: 0 16px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-metric-label {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Help */
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue