Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Adjustments to tooltips for all charts in new dashboard so more visually pleasing

Browse source 
refs: https://github.com/TryGhost/Team/issues/1547

- added padding and margins to all charts so tooltips don't clip
This commit is contained in:
James Morris 2022-04-22 14:49:03 +01:00
parent fe02e77bd6
commit 53a393f3e1
5 changed files with 37 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/dashboard/v5/charts/anchor.js
View file

@ -185,7 +185,9 @@ export default class Anchor extends Component {
layout: {
padding: {
top: 2,
bottom: 2
bottom: 2,
left: 16,
right: 16
}
},
hover: {

6
ghost/admin/app/components/dashboard/v5/charts/mrr.js
View file

@ -94,8 +94,10 @@ export default class Mrr extends Component {
},
layout: {
padding: {
top: 2,
bottom: 2
top: 4,
bottom: 2,
left: 16,
right: 16
}
},
hover: {

8
ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js
View file

@ -83,6 +83,14 @@ export default class PaidBreakdown extends Component {
legend: {
display: false
},
layout: {
padding: {
top: 8,
bottom: 0,
left: 16,
right: 16
}
},
hover: {
onHover: function (e) {
e.target.style.cursor = 'pointer';

8
ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
View file

@ -128,13 +128,13 @@ export default class PaidMix extends Component {
},
layout: {
padding: (this.mode === 'cadence' ? {
left: -9,
right: 5,
left: 7,
right: 21,
top: 10
} : {
top: 10,
left: -8,
right: -8
left: 23,
right: 40
})
},
animation: {

28
ghost/admin/app/styles/layouts/dashboard-v5.css
View file

@ -648,11 +648,13 @@ Dashboard v5 Section Anchor */
.gh-dashboard5-anchor .gh-dashboard5-chart {
flex-direction: column;
margin-top: 24px;
margin-left: -16px;
margin-right: -16px;
}
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks {
flex-direction: row;
padding: 10px 0;
padding: 10px 16px;
font-size: 1.2rem;
color: var(--midlightgrey);
}
@ -661,21 +663,27 @@ Dashboard v5 Section Anchor */
margin-top: 48px;
}
.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-select {
top: -8px;
right: -18px;
}
.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-chart {
margin-top: 0;
}
.gh-dashboard5-anchor .gh-dashboard5-mrr .gh-dashboard5-chart {
margin-top: 0;
margin-left: -16px;
margin-right: -16px;
}
.gh-dashboard5-anchor .gh-dashboard5-breakdown .gh-dashboard5-chart {
margin-top: 8px;
margin-left: -16px;
margin-right: -16px;
}
.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-chart {
margin-top: 0;
margin-left: -16px;
margin-right: -16px;
}
.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-select {
top: -8px;
right: -18px;
}