fix: Invoice print layout - hide app shell, fix padding
Print CSS: - Hide WooNooW app nav, header, submenu, bottom nav - Set print-a4 to absolute positioning for clean print - Added 15mm padding for print - Hidden min-height for screen container Invoice Component: - Removed inline minHeight to prevent empty second page - Added max-w-3xl and p-8 for screen display - Added print:max-w-none print:p-0 for print mode
This commit is contained in:
@@ -160,26 +160,75 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide WooNooW app shell (nav, header, submenu, bottom nav, etc) */
|
||||
.woonoow-app-header,
|
||||
.woonoow-topnav,
|
||||
.woonoow-bottom-nav,
|
||||
.woonoow-submenu,
|
||||
nav,
|
||||
header,
|
||||
[data-nav],
|
||||
[data-header],
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Reset layout to full-bleed for our app */
|
||||
html,
|
||||
body,
|
||||
#wpwrap,
|
||||
#wpcontent {
|
||||
#wpcontent,
|
||||
#woonoow-admin-app,
|
||||
#woonoow-admin-app>div,
|
||||
.woonoow-app {
|
||||
background: #fff !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
max-width: none !important;
|
||||
width: 100% !important;
|
||||
min-height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#woonoow-admin-app,
|
||||
#woonoow-admin-app>div {
|
||||
/* Ensure print content is visible and takes full page */
|
||||
.print-a4 {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
padding: 15mm !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
max-width: 100% !important;
|
||||
box-shadow: none !important;
|
||||
background: white !important;
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
/* Hide elements flagged as no-print, reveal print-only */
|
||||
.no-print {
|
||||
display: none !important;
|
||||
.print-a4 * {
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
/* Ensure backgrounds print */
|
||||
.print-a4 .bg-gray-50 {
|
||||
background-color: #f9fafb !important;
|
||||
}
|
||||
|
||||
.print-a4 .bg-gray-900 {
|
||||
background-color: #111827 !important;
|
||||
}
|
||||
|
||||
.print-a4 .text-white {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Hide outer container styling */
|
||||
.min-h-screen {
|
||||
min-height: auto !important;
|
||||
background: white !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.print-only {
|
||||
|
||||
@@ -87,16 +87,8 @@ export default function Invoice() {
|
||||
</div>
|
||||
|
||||
{/* Invoice content */}
|
||||
<div className="py-8 print:py-0">
|
||||
<div
|
||||
className="print-a4 bg-white shadow-lg print:shadow-none mx-auto"
|
||||
style={{
|
||||
width: '210mm',
|
||||
minHeight: '297mm',
|
||||
padding: '20mm',
|
||||
boxSizing: 'border-box'
|
||||
}}
|
||||
>
|
||||
<div className="py-8 print:py-0 print:bg-white">
|
||||
<div className="print-a4 bg-white shadow-lg print:shadow-none mx-auto max-w-3xl p-8 print:max-w-none print:p-0">
|
||||
{/* Invoice Header */}
|
||||
<div className="flex items-start justify-between mb-8 pb-6 border-b-2 border-gray-200">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user