andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize design canvas layout to be more compact

Browse Source 
- Reduce main gap from gap-8 to gap-4 for tighter vertical spacing
- Put color and size in a 2-column grid layout
- Reduce image dimension section spacing and padding
- Reduce font properties section spacing and padding
- Smaller section headings to save vertical space
- More compact overall layout

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-18 16:26:03 +01:00
co-authored by Claude Haiku 4.5
parent 10af792261
commit 5efc1155b9
1 changed files with 47 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DesignCanvas.tsx
+25 -23
View File
@@ -1086,7 +1086,7 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
</div>
{/* Controls */}
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-4">
<div>
<h1 className="font-display text-4xl">{product.name}</h1>
<p className="mt-2 text-muted">{product.description}</p>
@@ -1120,38 +1120,33 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="tag-label mb-3">Color</p>
<div className="flex flex-wrap gap-3">
<p className="tag-label mb-2">Color</p>
<div className="flex flex-wrap gap-2">
{product.colors.map((c) => (
<button
key={c}
onClick={() => setColor(c)}
aria-label={`Choose color ${c}`}
className={`h-9 w-9 rounded-full border transition-transform ${
color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-2 ring-offset-paper' : 'border-line'
className={`h-8 w-8 rounded-full border transition-transform ${
color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-1 ring-offset-paper' : 'border-line'
}`}
style={{ backgroundColor: c }}
/>
))}
</div>
{product.imageUrl && !product.photoRecolorable && Object.keys(product.colorPhotos).length === 0 && (
<p className="mt-2 text-xs text-muted">
This product uses a real photo, so the picture won&apos;t change color — your pick is
still saved with the order.
</p>
)}
</div>
{product.sizes.length > 0 && (
<div>
<p className="tag-label mb-3">Size</p>
<div className="flex flex-wrap gap-2">
<p className="tag-label mb-2">Size</p>
<div className="flex flex-wrap gap-1">
{product.sizes.map((s) => (
<button
key={s}
onClick={() => setSize(s)}
className={`min-w-[44px] border px-3 py-2 text-sm transition-colors ${
className={`min-w-[44px] border px-2 py-1 text-xs transition-colors ${
size === s
? 'border-clay bg-clay text-paper'
: 'border-line text-ink hover:border-clay hover:text-clay'
@@ -1163,11 +1158,18 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
</div>
</div>
)}
</div>
{product.imageUrl && !product.photoRecolorable && Object.keys(product.colorPhotos).length === 0 && (
<p className="text-xs text-muted">
This product uses a real photo, so the picture won&apos;t change color — your pick is
still saved with the order.
</p>
)}
{canPersonalize && (
<div>
<p className="tag-label mb-3">
<p className="tag-label mb-2">
Your design {hasBack && <span className="normal-case text-muted">— editing the {view}</span>}
</p>
@@ -1175,11 +1177,11 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
{(() => {
const images = view === 'front' ? elementsFront.filter(el => el.type === 'image') : elementsBack.filter(el => el.type === 'image');
return images.length > 0 ? (
<div className="mb-4 space-y-3">
<div className="mb-3 grid gap-3">
{images.map((img, idx) => (
<div key={img.id} className="border border-line bg-surface p-3">
<p className="tag-label mb-2">Image {idx + 1} Dimensions</p>
<div className="flex gap-3">
<div key={img.id} className="border border-line bg-surface p-2">
<p className="text-xs font-semibold mb-2">Image {idx + 1}</p>
<div className="flex gap-2">
<label className="flex flex-col gap-1 flex-1">
<span className="text-xs text-muted">Width (cm)</span>
<input
@@ -1227,11 +1229,11 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
{(() => {
const texts = view === 'front' ? elementsFront.filter(el => el.type === 'text') : elementsBack.filter(el => el.type === 'text');
return texts.length > 0 ? (
<div className="mb-4 space-y-3">
<div className="mb-2 space-y-2">
{texts.map((text, idx) => (
<div key={text.id} className="border border-line bg-surface p-3">
<p className="tag-label mb-3">Font {idx + 1}</p>
<div className="space-y-3">
<div key={text.id} className="border border-line bg-surface p-2">
<p className="text-xs font-semibold mb-2">Font {idx + 1}</p>
<div className="space-y-2">
<label className="flex flex-col gap-1">
<span className="text-xs text-muted">Text</span>
<input