Move print labels to (print) layout group to fix blank output
The (app) layout's flex h-screen + overflow-hidden container was clipping label content in the print renderer. Print routes now use a dedicated (print) layout group with no sidebar/header/flex shell, just the raw label HTML. Routes changed to /print/device/[id] and /print/component/[id]. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Read(//c/Users/berwn/.claude/**)",
|
||||
"Read(//c/Users/berwn/**)",
|
||||
"Read(//c/dev/b4l_r4l/**)",
|
||||
"mcp__nocodb__getBaseInfo",
|
||||
"mcp__nocodb__getTablesList",
|
||||
"mcp__nocodb__getTableSchema",
|
||||
"Bash(xargs -I {} head -30 {})",
|
||||
"Bash(xargs head:*)",
|
||||
"Bash(npm install:*)",
|
||||
"Bash(npx svelte-check:*)",
|
||||
"Bash(npx drizzle-kit:*)",
|
||||
"Bash(npx svelte-kit:*)",
|
||||
"Bash(git init:*)",
|
||||
"Bash(git status:*)",
|
||||
"Bash(git add:*)",
|
||||
"Bash(git commit:*)",
|
||||
"Bash(git:*)",
|
||||
"mcp__nixos__nix",
|
||||
"Bash(npm run:*)",
|
||||
"Bash(ls /c/dev/b4l_r4l/node_modules/bwip-js/dist/*.d.ts)"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -37,7 +37,7 @@
|
||||
class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
|
||||
Label
|
||||
</a>
|
||||
<button onclick={() => window.open(`/components/${c.id}/print`, '_blank', 'width=400,height=600')}
|
||||
<button onclick={() => window.open(`/print/component/${c.id}`, '_blank', 'width=600,height=400')}
|
||||
class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
|
||||
Print
|
||||
</button>
|
||||
|
||||
@@ -1,102 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let copies = $state(1);
|
||||
|
||||
function printNow() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (window.opener) {
|
||||
setTimeout(() => window.print(), 300);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Print Label - {data.component.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="no-print mx-auto max-w-lg">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<a href="/components/{data.component.id}" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">← Back</a>
|
||||
<div class="flex items-center gap-3">
|
||||
<label class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Copies:
|
||||
<input type="number" bind:value={copies} min="1" max="20"
|
||||
class="ml-1 w-14 rounded border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
|
||||
</label>
|
||||
<button onclick={printNow}
|
||||
class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
|
||||
Print
|
||||
</button>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{#each Array(copies) as _, i}
|
||||
<div class="label" style="width: 90.3mm; height: 29mm; background: white; color: black; box-sizing: border-box; overflow: hidden; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc;">
|
||||
<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
|
||||
<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
|
||||
{@html data.qrSvg}
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 0; overflow: hidden;">
|
||||
<div style="font-size: 9pt; font-weight: bold; line-height: 1.2; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||||
{data.component.title}
|
||||
</div>
|
||||
<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 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>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
@page {
|
||||
size: 90.3mm 29mm;
|
||||
margin: 1mm;
|
||||
}
|
||||
@media print {
|
||||
:global(.no-print),
|
||||
:global(nav),
|
||||
:global(header),
|
||||
:global(aside) {
|
||||
display: none !important;
|
||||
}
|
||||
:global(main) {
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white !important;
|
||||
}
|
||||
.label {
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
break-inside: avoid;
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -62,7 +62,7 @@
|
||||
class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
|
||||
Label
|
||||
</a>
|
||||
<button onclick={() => window.open(`/devices/${data.device.id}/print`, '_blank', 'width=400,height=600')}
|
||||
<button onclick={() => window.open(`/print/device/${data.device.id}`, '_blank', 'width=600,height=400')}
|
||||
class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
|
||||
Print
|
||||
</button>
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let copies = $state(1);
|
||||
|
||||
function printNow() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (window.opener) {
|
||||
setTimeout(() => window.print(), 300);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Print Label - {data.device.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<!-- Screen controls -->
|
||||
<div class="no-print mx-auto max-w-lg">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<a href="/devices/{data.device.id}" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">← Back</a>
|
||||
<div class="flex items-center gap-3">
|
||||
<label class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Copies:
|
||||
<input type="number" bind:value={copies} min="1" max="20"
|
||||
class="ml-1 w-14 rounded border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
|
||||
</label>
|
||||
<button onclick={printNow}
|
||||
class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
|
||||
Print
|
||||
</button>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Labels -->
|
||||
{#each Array(copies) as _, i}
|
||||
<div class="label" style="width: 90.3mm; height: 29mm; background: white; color: black; box-sizing: border-box; overflow: hidden; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc;">
|
||||
<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
|
||||
<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
|
||||
{@html data.qrSvg}
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 0; overflow: hidden;">
|
||||
<div style="font-size: 9pt; font-weight: bold; line-height: 1.2; color: black; 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: #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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
@page {
|
||||
size: 90.3mm 29mm;
|
||||
margin: 1mm;
|
||||
}
|
||||
@media print {
|
||||
:global(.no-print),
|
||||
:global(nav),
|
||||
:global(header),
|
||||
:global(aside) {
|
||||
display: none !important;
|
||||
}
|
||||
:global(main) {
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white !important;
|
||||
}
|
||||
.label {
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
break-inside: avoid;
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ locals }) => {
|
||||
if (!locals.user) {
|
||||
redirect(302, '/login');
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
<script lang="ts">
|
||||
import '../../app.css';
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{@render children()}
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let { data } = $props();
|
||||
let copies = $state(1);
|
||||
|
||||
onMount(() => {
|
||||
if (window.opener) {
|
||||
setTimeout(() => window.print(), 500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Print - {data.component.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||||
<a href="/components/{data.component.id}" style="color: #2563eb; font-size: 14px;">← Back</a>
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<label style="font-size: 14px; color: #666;">
|
||||
Copies:
|
||||
<input type="number" bind:value={copies} min="1" max="20"
|
||||
style="width: 50px; margin-left: 4px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;" />
|
||||
</label>
|
||||
<button onclick={() => window.print()}
|
||||
style="background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;">
|
||||
Print
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
|
||||
<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 90mm" (DK-1201), margins minimum.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each Array(copies) as _}
|
||||
<div class="label" style="width: 90.3mm; 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; gap: 3mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
|
||||
<div style="width: 23mm; height: 23mm; flex-shrink: 0;">
|
||||
{@html data.qrSvg}
|
||||
</div>
|
||||
<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;">
|
||||
{data.component.title}
|
||||
</div>
|
||||
<div style="font-size: 7pt; color: #444; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||||
{data.component.componentType}
|
||||
{#if data.component.brand}· {data.component.brand}{/if}
|
||||
</div>
|
||||
{#if data.component.partNumber}
|
||||
<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;">P/N: {data.component.partNumber}</div>
|
||||
{/if}
|
||||
{#if data.component.serialNumber}
|
||||
<div style="font-size: 6pt; color: #666;">S/N: {data.component.serialNumber}</div>
|
||||
{/if}
|
||||
<div style="margin-top: 1mm;">
|
||||
<img src={data.barcodeDataUrl} alt={data.shortId}
|
||||
style="height: 7mm; width: auto; max-width: 55mm; display: block;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
@page {
|
||||
size: 90.3mm 29mm;
|
||||
margin: 0;
|
||||
}
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
.label {
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let { data } = $props();
|
||||
let copies = $state(1);
|
||||
|
||||
onMount(() => {
|
||||
if (window.opener) {
|
||||
setTimeout(() => window.print(), 500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Print - {data.device.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||||
<a href="/devices/{data.device.id}" style="color: #2563eb; font-size: 14px;">← Back</a>
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<label style="font-size: 14px; color: #666;">
|
||||
Copies:
|
||||
<input type="number" bind:value={copies} min="1" max="20"
|
||||
style="width: 50px; margin-left: 4px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;" />
|
||||
</label>
|
||||
<button onclick={() => window.print()}
|
||||
style="background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;">
|
||||
Print
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
|
||||
<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 90mm" (DK-1201), margins minimum.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each Array(copies) as _}
|
||||
<div class="label" style="width: 90.3mm; 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; gap: 3mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
|
||||
<div style="width: 23mm; height: 23mm; flex-shrink: 0;">
|
||||
{@html data.qrSvg}
|
||||
</div>
|
||||
<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;">
|
||||
{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;">
|
||||
{[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;">
|
||||
S/N: {data.device.serialNumber}
|
||||
</div>
|
||||
{/if}
|
||||
<div style="margin-top: 1mm;">
|
||||
<img src={data.barcodeDataUrl} alt={data.shortId}
|
||||
style="height: 7mm; width: auto; max-width: 55mm; display: block;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
@page {
|
||||
size: 90.3mm 29mm;
|
||||
margin: 0;
|
||||
}
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
.label {
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user