knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(refactor) PrintPreview: fixing Pdf417Barcode margin & size

Browse Source
This commit is contained in:
Knee Cola
2025-11-23 22:28:03 +01:00
parent fcecaaa901
commit fda4b59e58
2 changed files with 2 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/ui/Pdf417Barcode.tsx
View File

@@ -3,7 +3,6 @@
import { useState, useEffect, FC } from 'react'; import { useState, useEffect, FC } from 'react';
import { generateBarcode } from '../lib/pdf/pdf417'; import { generateBarcode } from '../lib/pdf/pdf417';
import { renderBarcode } from '../lib/pdf/renderBarcode'; import { renderBarcode } from '../lib/pdf/renderBarcode';
import { EncodePayment, PaymentParams } from 'hub-3a-payment-encoder';
export const Pdf417Barcode:FC<{hub3aText:string, className?: string}> = ({hub3aText: hub3a_text, className}) => { export const Pdf417Barcode:FC<{hub3aText:string, className?: string}> = ({hub3aText: hub3a_text, className}) => {
const [bitmapData, setBitmapData] = useState<string | undefined>(undefined); const [bitmapData, setBitmapData] = useState<string | undefined>(undefined);

16
app/ui/PrintPreview.tsx
View File

@@ -37,13 +37,6 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
print-color-adjust: exact !important; print-color-adjust: exact !important;
} }
.print-barcode-img {
width: 69.6mm !important;
max-width: 69.6mm !important;
height: auto !important;
max-height: 85px !important;
}
.print-table { .print-table {
page-break-inside: avoid; page-break-inside: avoid;
} }
@@ -79,10 +72,6 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
.print-table thead tr { .print-table thead tr {
background: #f5f5f5 !important; background: #f5f5f5 !important;
} }
.print-table td img {
margin: 5em auto;
}
} }
`}</style> `}</style>
@@ -144,15 +133,14 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
{ {
item.hub3aText ? item.hub3aText ?
<Pdf417Barcode hub3aText={item.hub3aText} /> <Pdf417Barcode hub3aText={item.hub3aText} className="max-h-28 w-auto max-w-[270px] print:m-[5em_auto] print:h-[auto] print:max-h-[85px] print:w-[69.6mm] print:max-w-[69.6mm]" />
: ( : (
// LEGACY SUPPORT ... untill all bills have been migrated // LEGACY SUPPORT ... untill all bills have been migrated
item.barcodeImage ? item.barcodeImage ?
<img <img
src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`} src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`}
alt={`Barcode for ${item.billName}`} alt={`Barcode for ${item.billName}`}
className="max-h-28 w-auto border border-gray-300 rounded print-barcode-img" className="max-h-28 w-auto max-w-[270px] print:m-[5em_auto] print:h-[auto] print:max-h-[85px] print:w-[69.6mm] print:max-w-[69.6mm]"
style={{ maxWidth: '270px' }}
/> : null /> : null
) )
} }