Label layout: barcode next to ID, bigger detail text, more spacing
Deploy to LXC / deploy (push) Successful in 19s
Deploy to LXC / deploy (push) Successful in 19s
- ID and barcode on same row (flex horizontal, ID left, barcode right) - 1mm gap between title and details section - Detail text bumped to 6-6.5pt (from 5-5.5pt) - Details grouped in their own block for consistent spacing Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -32,28 +32,30 @@
|
||||
|
||||
{#each data.labels as label}
|
||||
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: left;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; height: 100%; font-family: 'JetBrains Mono', monospace;">
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{label.title}
|
||||
</div>
|
||||
{#if label.brand || label.model}
|
||||
<div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{[label.brand, label.model].filter(Boolean).join(' ')}
|
||||
</div>
|
||||
{/if}
|
||||
{#if label.serialNumber}
|
||||
<div style="font-size: 5pt; color: #666;">S/N: {label.serialNumber}</div>
|
||||
{/if}
|
||||
{#if label.voltage || label.frequency}
|
||||
<div style="font-size: 5pt; color: #666;">
|
||||
{[label.voltage, label.frequency].filter(Boolean).join(' / ')}
|
||||
</div>
|
||||
{/if}
|
||||
<div style="margin-top: 0.5mm;">
|
||||
<img src={label.barcodeDataUrl} alt={label.shortId} style="height: 5mm; width: auto; max-width: 56mm;" />
|
||||
<div style="margin-top: 1mm;">
|
||||
{#if label.brand || label.model}
|
||||
<div style="font-size: 6.5pt; color: #444; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{[label.brand, label.model].filter(Boolean).join(' ')}
|
||||
</div>
|
||||
{/if}
|
||||
{#if label.serialNumber}
|
||||
<div style="font-size: 6pt; color: #666;">S/N: {label.serialNumber}</div>
|
||||
{/if}
|
||||
{#if label.voltage || label.frequency}
|
||||
<div style="font-size: 6pt; color: #666;">
|
||||
{[label.voltage, label.frequency].filter(Boolean).join(' / ')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px; margin-top: 0.3mm;">
|
||||
{label.shortId}
|
||||
<div style="display: flex; align-items: center; gap: 2mm; margin-top: 1mm;">
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px;">
|
||||
{label.shortId}
|
||||
</div>
|
||||
<img src={label.barcodeDataUrl} alt={label.shortId} style="height: 5mm; width: auto; max-width: 35mm;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,22 +40,24 @@
|
||||
|
||||
{#each Array(copies) as _}
|
||||
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: left;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; height: 100%; font-family: 'JetBrains Mono', monospace;">
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{data.component.title}
|
||||
</div>
|
||||
<div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{data.component.componentType}
|
||||
{#if data.component.brand}· {data.component.brand}{/if}
|
||||
<div style="margin-top: 1mm;">
|
||||
<div style="font-size: 6.5pt; color: #444; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{data.component.componentType}
|
||||
{#if data.component.brand}· {data.component.brand}{/if}
|
||||
</div>
|
||||
{#if data.component.partNumber}
|
||||
<div style="font-size: 6pt; color: #666;">P/N: {data.component.partNumber}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if data.component.partNumber}
|
||||
<div style="font-size: 5pt; color: #666;">P/N: {data.component.partNumber}</div>
|
||||
{/if}
|
||||
<div style="margin-top: 0.5mm;">
|
||||
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 5mm; width: auto; max-width: 56mm;" />
|
||||
</div>
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px; margin-top: 0.3mm;">
|
||||
{data.shortId}
|
||||
<div style="display: flex; align-items: center; gap: 2mm; margin-top: 1mm;">
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px;">
|
||||
{data.shortId}
|
||||
</div>
|
||||
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 5mm; width: auto; max-width: 35mm;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,28 +40,30 @@
|
||||
|
||||
{#each Array(copies) as _}
|
||||
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: left;">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; height: 100%; font-family: 'JetBrains Mono', monospace;">
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{data.device.title}
|
||||
</div>
|
||||
{#if data.device.brand || data.device.model}
|
||||
<div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
|
||||
</div>
|
||||
{/if}
|
||||
{#if data.device.serialNumber}
|
||||
<div style="font-size: 5pt; color: #666;">S/N: {data.device.serialNumber}</div>
|
||||
{/if}
|
||||
{#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}
|
||||
<div style="margin-top: 0.5mm;">
|
||||
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 5mm; width: auto; max-width: 56mm;" />
|
||||
<div style="margin-top: 1mm;">
|
||||
{#if data.device.brand || data.device.model}
|
||||
<div style="font-size: 6.5pt; color: #444; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
|
||||
{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
|
||||
</div>
|
||||
{/if}
|
||||
{#if data.device.serialNumber}
|
||||
<div style="font-size: 6pt; color: #666;">S/N: {data.device.serialNumber}</div>
|
||||
{/if}
|
||||
{#if data.device.voltage || data.device.frequency}
|
||||
<div style="font-size: 6pt; color: #666;">
|
||||
{[data.device.voltage, data.device.frequency].filter(Boolean).join(' / ')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px; margin-top: 0.3mm;">
|
||||
{data.shortId}
|
||||
<div style="display: flex; align-items: center; gap: 2mm; margin-top: 1mm;">
|
||||
<div style="font-size: 9pt; font-weight: bold; color: #000; letter-spacing: 1.5px;">
|
||||
{data.shortId}
|
||||
</div>
|
||||
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 5mm; width: auto; max-width: 35mm;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user