B4L/buildfor_life_repair
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix label fitting on single DK-22210 page
Deploy to LXC / deploy (push) Successful in 19s
Details

Browse Source 
- Reduced padding (1.5mm → 1mm), barcode height (7mm → 6mm)
- Tighter line heights, combined serial/voltage on one line
- Barcode text size 14 → 12 to reduce image height
- Vertical flex layout instead of horizontal (no QR = more space)
- Should now fit within 29mm height without overflow

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alexander Grabowski
2026-04-09 17:33:58 +07:00
parent cad82119ca
commit 941b41d3de
3 changed files with 38 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/server/barcode.ts
+1 -1
View File
@@ -8,7 +8,7 @@ export async function generateBarcodeSvg(text: string): Promise<string> {
scale: 3,
height: 8,
includetext: true,
textsize: 14,
textsize: 12,
textxalign: 'center'
});
src/routes/(print)/print/component/[id]/+page.svelte
+7 -11
View File
@@ -36,23 +36,19 @@
</div>
{#each Array(copies) as _}
<div class="label" style="width: 70mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1.5mm 2mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; align-items: center; height: 100%; font-family: Arial, Helvetica, sans-serif;">
<div style="flex: 1; min-width: 0;">
<div style="font-size: 10pt; font-weight: bold; color: #000; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<div class="label" style="width: 70mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm 2mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; flex-direction: column; justify-content: center; height: 100%; font-family: Arial, Helvetica, sans-serif;">
<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{data.component.title}
</div>
<div style="font-size: 7pt; color: #444; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<div style="font-size: 6pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{data.component.componentType}
{#if data.component.brand}&middot; {data.component.brand}{/if}
{#if data.component.partNumber} &middot; P/N: {data.component.partNumber}{/if}
</div>
{#if data.component.partNumber}
<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;">P/N: {data.component.partNumber}</div>
{/if}
<div style="margin-top: 1mm;">
<div style="margin-top: 0.5mm;">
<img src={data.barcodeDataUrl} alt={data.shortId}
style="height: 7mm; width: auto; max-width: 55mm; display: block;" />
</div>
style="height: 6mm; width: auto; max-width: 65mm; display: block;" />
</div>
</div>
</div>
src/routes/(print)/print/device/[id]/+page.svelte
+13 -14
View File
@@ -36,31 +36,30 @@
</div>
{#each Array(copies) as _}
<div class="label" style="width: 70mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1.5mm 2mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; align-items: center; height: 100%; font-family: Arial, Helvetica, sans-serif;">
<div style="flex: 1; min-width: 0;">
<div style="font-size: 10pt; font-weight: bold; color: #000; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<div class="label" style="width: 70mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm 2mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; flex-direction: column; justify-content: center; height: 100%; font-family: Arial, Helvetica, sans-serif;">
<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{data.device.title}
</div>
{#if data.device.brand || data.device.model}
<div style="font-size: 7pt; color: #444; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<div style="font-size: 6pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
</div>
{/if}
{#if data.device.serialNumber}
<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;">
<div style="font-size: 5pt; color: #666;">
S/N: {data.device.serialNumber}
{#if data.device.voltage} · {data.device.voltage}{/if}
{#if data.device.frequency} · {data.device.frequency}{/if}
</div>
{:else if data.device.voltage || data.device.frequency}
<div style="font-size: 5pt; color: #666;">
{[data.device.voltage, data.device.frequency].filter(Boolean).join(' · ')}
</div>
{/if}
{#if data.device.voltage || data.device.frequency}
<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;">
{[data.device.voltage, data.device.frequency].filter(Boolean).join(' / ')}
</div>
{/if}
<div style="margin-top: 1mm;">
<div style="margin-top: 0.5mm;">
<img src={data.barcodeDataUrl} alt={data.shortId}
style="height: 7mm; width: auto; max-width: 55mm; display: block;" />
</div>
style="height: 6mm; width: auto; max-width: 65mm; display: block;" />
</div>
</div>
</div>