caterium/caterium-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compact print layout for the order blank and receipt

Browse Source 
.sun-doc-grid (client/phone/date/address) fell back to whatever the
last matching max-width media query set, and print rendering commonly
evaluates those against the page's content width - narrow enough to
trip the existing max-width:700px breakpoint and stack every field
onto its own line instead of the intended 2-column grid. Combined with
generous screen-sized padding/font-sizes carried into print, a normal
order routinely spilled onto a second page.

Adds an explicit @media print block that puts client/phone/date/address
in a single row regardless of viewport width (grid-auto-flow:column),
sets an explicit @page size/margin instead of relying on the browser
default, and shrinks fonts/padding throughout (header, field grid,
table rows, summary, footer) for both the order blank (.sun-doc) and
the receipt (.sun-receipt, which reuses the same grid). Verified with a
standalone reproduction of the markup/CSS - a 2-line order now renders
as one compact page instead of stacking every field before ever
reaching the table.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
pavlov346346-source 2026-09-12 14:45:31 +03:00
parent 2e2f02efc3
commit 571f8e199d
1 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/index.html
View File

@ -986,7 +986,29 @@ if (typeof crypto !== 'undefined' && typeof crypto.randomUUID !== 'function') {
.sun-doc-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end}
.sun-receipt{max-width:720px}.sun-receipt .sun-doc-head{padding-top:4px}.sun-receipt .sun-doc-grid{grid-template-columns:1fr;margin-top:14px}.sun-receipt .sun-doc-footer{grid-template-columns:1fr 1fr}
@media(max-width:700px){.sun-doc-head{flex-direction:column}.sun-doc-title{text-align:left}.sun-doc-grid{grid-template-columns:1fr}.sun-doc-footer{grid-template-columns:1fr}.sun-doc-brand img{width:88px;height:58px}}
@media print{.sun-doc-actions{display:none!important}.sun-doc{max-width:none}.sun-doc-head{padding-top:0}.sun-doc-grid{background:#fff;border:1px solid #e0ddd4}.sun-doc th{background:#15364c!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.sun-doc-note{background:#fffaf0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media print{
@page{size:A4 portrait;margin:8mm}
.sun-doc-actions{display:none!important}
.sun-doc{max-width:none;font-size:11px}
.sun-doc-head{padding:0 0 8px;gap:12px}
.sun-doc-brand img{width:64px;height:42px}
.sun-doc-brand strong{font-size:15px}.sun-doc-brand small{margin-top:1px;font-size:10px}
.sun-doc-title h2{font-size:17px}.sun-doc-title p{margin-top:2px;font-size:11px}
.sun-doc-grid{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px 10px;margin:8px 0;padding:6px 8px;background:#fff;border:1px solid #e0ddd4}
.sun-doc-field{padding:0;border-bottom:0}
.sun-doc-field span{font-size:8px;margin-bottom:1px}
.sun-doc-field b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sun-doc table{margin-top:6px}
.sun-doc th{background:#15364c!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:9px;padding:4px 5px}
.sun-doc td{padding:3px 5px;font-size:10px}
.sun-doc .doc-sub{font-size:8px;margin-top:1px}
.sun-doc-summary{width:min(260px,100%);margin-top:8px}
.sun-doc-summary p{padding:3px 0;font-size:10px}
.sun-doc-summary .grand{font-size:13px;padding-top:5px}
.sun-doc-note{margin-top:8px;padding:6px 8px;font-size:10px;background:#fffaf0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sun-doc-footer{grid-template-columns:1fr 1fr;gap:20px;margin-top:14px;padding-top:8px;font-size:9px}
.sun-doc-sign{margin-top:14px;padding-top:3px}
}
`;
document.head.appendChild(documentStyle);