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"
>

16
app/pages/index.vue
View File

@@ -26,6 +26,18 @@ const startDesigning = () => {
<p class="text-2xl font-semibold text-sky-400 drop-shadow-lg sm:text-3xl md:text-4xl">
Design custom slipmats for your vinyl
</p>
<!-- Turntable for mobile view -->
<div class="relative mx-auto my-8 block lg:hidden">
<div class="relative mx-auto h-[280px] w-[280px] sm:h-80 sm:w-80">
<img
src="/SLIPMATZ.svg"
alt="Slipmatz Logo"
class="absolute inset-0 h-full w-full object-contain"
/>
</div>
</div>
<p class="text-base text-slate-300 drop-shadow-lg sm:text-lg">
Create professional, print-ready slipmat designs in minutes
</p>
@@ -66,10 +78,10 @@ const startDesigning = () => {
</div>
<!-- Right Side - Animated Slipmat -->
<div class="relative w-full lg:w-1/2">
<div class="relative hidden w-full lg:block lg:w-1/2">
<div class="relative mx-auto max-w-4xl">
<!-- Turntable Base -->
<!-- <div class="absolute -inset-32 rounded-full bg-linear-to-br from-slate-800 to-slate-900 opacity-50 blur-3xl"></div> -->
<div class="absolute -inset-32 rounded-full bg-linear-to-br from-slate-800 to-slate-900 opacity-50 blur-3xl"></div>
<!-- Spinning Slipmat with SVG -->
<div class="relative mx-auto h-[300px] w-[300px] sm:h-[900px] sm:w-[900px]">