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

Working out the Safari layout issue when changing dropdowns on new Dashboard

Browse source 
refs: https://github.com/TryGhost/Team/issues/1531
This commit is contained in:
James Morris 2022-05-17 12:50:56 +01:00
parent 980f45719d
commit b2a6c01cdf
3 changed files with 26 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/dashboard/charts/paid-mix.hbs
View file

@ -1,4 +1,4 @@
<div class="gh-dashboard-minichart gh-dashboard-mix {{if this.isChartTiers 'is-tiers'}}">
<div class="gh-dashboard-minichart gh-dashboard-mix {{if this.isChartCadence 'is-cadence'}}">
<div class="gh-dashboard-content">
<div class="gh-dashboard-data">
<Dashboard::Parts::Metric
@ -11,7 +11,7 @@
</div>
{{/if}}
</div>
<div class="gh-dashboard-chart {{if this.isChartCadence "narrow"}}" {{did-insert this.loadCharts}}>
<div class="gh-dashboard-chart" {{did-insert this.loadCharts}}>
{{#if this.loading}}
<div class="gh-dashboard-chart-loading">
<div class="gh-loading-spinner"></div>

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

@ -448,8 +448,17 @@ export default class PaidMix extends Component {
}
let offsetX = 0;
if (tooltip.x > chartWidth - tooltipWidth) {
offsetX = tooltipWidth - 10;
if (that.mode === 'cadence') {
// these adjustments should match the special width and margin values in css
if (tooltip.x > (chartWidth * 0.69) - tooltipWidth) {
offsetX = tooltipWidth - 10;
}
offsetX -= (chartWidth * 0.30);
} else {
if (tooltip.x > chartWidth - tooltipWidth) {
offsetX = tooltipWidth - 10;
}
}
// update tooltip styles

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

@ -263,6 +263,16 @@ Dashboard v5 Layout */
width: 100%;
}
.gh-dashboard-minicharts .gh-dashboard-mix .gh-dashboard-chart {
padding-left: 0;
}
.gh-dashboard-minicharts .gh-dashboard-mix.is-cadence .gh-dashboard-chart-box {
/* remember to match these to the tooltip offsets */
width: 69%;
margin-left: 30%;
}
@media screen and (max-width: 1400px) {
.gh-dashboard-minicharts .gh-dashboard-chart {
padding-left: 50%;
@ -294,14 +304,6 @@ Dashboard v5 Layout */
padding-right: 0;
}
.gh-dashboard-minichart.is-tiers {
flex-direction: column;
}
.gh-dashboard-minichart.is-tiers .gh-dashboard-chart {
padding: 0;
}
.gh-dashboard-minichart .gh-dashboard-chart-box {
height: 88px;
}
@ -551,9 +553,9 @@ Dashboard v5 Chart */
left: 24px;
}
.gh-dashboard-mix .gh-dashboard-chart.narrow {
/* margin-left: -80px; */
padding-left: 30%;
.gh-dashboard-mix .gh-dashboard-chart-box {
width: 99%;
margin: 0;
}
@ -1976,10 +1978,6 @@ Dashboard v5 Tooltips */
left: 0;
}
.gh-dashboard-mix .gh-dashboard-chart.narrow {
padding: 0;
}
.gh-dashboard-mix .gh-dashboard-metric {
margin-top: 0;
}