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:
Anton Volnuhin 2026-02-08 00:44:21 +03:00
parent 2da9e3e3e7
commit 3d7dc24a2d
2 changed files with 28 additions and 10 deletions

View File

@ -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);
}); });
}); });

View File

@ -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 {