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

fix: standardize string quotes and improve layout in designer and index pages
All checks were successful
Deploy Production / deploy (push) Successful in 2m2s
Details

Browse Source
This commit is contained in:
Frank John Begornia
2026-01-13 21:49:34 +08:00
parent 28a9b17fa7
commit b6403bde4f
2 changed files with 42 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/pages/designer.vue
View File

@@ -43,9 +43,9 @@ const {
} = useSlipmatDesigner(); } = useSlipmatDesigner();
// Active view selector for multi-canvas design // Active view selector for multi-canvas design
const activeView = ref<'front' | 'top' | 'left' | 'right'>('front'); const activeView = ref<"front" | "top" | "left" | "right">("front");
const setActiveView = (view: 'front' | 'top' | 'left' | 'right') => { const setActiveView = (view: "front" | "top" | "left" | "right") => {
activeView.value = view; activeView.value = view;
setActiveCanvas(view); setActiveCanvas(view);
}; };
@@ -147,7 +147,7 @@ const persistDesign = async (designId: string, design: ExportedDesign) => {
designId, designId,
templateId: design.templateId, templateId: design.templateId,
ownerEmail: user.value?.email ?? null, ownerEmail: user.value?.email ?? null,
ownerId: backendUser.value?.id ?? null, ownerId: backendUser.value?.id ?? null,
previewUrl: previewUpload.publicUrl, previewUrl: previewUpload.publicUrl,
productionUrl: productionUpload.publicUrl, productionUrl: productionUpload.publicUrl,
canvasJson: canvasUpload.publicUrl, canvasJson: canvasUpload.publicUrl,
@@ -382,10 +382,10 @@ const handleCheckout = async () => {
</h1> </h1>
</header> </header>
<section class="mt-10 flex flex-col gap-8 lg:grid lg:grid-cols-[320px_minmax(0,1fr)] lg:gap-6"> <section class="mt-10 flex flex-col gap-8 lg:grid lg:gap-6">
<!-- Left Sidebar - Template Picker and Preview (together on desktop, separate on mobile) --> <!-- Left Sidebar - Template Picker and Preview (together on desktop, separate on mobile) -->
<div class="contents lg:block lg:space-y-6"> <!-- <div class="contents lg:block lg:space-y-6"> -->
<!-- <div class="order-1"> <!-- <div class="order-1">
<TemplatePicker <TemplatePicker
:templates="templates" :templates="templates"
:selected-template-id="selectedTemplate.id" :selected-template-id="selectedTemplate.id"
@@ -393,20 +393,22 @@ const handleCheckout = async () => {
/> />
</div> --> </div> -->
<div class="order-3"> <!-- <div class="order-3">
<DesignerPreview <DesignerPreview
:is-checkout-pending="isCheckoutPending" :is-checkout-pending="isCheckoutPending"
:checkout-price="DESIGN_PRICE_USD" :checkout-price="DESIGN_PRICE_USD"
:checkout-error="checkoutError" :checkout-error="checkoutError"
@checkout="handleCheckout" @checkout="handleCheckout"
/> />
</div> </div> -->
</div> <!-- </div> -->
<!-- Designer Canvas - Second on mobile, right column on desktop --> <!-- Designer Canvas - Second on mobile, right column on desktop -->
<div class="order-2 flex flex-col gap-6 lg:order-0"> <div class="order-2 flex flex-col gap-6 lg:order-0">
<!-- View Selector Tabs --> <!-- View Selector Tabs -->
<div class="flex gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2"> <div
class="flex gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2"
>
<button <button
v-for="view in ['front', 'top', 'left', 'right']" v-for="view in ['front', 'top', 'left', 'right']"
:key="view" :key="view"
@@ -415,16 +417,14 @@ const handleCheckout = async () => {
'flex-1 rounded-md px-4 py-2 text-sm font-semibold capitalize transition-all', 'flex-1 rounded-md px-4 py-2 text-sm font-semibold capitalize transition-all',
activeView === view activeView === view
? 'bg-white text-slate-900 shadow-sm' ? 'bg-white text-slate-900 shadow-sm'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900',
]" ]"
> >
{{ view }} View {{ view }} View
</button> </button>
</div> </div>
<div <div class="rounded-3xl border border-slate-200 bg-white shadow-xl">
class="rounded-3xl border border-slate-200 bg-white shadow-xl"
>
<DesignerToolbar <DesignerToolbar
:on-add-text="addTextbox" :on-add-text="addTextbox"
:on-add-circle="() => addShape('circle')" :on-add-circle="() => addShape('circle')"
@@ -449,7 +449,9 @@ const handleCheckout = async () => {
<div class="p-6 space-y-4"> <div class="p-6 space-y-4">
<!-- Canvas for each view --> <!-- Canvas for each view -->
<div v-show="activeView === 'front'" class="canvas-container"> <div v-show="activeView === 'front'" class="canvas-container">
<h3 class="mb-2 text-sm font-semibold text-slate-700">Front View</h3> <h3 class="mb-2 text-sm font-semibold text-slate-700">
Front View
</h3>
<DesignerCanvas <DesignerCanvas
canvas-id="front" canvas-id="front"
:size="displaySize" :size="displaySize"
@@ -458,9 +460,11 @@ const handleCheckout = async () => {
:unregister-canvas="unregisterCanvas" :unregister-canvas="unregisterCanvas"
/> />
</div> </div>
<div v-show="activeView === 'top'" class="canvas-container"> <div v-show="activeView === 'top'" class="canvas-container">
<h3 class="mb-2 text-sm font-semibold text-slate-700">Top View</h3> <h3 class="mb-2 text-sm font-semibold text-slate-700">
Top View
</h3>
<DesignerCanvas <DesignerCanvas
canvas-id="top" canvas-id="top"
:size="displaySize" :size="displaySize"
@@ -469,9 +473,11 @@ const handleCheckout = async () => {
:unregister-canvas="unregisterCanvas" :unregister-canvas="unregisterCanvas"
/> />
</div> </div>
<div v-show="activeView === 'left'" class="canvas-container"> <div v-show="activeView === 'left'" class="canvas-container">
<h3 class="mb-2 text-sm font-semibold text-slate-700">Left View</h3> <h3 class="mb-2 text-sm font-semibold text-slate-700">
Left View
</h3>
<DesignerCanvas <DesignerCanvas
canvas-id="left" canvas-id="left"
:size="displaySize" :size="displaySize"
@@ -480,9 +486,11 @@ const handleCheckout = async () => {
:unregister-canvas="unregisterCanvas" :unregister-canvas="unregisterCanvas"
/> />
</div> </div>
<div v-show="activeView === 'right'" class="canvas-container"> <div v-show="activeView === 'right'" class="canvas-container">
<h3 class="mb-2 text-sm font-semibold text-slate-700">Right View</h3> <h3 class="mb-2 text-sm font-semibold text-slate-700">
Right View
</h3>
<DesignerCanvas <DesignerCanvas
canvas-id="right" canvas-id="right"
:size="displaySize" :size="displaySize"
@@ -493,12 +501,20 @@ const handleCheckout = async () => {
</div> </div>
<p class="mt-4 text-sm text-slate-600"> <p class="mt-4 text-sm text-slate-600">
Design each view of your table jersey separately. Switch between views using the tabs above. Design each view of your table jersey separately. Switch between
Safe zone and bleed guides update automatically when you switch templates. views using the tabs above. Safe zone and bleed guides update
automatically when you switch templates.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<DesignerPreview
:is-checkout-pending="isCheckoutPending"
:checkout-price="DESIGN_PRICE_USD"
:checkout-error="checkoutError"
@checkout="handleCheckout"
/>
</section> </section>
</div> </div>
</main> </main>

70
app/pages/index.vue
View File

@@ -38,7 +38,7 @@ onMounted(() => {
> >
<!-- Top Section - Split Layout --> <!-- Top Section - Split Layout -->
<div <div
class="flex flex-1 flex-col items-center justify-between gap-8 lg:flex-row lg:gap-16" class="flex flex-1 flex-col-reverse items-center justify-between gap-8 lg:flex-row lg:gap-16"
> >
<!-- Left Side - Title & Description --> <!-- Left Side - Title & Description -->
<div class="w-full space-y-8 text-center lg:w-1/2 lg:text-left"> <div class="w-full space-y-8 text-center lg:w-1/2 lg:text-left">
@@ -54,70 +54,6 @@ onMounted(() => {
Design custom jerseys for your table Design custom jerseys for your table
</p> </p>
<!-- Simple preview 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">
<div
class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-slate-100 shadow-lg overflow-hidden"
>
<!-- Rotating Table with Fitted Cover -->
<div
class="animate-spin-slow relative"
style="transform-style: preserve-3d"
>
<div class="relative">
<!-- Table with fitted cover -->
<div class="relative">
<!-- Table Top -->
<div
class="relative h-24 w-40 rounded-t-sm bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 shadow-xl"
>
<!-- Jersey design on top of cover -->
<div
class="absolute inset-4 flex items-center justify-center rounded-lg bg-gradient-to-br from-blue-400 via-white to-red-400 shadow-lg border-2 border-slate-300"
>
<div class="text-center">
<div class="text-2xl font-bold text-slate-800">
23
</div>
<div
class="text-[7px] font-semibold text-slate-600 tracking-wider"
>
CUSTOM
</div>
</div>
</div>
</div>
<!-- Fitted Cover Skirt (draping down) -->
<div
class="absolute top-24 left-0 right-0 h-16 bg-gradient-to-b from-slate-800 via-slate-900 to-slate-950 rounded-b-sm shadow-2xl"
>
<!-- Fabric folds/creases -->
<div
class="absolute inset-0 opacity-30"
style="
background: repeating-linear-gradient(
90deg,
transparent,
transparent 8px,
rgba(0, 0, 0, 0.3) 8px,
rgba(0, 0, 0, 0.3) 9px
);
"
></div>
<!-- Shadow at bottom -->
<div
class="absolute bottom-0 left-0 right-0 h-2 bg-black/40"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-base text-slate-600 sm:text-lg"> <p class="text-base text-slate-600 sm:text-lg">
Create professional, print-ready jersey designs in minutes Create professional, print-ready jersey designs in minutes
</p> </p>
@@ -175,10 +111,10 @@ onMounted(() => {
</div> </div>
<!-- Right Side - 3D Model --> <!-- Right Side - 3D Model -->
<div class="relative hidden w-full lg:block lg:w-1/2"> <div class="relative w-full lg:w-1/2">
<div class="relative mx-auto max-w-4xl"> <div class="relative mx-auto max-w-4xl">
<div <div
class="relative mx-auto h-[300px] w-[300px] sm:h-[600px] sm:w-[600px]" class="relative mx-auto h-[300px] w-[300px] sm:h-[400px] sm:w-[400px] md:h-[500px] md:w-[500px] lg:h-[600px] lg:w-[600px]"
> >
<div <div
class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-300 bg-linear-to-br from-slate-700 to-slate-900 shadow-xl overflow-hidden" class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-300 bg-linear-to-br from-slate-700 to-slate-900 shadow-xl overflow-hidden"