Fix home icon centering, eye icons on touch, tune landscape layout
- Center donut at 50% for compact landscape phones (was ~47%, misaligned with CSS center-label) - Show eye buttons on touch devices via @media (pointer: coarse) - Reduce right padding to 34px, narrow chart-wrapper to 49% Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
3d7dc24a2d
commit
7e87a03b90
4
app.js
4
app.js
@ -2815,8 +2815,8 @@ function adjustChartSize() {
|
|||||||
|
|
||||||
// Calculate center position
|
// Calculate center position
|
||||||
let centerPosition;
|
let centerPosition;
|
||||||
if (screenWidth <= 850) {
|
if (screenWidth <= 850 || isCompact) {
|
||||||
// Stacked layout: center the chart since details box is below
|
// Stacked layout or compact landscape: center the chart
|
||||||
centerPosition = 50;
|
centerPosition = 50;
|
||||||
} else if (screenWidth >= 1000) {
|
} else if (screenWidth >= 1000) {
|
||||||
centerPosition = 50;
|
centerPosition = 50;
|
||||||
|
|||||||
15
styles.css
15
styles.css
@ -654,7 +654,7 @@ body {
|
|||||||
padding-top: calc(4px + env(safe-area-inset-top));
|
padding-top: calc(4px + env(safe-area-inset-top));
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
padding-right: 42px;
|
padding-right: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@ -766,11 +766,11 @@ body {
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
padding-right: 42px;
|
padding-right: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
width: 52%;
|
width: 49%;
|
||||||
height: calc(100dvh - 50px);
|
height: calc(100dvh - 50px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -778,7 +778,7 @@ body {
|
|||||||
width: 40vw;
|
width: 40vw;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
max-height: calc(100dvh - 50px);
|
max-height: calc(100dvh - 50px);
|
||||||
right: 42px;
|
right: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-header {
|
.details-header {
|
||||||
@ -846,6 +846,13 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (pointer: coarse) {
|
||||||
|
.eye-btn,
|
||||||
|
.header-eye-btn {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Floating eye button on chart (shown when hovering over sunburst sector) */
|
/* Floating eye button on chart (shown when hovering over sunburst sector) */
|
||||||
.chart-eye-btn {
|
.chart-eye-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user