feat: Reorganize print name and date fields into a two-column grid in print modals and reduce STL viewer dimensions in the edit modal.

This commit is contained in:
2025-12-25 20:10:35 +00:00
parent 6802d3ca7f
commit 5493144933
2 changed files with 58 additions and 47 deletions

View File

@@ -236,27 +236,36 @@
</div>
</div>
<Input label="Print Name" name="name" value={print.name} required />
<div class="grid grid-cols-2 gap-4">
<Input
label="Print Name"
name="name"
value={print.name}
required
/>
<!-- Date Field -->
<div class="space-y-2">
<!-- svelte-ignore a11y_label_has_associated_control -->
<label
class="block text-xs font-medium text-slate-400 uppercase tracking-wider"
>
Date
</label>
<div class="relative">
<Icon
icon="mdi:calendar"
class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 pointer-events-none"
/>
<input
type="date"
name="date"
value={new Date(print.date).toISOString().split("T")[0]}
class="w-full rounded-lg bg-slate-800/50 border border-slate-700 pl-10 pr-4 py-2.5 text-sm text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/30 transition-all"
/>
<!-- Date Field -->
<div class="space-y-2">
<!-- svelte-ignore a11y_label_has_associated_control -->
<label
class="block text-xs font-medium text-slate-400 uppercase tracking-wider"
>
Date
</label>
<div class="relative">
<Icon
icon="mdi:calendar"
class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 pointer-events-none"
/>
<input
type="date"
name="date"
value={new Date(print.date)
.toISOString()
.split("T")[0]}
class="w-full rounded-lg bg-slate-800/50 border border-slate-700 pl-10 pr-4 py-2.5 text-sm text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/30 transition-all"
/>
</div>
</div>
</div>
@@ -278,8 +287,8 @@
{#await import("$lib/components/STLViewer.svelte") then { default: STLViewer }}
<STLViewer
modelPath={print.stl_file}
width={400}
height={250}
width={350}
height={180}
/>
{/await}
</div>

View File

@@ -185,32 +185,34 @@
</div>
</div>
<Input
label="Print Name"
name="name"
placeholder="Dragon Scale Mail"
required
/>
<div class="grid grid-cols-2 gap-4">
<Input
label="Print Name"
name="name"
placeholder="Dragon Scale Mail"
required
/>
<!-- Date Field -->
<div class="space-y-2">
<!-- svelte-ignore a11y_label_has_associated_control -->
<label
class="block text-xs font-medium text-slate-400 uppercase tracking-wider"
>
Date
</label>
<div class="relative">
<Icon
icon="mdi:calendar"
class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 pointer-events-none"
/>
<input
type="date"
name="date"
value={new Date().toISOString().split("T")[0]}
class="w-full rounded-lg bg-slate-800/50 border border-slate-700 pl-10 pr-4 py-2.5 text-sm text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/30 transition-all"
/>
<!-- Date Field -->
<div class="space-y-2">
<!-- svelte-ignore a11y_label_has_associated_control -->
<label
class="block text-xs font-medium text-slate-400 uppercase tracking-wider"
>
Date
</label>
<div class="relative">
<Icon
icon="mdi:calendar"
class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 pointer-events-none"
/>
<input
type="date"
name="date"
value={new Date().toISOString().split("T")[0]}
class="w-full rounded-lg bg-slate-800/50 border border-slate-700 pl-10 pr-4 py-2.5 text-sm text-slate-100 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/30 transition-all"
/>
</div>
</div>
</div>