webmaster/slipmatz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance layout for designer page and add mobile turntable view

Browse Source
This commit is contained in:
Frank John Begornia
2025-12-02 23:06:22 +08:00
parent 39c820cf21
commit 0e4e41d672
2 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/pages/designer.vue
View File

@@ -373,23 +373,29 @@ const handleCheckout = async () => {
</h1>
</header>
<section class="mt-10 grid gap-8 lg:grid-cols-[320px_minmax(0,1fr)]">
<div class="space-y-6">
<TemplatePicker
:templates="templates"
:selected-template-id="selectedTemplate.id"
@select="handleTemplateSelect"
/>
<section class="mt-10 flex flex-col gap-8 lg:grid lg:grid-cols-[320px_minmax(0,1fr)] lg:gap-6">
<!-- Left Sidebar - Template Picker and Preview (together on desktop, separate on mobile) -->
<div class="contents lg:block lg:space-y-6">
<div class="order-1">
<TemplatePicker
:templates="templates"
:selected-template-id="selectedTemplate.id"
@select="handleTemplateSelect"
/>
</div>
<DesignerPreview
:is-checkout-pending="isCheckoutPending"
:checkout-price="DESIGN_PRICE_USD"
:checkout-error="checkoutError"
@checkout="handleCheckout"
/>
<div class="order-3">
<DesignerPreview
:is-checkout-pending="isCheckoutPending"
:checkout-price="DESIGN_PRICE_USD"
:checkout-error="checkoutError"
@checkout="handleCheckout"
/>
</div>
</div>
<div class="flex flex-col gap-6">
<!-- Designer Canvas - Second on mobile, right column on desktop -->
<div class="order-2 flex flex-col gap-6 lg:order-0">
<div
class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black shadow-2xl shadow-slate-950/60"
>