Switch label printing to DK-1201 (29mm x 90.3mm) horizontal layout
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:
@@ -20,7 +20,7 @@
|
||||
<title>Print Label - {data.component.title}</title>
|
||||
<style>
|
||||
@page {
|
||||
size: 29mm auto;
|
||||
size: 90.3mm 29mm;
|
||||
margin: 1mm;
|
||||
}
|
||||
@media print {
|
||||
@@ -37,7 +37,8 @@
|
||||
@media screen {
|
||||
.label-preview {
|
||||
border: 1px dashed #ccc;
|
||||
width: 29mm;
|
||||
width: 90.3mm;
|
||||
height: 29mm;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -61,7 +62,7 @@
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<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}
|
||||
<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="font-size: 8pt; font-weight: bold; line-height: 1.2; margin-bottom: 1mm;">
|
||||
{data.component.title}
|
||||
<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
|
||||
<!-- QR Code (left) -->
|
||||
<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
|
||||
{@html data.qrSvg}
|
||||
</div>
|
||||
|
||||
<div style="font-size: 6pt; color: #555; margin-bottom: 1mm;">
|
||||
{data.component.componentType}
|
||||
{#if data.component.brand}· {data.component.brand}{/if}
|
||||
</div>
|
||||
|
||||
{#if data.component.partNumber}
|
||||
<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
|
||||
P/N: {data.component.partNumber}
|
||||
<!-- Text + Barcode (right) -->
|
||||
<div style="flex: 1; min-width: 0; overflow: hidden;">
|
||||
<div style="font-size: 9pt; font-weight: bold; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||||
{data.component.title}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if data.component.serialNumber}
|
||||
<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
|
||||
S/N: {data.component.serialNumber}
|
||||
<div style="font-size: 7pt; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||||
{data.component.componentType}
|
||||
{#if data.component.brand}· {data.component.brand}{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div style="display: flex; justify-content: center; margin-bottom: 1mm;">
|
||||
<div style="width: 18mm; height: 18mm;">
|
||||
{@html data.qrSvg}
|
||||
{#if data.component.partNumber}
|
||||
<div style="font-size: 6pt; color: #777; margin-top: 0.5mm;">P/N: {data.component.partNumber}</div>
|
||||
{/if}
|
||||
{#if data.component.serialNumber}
|
||||
<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 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>
|
||||
{/each}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<title>Print Label - {data.device.title}</title>
|
||||
<style>
|
||||
@page {
|
||||
size: 29mm auto;
|
||||
size: 90.3mm 29mm;
|
||||
margin: 1mm;
|
||||
}
|
||||
@media print {
|
||||
@@ -39,7 +39,8 @@
|
||||
@media screen {
|
||||
.label-preview {
|
||||
border: 1px dashed #ccc;
|
||||
width: 29mm;
|
||||
width: 90.3mm;
|
||||
height: 29mm;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -64,7 +65,7 @@
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<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 -->
|
||||
{#each Array(copies) as _, i}
|
||||
<div class="print-container label-preview mx-auto mb-2 p-1">
|
||||
<div class="text-center" style="font-family: Arial, Helvetica, sans-serif;">
|
||||
<!-- Title -->
|
||||
<div style="font-size: 8pt; font-weight: bold; line-height: 1.2; margin-bottom: 1mm;">
|
||||
{data.device.title}
|
||||
<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
|
||||
<!-- QR Code (left) -->
|
||||
<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
|
||||
{@html data.qrSvg}
|
||||
</div>
|
||||
|
||||
<!-- Brand / Model -->
|
||||
{#if data.device.brand || data.device.model}
|
||||
<div style="font-size: 6pt; color: #555; margin-bottom: 1mm;">
|
||||
{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
|
||||
<!-- Text + Barcode (right) -->
|
||||
<div style="flex: 1; min-width: 0; overflow: hidden;">
|
||||
<div style="font-size: 9pt; font-weight: bold; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||||
{data.device.title}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Serial -->
|
||||
{#if data.device.serialNumber}
|
||||
<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
|
||||
S/N: {data.device.serialNumber}
|
||||
{#if data.device.brand || data.device.model}
|
||||
<div style="font-size: 7pt; color: #555; 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: #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>
|
||||
{/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>
|
||||
|
||||
Reference in New Issue
Block a user