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

Switch label printing to DK-1201 (29mm x 90.3mm) horizontal layout

Browse Source 
QR code on the left, text and barcode on the right. Fits the pre-cut
DK-1201 address label format.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alexander Grabowski
2026-04-07 11:36:43 +07:00
parent 45d93738d7
commit 7095b68169
2 changed files with 47 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/components/[id]/print/+page.svelte
+23 -28
View File
@@ -20,7 +20,7 @@
<title>Print Label - {data.component.title}</title> <title>Print Label - {data.component.title}</title>
<style> <style>
@page { @page {
size: 29mm auto; size: 90.3mm 29mm;
margin: 1mm; margin: 1mm;
} }
@media print { @media print {
@@ -37,7 +37,8 @@
@media screen { @media screen {
.label-preview { .label-preview {
border: 1px dashed #ccc; border: 1px dashed #ccc;
width: 29mm; width: 90.3mm;
height: 29mm;
background: white; background: white;
} }
} }
@@ -61,7 +62,7 @@
</div> </div>
<div class="mb-2 rounded-md bg-gray-100 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400"> <div class="mb-2 rounded-md bg-gray-100 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
<strong>Printer setup:</strong> Select your Brother printer, paper size "DK-22210 (29mm)" or "29mm" roll. Set margins to minimum. <strong>Printer setup:</strong> Select your Brother printer, paper size "DK-1201" (29mm x 90.3mm). Set margins to minimum.
</div> </div>
<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">Preview ({copies} label{copies > 1 ? 's' : ''}):</p> <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">Preview ({copies} label{copies > 1 ? 's' : ''}):</p>
@@ -69,37 +70,31 @@
{#each Array(copies) as _, i} {#each Array(copies) as _, i}
<div class="print-container label-preview mx-auto mb-2 p-1"> <div class="print-container label-preview mx-auto mb-2 p-1">
<div class="text-center" style="font-family: Arial, Helvetica, sans-serif;"> <div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
<div style="font-size: 8pt; font-weight: bold; line-height: 1.2; margin-bottom: 1mm;"> <!-- QR Code (left) -->
{data.component.title} <div style="width: 22mm; height: 22mm; flex-shrink: 0;">
{@html data.qrSvg}
</div> </div>
<div style="font-size: 6pt; color: #555; margin-bottom: 1mm;"> <!-- Text + Barcode (right) -->
{data.component.componentType} <div style="flex: 1; min-width: 0; overflow: hidden;">
{#if data.component.brand}&middot; {data.component.brand}{/if} <div style="font-size: 9pt; font-weight: bold; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
</div> {data.component.title}
{#if data.component.partNumber}
<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
P/N: {data.component.partNumber}
</div> </div>
{/if} <div style="font-size: 7pt; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{data.component.componentType}
{#if data.component.serialNumber} {#if data.component.brand}&middot; {data.component.brand}{/if}
<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
S/N: {data.component.serialNumber}
</div> </div>
{/if} {#if data.component.partNumber}
<div style="font-size: 6pt; color: #777; margin-top: 0.5mm;">P/N: {data.component.partNumber}</div>
<div style="display: flex; justify-content: center; margin-bottom: 1mm;"> {/if}
<div style="width: 18mm; height: 18mm;"> {#if data.component.serialNumber}
{@html data.qrSvg} <div style="font-size: 6pt; color: #777;">S/N: {data.component.serialNumber}</div>
{/if}
<div style="margin-top: 1mm;">
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 100%;" />
</div> </div>
</div> </div>
<div style="display: flex; justify-content: center; margin-bottom: 0.5mm;">
<img src={data.barcodeDataUrl} alt={data.shortId} style="width: 25mm; height: auto;" />
</div>
</div> </div>
</div> </div>
{/each} {/each}
src/routes/(app)/devices/[id]/print/+page.svelte
+24 -29
View File
@@ -22,7 +22,7 @@
<title>Print Label - {data.device.title}</title> <title>Print Label - {data.device.title}</title>
<style> <style>
@page { @page {
size: 29mm auto; size: 90.3mm 29mm;
margin: 1mm; margin: 1mm;
} }
@media print { @media print {
@@ -39,7 +39,8 @@
@media screen { @media screen {
.label-preview { .label-preview {
border: 1px dashed #ccc; border: 1px dashed #ccc;
width: 29mm; width: 90.3mm;
height: 29mm;
background: white; background: white;
} }
} }
@@ -64,7 +65,7 @@
</div> </div>
<div class="mb-2 rounded-md bg-gray-100 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400"> <div class="mb-2 rounded-md bg-gray-100 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
<strong>Printer setup:</strong> Select your Brother printer, paper size "DK-22210 (29mm)" or "29mm" roll. Set margins to minimum. <strong>Printer setup:</strong> Select your Brother printer, paper size "DK-1201" (29mm x 90.3mm). Set margins to minimum.
</div> </div>
<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">Preview ({copies} label{copies > 1 ? 's' : ''}):</p> <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">Preview ({copies} label{copies > 1 ? 's' : ''}):</p>
@@ -73,36 +74,30 @@
<!-- Labels --> <!-- Labels -->
{#each Array(copies) as _, i} {#each Array(copies) as _, i}
<div class="print-container label-preview mx-auto mb-2 p-1"> <div class="print-container label-preview mx-auto mb-2 p-1">
<div class="text-center" style="font-family: Arial, Helvetica, sans-serif;"> <div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
<!-- Title --> <!-- QR Code (left) -->
<div style="font-size: 8pt; font-weight: bold; line-height: 1.2; margin-bottom: 1mm;"> <div style="width: 22mm; height: 22mm; flex-shrink: 0;">
{data.device.title} {@html data.qrSvg}
</div> </div>
<!-- Brand / Model --> <!-- Text + Barcode (right) -->
{#if data.device.brand || data.device.model} <div style="flex: 1; min-width: 0; overflow: hidden;">
<div style="font-size: 6pt; color: #555; margin-bottom: 1mm;"> <div style="font-size: 9pt; font-weight: bold; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{[data.device.brand, data.device.model].filter(Boolean).join(' ')} {data.device.title}
</div> </div>
{/if} {#if data.device.brand || data.device.model}
<div style="font-size: 7pt; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<!-- Serial --> {[data.device.brand, data.device.model].filter(Boolean).join(' ')}
{#if data.device.serialNumber} </div>
<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;"> {/if}
S/N: {data.device.serialNumber} {#if data.device.serialNumber}
<div style="font-size: 6pt; color: #777; margin-top: 0.5mm;">
S/N: {data.device.serialNumber}
</div>
{/if}
<div style="margin-top: 1mm;">
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 100%;" />
</div> </div>
{/if}
<!-- QR Code -->
<div style="display: flex; justify-content: center; margin-bottom: 1mm;">
<div style="width: 18mm; height: 18mm;">
{@html data.qrSvg}
</div>
</div>
<!-- Barcode -->
<div style="display: flex; justify-content: center; margin-bottom: 0.5mm;">
<img src={data.barcodeDataUrl} alt={data.shortId} style="width: 25mm; height: auto;" />
</div> </div>
</div> </div>
</div> </div>