Reorganize design canvas layout to be more compact
- 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
co-authored by
Claude Haiku 4.5
Claude Haiku 4.5
parent
10af792261
commit
5efc1155b9
@@ -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,54 +1120,56 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="tag-label mb-3">Color</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{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'
|
||||
}`}
|
||||
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't change color — your pick is
|
||||
still saved with the order.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{product.sizes.length > 0 && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="tag-label mb-3">Size</p>
|
||||
<p className="tag-label mb-2">Color</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{product.sizes.map((s) => (
|
||||
{product.colors.map((c) => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setSize(s)}
|
||||
className={`min-w-[44px] border px-3 py-2 text-sm transition-colors ${
|
||||
size === s
|
||||
? 'border-clay bg-clay text-paper'
|
||||
: 'border-line text-ink hover:border-clay hover:text-clay'
|
||||
key={c}
|
||||
onClick={() => setColor(c)}
|
||||
aria-label={`Choose color ${c}`}
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{product.sizes.length > 0 && (
|
||||
<div>
|
||||
<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-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'
|
||||
}`}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</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'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
|
||||
|
||||
Reference in New Issue
Block a user