fix: compact print layout for the order blank and receipt
.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:
parent
2e2f02efc3
commit
571f8e199d
@ -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-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}
|
.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(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);
|
document.head.appendChild(documentStyle);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user