mark
/
msos
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish route report: spacing, centered header, one-page print, no broken blocks 

Adds top spacing so the report clears the sticky nav; centers the logo/title/date into a clean report header. Print: @page margin 0 removes the browser URL/date/page-number chrome, compacts fonts/spacing, drops the non-clickable Key pages block, and adds page-break-inside:avoid so the disclaimer and other blocks no longer split across pages.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskik 2026-07-31 13:34:40 +02:00
parent b5fc4b37bb
commit 4caccf3ad7
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/pages/_guide.css
View File

@ -867,25 +867,27 @@
} }
/* ---------- Personal route results page ---------- */ /* ---------- Personal route results page ---------- */
.route-report-page { max-width: 860px; margin: 40px auto; padding: 0 24px; } .route-report-page { max-width: 820px; margin: 56px auto 64px; padding: 0 24px; }
.route-report { .route-report {
background: #fff; background: #fff;
border: 1px solid #EAECF0; border: 1px solid #EAECF0;
border-radius: 18px; border-radius: 18px;
padding: 34px; padding: 34px 38px;
box-shadow: 0 10px 30px rgba(16, 24, 40, .06); box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
} }
.route-report-head { .route-report-head {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 16px; text-align: center;
padding-bottom: 18px; gap: 12px;
margin-bottom: 18px; padding-bottom: 20px;
margin-bottom: 22px;
border-bottom: 2px solid #F2F4F7; border-bottom: 2px solid #F2F4F7;
} }
.route-report-logo { height: 52px; width: auto; } .route-report-logo { height: 46px; width: auto; }
.route-report h1 { font-size: 24px; margin: 0; color: #101828; } .route-report h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #101828; }
.route-report-date { margin: 4px 0 0; font-size: 13px; color: #98A2B3; } .route-report-date { margin: 6px 0 0; font-size: 13px; color: #98A2B3; }
.route-report-intro { color: #475467; line-height: 25px; margin: 0 0 8px; } .route-report-intro { color: #475467; line-height: 25px; margin: 0 0 8px; }
.route-report h2 { font-size: 17px; color: #101828; margin: 24px 0 10px; } .route-report h2 { font-size: 17px; color: #101828; margin: 24px 0 10px; }
.route-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 6px; } .route-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 6px; }
@ -965,7 +967,9 @@
} }
.route-actions { display: flex; gap: 12px; flex-wrap: wrap; } .route-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@page { margin: 0; }
@media print { @media print {
html, body { background: #fff; }
body * { visibility: hidden; } body * { visibility: hidden; }
.route-report, .route-report * { visibility: visible; } .route-report, .route-report * { visibility: visible; }
.route-report-page { margin: 0; padding: 0; max-width: none; } .route-report-page { margin: 0; padding: 0; max-width: none; }
@ -974,10 +978,28 @@
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
box-sizing: border-box;
padding: 12mm 14mm;
border: none; border: none;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
padding: 0; font-size: 10.5px;
} }
.no-print { display: none !important; } .no-print, .route-links-block { display: none !important; }
/* Compact header as a row to save vertical space */
.route-report-head { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding-bottom: 8px; margin-bottom: 10px; }
.route-report-logo { height: 34px; }
.route-report h1 { font-size: 17px; }
.route-report-date { font-size: 9px; margin-top: 2px; }
.route-report-intro { font-size: 10.5px; line-height: 15px; margin: 0 0 4px; }
.route-report h2 { font-size: 12px; margin: 11px 0 5px; page-break-after: avoid; }
.route-chips { gap: 5px; margin: 3px 0; page-break-inside: avoid; }
.route-chip { min-width: 0; padding: 4px 8px; }
.route-chip span { font-size: 7.5px; }
.route-chip strong { font-size: 10px; }
.route-steps li { padding: 5px 0 5px 26px; line-height: 14px; page-break-inside: avoid; }
.route-steps li::before { width: 18px; height: 18px; font-size: 9px; top: 5px; }
.route-focus li { padding: 3px 0 3px 16px; line-height: 14px; page-break-inside: avoid; }
.route-focus li::before { top: 10px; }
.route-disclaimer { margin: 11px 0 0; padding: 8px 10px; font-size: 9px; line-height: 13px; page-break-inside: avoid; }
} }

4
my-route.js
View File

@ -213,8 +213,8 @@
'<h2>' + esc(t.stepsHead) + '</h2>' + '<h2>' + esc(t.stepsHead) + '</h2>' +
'<ol class="route-steps">' + steps + '</ol>' + '<ol class="route-steps">' + steps + '</ol>' +
(focus.length ? '<h2>' + esc(t.focusHead) + '</h2><ul class="route-focus">' + focus.join('') + '</ul>' : '') + (focus.length ? '<h2>' + esc(t.focusHead) + '</h2><ul class="route-focus">' + focus.join('') + '</ul>' : '') +
'<h2>' + esc(t.linksHead) + '</h2>' + '<div class="route-links-block"><h2>' + esc(t.linksHead) + '</h2>' +
'<div class="route-links">' + keyLinks.join('') + '</div>' + '<div class="route-links">' + keyLinks.join('') + '</div></div>' +
'<div class="route-disclaimer"><strong>' + esc(t.disclaimerHead) + ':</strong> ' + esc(t.disclaimer) + '</div>' + '<div class="route-disclaimer"><strong>' + esc(t.disclaimerHead) + ':</strong> ' + esc(t.disclaimer) + '</div>' +
'<div class="route-actions no-print">' + '<div class="route-actions no-print">' +
'<button type="button" class="btn btn-primary-orange" data-action="print">' + esc(t.print) + '</button>' + '<button type="button" class="btn btn-primary-orange" data-action="print">' + esc(t.print) + '</button>' +