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> </div>
{/* Controls */} {/* Controls */}
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-4">
<div> <div>
<h1 className="font-display text-4xl">{product.name}</h1> <h1 className="font-display text-4xl">{product.name}</h1>
<p className="mt-2 text-muted">{product.description}</p> <p className="mt-2 text-muted">{product.description}</p>
@@ -1120,38 +1120,33 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-4">
<div> <div>
<p className="tag-label mb-3">Color</p> <p className="tag-label mb-2">Color</p>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-2">
{product.colors.map((c) => ( {product.colors.map((c) => (
<button <button
key={c} key={c}
onClick={() => setColor(c)} onClick={() => setColor(c)}
aria-label={`Choose color ${c}`} aria-label={`Choose color ${c}`}
className={`h-9 w-9 rounded-full border transition-transform ${ className={`h-8 w-8 rounded-full border transition-transform ${
color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-2 ring-offset-paper' : 'border-line' color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-1 ring-offset-paper' : 'border-line'
}`} }`}
style={{ backgroundColor: c }} style={{ backgroundColor: c }}
/> />
))} ))}
</div> </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> </div>
{product.sizes.length > 0 && ( {product.sizes.length > 0 && (
<div> <div>
<p className="tag-label mb-3">Size</p> <p className="tag-label mb-2">Size</p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1">
{product.sizes.map((s) => ( {product.sizes.map((s) => (
<button <button
key={s} key={s}
onClick={() => setSize(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 size === s
? 'border-clay bg-clay text-paper' ? 'border-clay bg-clay text-paper'
: 'border-line text-ink hover:border-clay hover:text-clay' : 'border-line text-ink hover:border-clay hover:text-clay'
@@ -1163,11 +1158,18 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
</div> </div>
</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 && ( {canPersonalize && (
<div> <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>} Your design {hasBack && <span className="normal-case text-muted">— editing the {view}</span>}
</p> </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'); const images = view === 'front' ? elementsFront.filter(el => el.type === 'image') : elementsBack.filter(el => el.type === 'image');
return images.length > 0 ? ( return images.length > 0 ? (
<div className="mb-4 space-y-3"> <div className="mb-3 grid gap-3">
{images.map((img, idx) => ( {images.map((img, idx) => (
<div key={img.id} className="border border-line bg-surface p-3"> <div key={img.id} className="border border-line bg-surface p-2">
<p className="tag-label mb-2">Image {idx + 1} Dimensions</p> <p className="text-xs font-semibold mb-2">Image {idx + 1}</p>
<div className="flex gap-3"> <div className="flex gap-2">
<label className="flex flex-col gap-1 flex-1"> <label className="flex flex-col gap-1 flex-1">
<span className="text-xs text-muted">Width (cm)</span> <span className="text-xs text-muted">Width (cm)</span>
<input <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'); const texts = view === 'front' ? elementsFront.filter(el => el.type === 'text') : elementsBack.filter(el => el.type === 'text');
return texts.length > 0 ? ( return texts.length > 0 ? (
<div className="mb-4 space-y-3"> <div className="mb-2 space-y-2">
{texts.map((text, idx) => ( {texts.map((text, idx) => (
<div key={text.id} className="border border-line bg-surface p-3"> <div key={text.id} className="border border-line bg-surface p-2">
<p className="tag-label mb-3">Font {idx + 1}</p> <p className="text-xs font-semibold mb-2">Font {idx + 1}</p>
<div className="space-y-3"> <div className="space-y-2">
<label className="flex flex-col gap-1"> <label className="flex flex-col gap-1">
<span className="text-xs text-muted">Text</span> <span className="text-xs text-muted">Text</span>
<input <input