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

View File

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