fix(review): UI nits — margins, buttons, moisture, live validation

Post-publish: hide Back while publishing; drop Settings/Slabs chrome on
done (remove unused white Slabs control). Review/App horizontal padding.
Unify Create desc / View prompt / Create title|short as .btn-sec.
Moisture kd default: sync select after form mount; persist via commit.
Ready/missing update on input (debounced) without blur.
This commit is contained in:
grokbot_ty
2026-09-26 11:08:08 -07:00
parent 88278a55e8
commit 5651a38058
4 changed files with 91 additions and 39 deletions
+9 -5
View File
@@ -77,11 +77,15 @@
<h1>Publish to WooCommerce</h1>
<p class="meta">SKU {slab?.sku || '—'} · {slab?.bdft != null ? slab.bdft.toFixed(1) : '—'} bdft · {slab?.price != null ? `$${slab.price.toFixed(2)}` : '—'}</p>
{#if st.phase === 'idle' || st.phase === 'working'}
<button type="button" class="primary" data-testid="publish-btn" on:click={doPublish} disabled={st.phase === 'working'}>
{st.phase === 'working' ? 'Publishing…' : 'Publish'}
{#if st.phase === 'idle'}
<button type="button" class="primary" data-testid="publish-btn" on:click={doPublish}>
Publish
</button>
<button type="button" class="ghost" data-testid="back-review" on:click={backToReview}>Back to Review</button>
{:else if st.phase === 'working'}
<button type="button" class="primary" data-testid="publish-btn" disabled>
Publishing…
</button>
<button type="button" class="ghost" data-testid="back-review" on:click={backToReview} disabled={st.phase === 'working'}>Back to Review</button>
{/if}
{#if st.phase === 'success'}
@@ -119,7 +123,7 @@
{/if}
<style>
.pub { max-width: 520px; margin: 0 auto; color: #eee; }
.pub { max-width: 520px; margin: 0 auto; color: #eee; padding: 4px 4px 16px; box-sizing: border-box; }
h1 { font-size: 1.3rem; margin: 0 0 6px; } h2 { font-size: 1.1rem; margin: 0 0 6px; }
.meta { color: #888; font-size: .82rem; margin: 4px 0 10px; }
.primary { width: 100%; padding: 14px; font-size: 1rem; border-radius: 3px; border: 0; background: #00e5ff; color: #002; font-weight: 700; margin-top: 12px; }