Landscape phone polish: fixed padding, compact header, cache-busting
- Replace safe-area-inset padding with fixed 42px right / 24px left (safe-area was 59px on both sides of iPhone Pro Max, too aggressive) - Move center-label/eye-button hiding to height-based media query covering all landscape phones, not just >851px - Add compact h1 (24px), smaller month-preview donuts (28px) for larger landscape phones - Server: add Cache-Control: no-cache, strip query strings from URLs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
2da9e3e3e7
commit
3d7dc24a2d
@ -39,8 +39,9 @@ const server = http.createServer((req, res) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle URL
|
// Handle URL (strip query string)
|
||||||
let filePath = '.' + req.url;
|
const urlPath = req.url.split('?')[0];
|
||||||
|
let filePath = '.' + urlPath;
|
||||||
if (filePath === './') {
|
if (filePath === './') {
|
||||||
filePath = './index.html';
|
filePath = './index.html';
|
||||||
} else if (filePath.endsWith('.csv')) {
|
} else if (filePath.endsWith('.csv')) {
|
||||||
@ -62,7 +63,7 @@ const server = http.createServer((req, res) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
res.writeHead(200, { 'Content-Type': contentType });
|
res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' });
|
||||||
res.end(data);
|
res.end(data);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
31
styles.css
31
styles.css
@ -653,8 +653,8 @@ body {
|
|||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
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: calc(10px + env(safe-area-inset-left));
|
padding-left: 24px;
|
||||||
padding-right: calc(10px + env(safe-area-inset-right));
|
padding-right: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@ -725,8 +725,8 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Larger landscape phones (e.g. iPhone Pro Max ~956×440): compact center, tighter details */
|
/* All landscape phones: compact center label, hide eye button */
|
||||||
@media (min-width: 851px) and (max-height: 500px) and (orientation: landscape) {
|
@media (max-height: 500px) and (orientation: landscape) {
|
||||||
.center-label {
|
.center-label {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -747,9 +747,26 @@ body {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chart-eye-btn {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Larger landscape phones (e.g. iPhone Pro Max ~956×440): tighter details */
|
||||||
|
@media (min-width: 851px) and (max-height: 500px) and (orientation: landscape) {
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-preview {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding-left: env(safe-area-inset-left, 8px);
|
padding-left: 24px;
|
||||||
padding-right: env(safe-area-inset-right, 8px);
|
padding-right: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
@ -761,7 +778,7 @@ body {
|
|||||||
width: 40vw;
|
width: 40vw;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
max-height: calc(100dvh - 50px);
|
max-height: calc(100dvh - 50px);
|
||||||
right: calc(4px + env(safe-area-inset-right));
|
right: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-header {
|
.details-header {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user