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;
|
||||
}
|
||||
|
||||
// Handle URL
|
||||
let filePath = '.' + req.url;
|
||||
// Handle URL (strip query string)
|
||||
const urlPath = req.url.split('?')[0];
|
||||
let filePath = '.' + urlPath;
|
||||
if (filePath === './') {
|
||||
filePath = './index.html';
|
||||
} else if (filePath.endsWith('.csv')) {
|
||||
@ -62,7 +63,7 @@ const server = http.createServer((req, res) => {
|
||||
return;
|
||||
}
|
||||
|
||||
res.writeHead(200, { 'Content-Type': contentType });
|
||||
res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' });
|
||||
res.end(data);
|
||||
});
|
||||
});
|
||||
|
||||
31
styles.css
31
styles.css
@ -653,8 +653,8 @@ body {
|
||||
padding: 4px 10px;
|
||||
padding-top: calc(4px + env(safe-area-inset-top));
|
||||
padding-bottom: 4px;
|
||||
padding-left: calc(10px + env(safe-area-inset-left));
|
||||
padding-right: calc(10px + env(safe-area-inset-right));
|
||||
padding-left: 24px;
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@ -725,8 +725,8 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Larger landscape phones (e.g. iPhone Pro Max ~956×440): compact center, tighter details */
|
||||
@media (min-width: 851px) and (max-height: 500px) and (orientation: landscape) {
|
||||
/* All landscape phones: compact center label, hide eye button */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.center-label {
|
||||
display: none;
|
||||
}
|
||||
@ -747,9 +747,26 @@ body {
|
||||
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 {
|
||||
padding-left: env(safe-area-inset-left, 8px);
|
||||
padding-right: env(safe-area-inset-right, 8px);
|
||||
padding-left: 24px;
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
@ -761,7 +778,7 @@ body {
|
||||
width: 40vw;
|
||||
padding: 10px;
|
||||
max-height: calc(100dvh - 50px);
|
||||
right: calc(4px + env(safe-area-inset-right));
|
||||
right: 42px;
|
||||
}
|
||||
|
||||
.details-header {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user