Skip to content

Commit 38a9a2d

Browse files
lead-matrixlead-matrix
committed
fix: resolve mobile layout issues and product image display logic
1 parent b26c535 commit 38a9a2d

File tree

4 files changed

+33
-64
lines changed

4 files changed

+33
-64
lines changed

‎components/ProductCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export function ProductCard({
100100
alt={product.title}
101101
fill
102102
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
103-
className="object-contain object-center transition-transform duration-500 group-hover:scale-105"
103+
className="object-cover object-center transition-transform duration-500 group-hover:scale-105"
104104
onError={() => setImageError(true)}
105105
/>
106106

‎components/admin/AdminLayoutClient.tsx‎

Lines changed: 2 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,7 @@ const NAV_ITEMS = [
3434
{ href: "/admin/guide", icon: BookOpen, label: "How to Use" },
3535
];
3636

37-
const MOBILE_BOTTOM_NAV = [
38-
{ href: "/admin", icon: LayoutDashboard, label: "Home", exact: true },
39-
{ href: "/admin/products", icon: Package, label: "Products" },
40-
{ href: "/admin/orders", icon: ShoppingCart, label: "Orders" },
41-
{ href: "/admin/settings", icon: Settings, label: "Settings" },
42-
{ href: "/admin/guide", icon: BookOpen, label: "Guide" },
43-
];
37+
4438

4539
interface AdminLayoutClientProps {
4640
children: React.ReactNode;
@@ -311,39 +305,12 @@ export default function AdminLayoutClient({ children }: AdminLayoutClientProps)
311305
</div>
312306
</header>
313307

314-
<main className="flex-1 overflow-y-auto p-4 md:p-8 pb-24 md:pb-8 scroll-smooth">
308+
<main className="flex-1 overflow-y-auto p-4 md:p-8 pb-8 scroll-smooth">
315309
<div className="max-w-7xl mx-auto">
316310
{children}
317311
</div>
318312
</main>
319313
</div>
320-
321-
{/* ── MOBILE BOTTOM NAV ── */}
322-
<nav className="md:hidden fixed bottom-0 left-0 w-full bg-[#0D0D0F] border-t border-white/[0.06] z-30 px-2 py-2">
323-
<div className="flex items-center justify-between">
324-
{MOBILE_BOTTOM_NAV.map(({ href, icon: Icon, label, exact }) => {
325-
const active = exact ? pathname === href : pathname.startsWith(href) && href !== "/admin";
326-
const isOrders = href === "/admin/orders";
327-
return (
328-
<Link
329-
key={href}
330-
href={href}
331-
className={`flex flex-col items-center gap-1 p-2 flex-1 transition-all relative ${
332-
active ? "text-[#D4AF37]" : "text-white/30 hover:text-white"
333-
}`}
334-
>
335-
<Icon className="w-5 h-5" />
336-
<span className="text-[9px] font-bold uppercase tracking-wide">{label}</span>
337-
{isOrders && unfulfilledCount > 0 && (
338-
<span className="absolute top-1 right-3 bg-amber-500 text-black text-[8px] font-black w-4 h-4 rounded-full flex items-center justify-center">
339-
{unfulfilledCount}
340-
</span>
341-
)}
342-
</Link>
343-
);
344-
})}
345-
</div>
346-
</nav>
347314
</div>
348315
);
349316
}

‎components/admin/FulfillmentRitual.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export function FulfillmentRitual({ order, isOpen, onOpenChange, onSuccess }: Fu
164164
/>
165165
</div>
166166

167-
<div className="p-8">
167+
<div className="p-4 sm:p-8">
168168
<DialogHeader className="mb-8">
169169
<DialogTitle className="text-2xl font-serif italic tracking-luxury uppercase flex items-center gap-3">
170170
<Package className="w-5 h-5 text-gold" />
@@ -185,34 +185,36 @@ export function FulfillmentRitual({ order, isOpen, onOpenChange, onSuccess }: Fu
185185
{order.order_items?.map((item: any) => {
186186
const remaining = (item.quantity || 0) - (item.fulfilled_quantity || 0)
187187
return (
188-
<div key={item.id} className={`flex items-center gap-4 p-3 rounded-luxury transition-all ${selectedItems[item.id] > 0 ? 'bg-gold/5 border border-gold/20' : 'bg-black/20 border border-transparent opacity-60'}`}>
189-
<div className="w-12 h-12 bg-black/40 border border-white/10 rounded overflow-hidden relative flex-shrink-0">
190-
<Image
191-
src={item.product_variants?.products?.images?.[0] || '/placeholder.png'}
192-
alt="Asset"
193-
fill
194-
className="object-cover"
195-
/>
196-
</div>
197-
<div className="flex-grow">
198-
<p className="text-[10px] font-medium text-white truncate">{item.product_variants?.products?.title}</p>
199-
<p className="text-[8px] text-white/40 uppercase tracking-widest">{item.product_variants?.name}</p>
200-
<div className="flex items-center gap-2 mt-1">
201-
<span className="text-[7px] bg-white/10 text-white/60 px-1.5 py-0.5 rounded uppercase tracking-tighter">
202-
Total: {item.quantity}
203-
</span>
204-
<span className="text-[7px] bg-emerald-500/10 text-emerald-400 px-1.5 py-0.5 rounded uppercase tracking-tighter">
205-
Shipped: {item.fulfilled_quantity || 0}
206-
</span>
188+
<div key={item.id} className={`flex flex-col sm:flex-row items-start sm:items-center gap-4 p-3 rounded-luxury transition-all ${selectedItems[item.id] > 0 ? 'bg-gold/5 border border-gold/20' : 'bg-black/20 border border-transparent opacity-60'}`}>
189+
<div className="flex items-center gap-4 w-full sm:w-auto flex-grow overflow-hidden">
190+
<div className="w-12 h-12 bg-black/40 border border-white/10 rounded overflow-hidden relative flex-shrink-0">
191+
<Image
192+
src={item.product_variants?.products?.images?.[0] || '/placeholder.png'}
193+
alt="Asset"
194+
fill
195+
className="object-cover"
196+
/>
197+
</div>
198+
<div className="flex-grow min-w-0">
199+
<p className="text-[10px] font-medium text-white truncate">{item.product_variants?.products?.title}</p>
200+
<p className="text-[8px] text-white/40 uppercase tracking-widest truncate">{item.product_variants?.name}</p>
201+
<div className="flex items-center gap-2 mt-1 flex-wrap">
202+
<span className="text-[7px] bg-white/10 text-white/60 px-1.5 py-0.5 rounded uppercase tracking-tighter whitespace-nowrap">
203+
Total: {item.quantity}
204+
</span>
205+
<span className="text-[7px] bg-emerald-500/10 text-emerald-400 px-1.5 py-0.5 rounded uppercase tracking-tighter whitespace-nowrap">
206+
Shipped: {item.fulfilled_quantity || 0}
207+
</span>
208+
</div>
207209
</div>
208210
</div>
209-
<div className="flex items-center gap-3">
210-
<div className="text-right">
211-
<p className="text-[8px] text-white/30 uppercase tracking-widest mb-1">To Ship</p>
212-
<div className="flex items-center bg-black/40 border border-white/10 rounded-sm overflow-hidden">
211+
<div className="flex items-center gap-3 w-full sm:w-auto justify-between sm:justify-end mt-2 sm:mt-0 pt-3 sm:pt-0 border-t border-white/5 sm:border-0">
212+
<div className="text-left sm:text-right w-full flex items-center justify-between sm:block">
213+
<p className="text-[8px] text-white/30 uppercase tracking-widest mb-0 sm:mb-1">To Ship</p>
214+
<div className="flex items-center bg-black/40 border border-white/10 rounded-sm overflow-hidden flex-shrink-0">
213215
<button
214216
onClick={() => handleQuantityChange(item.id, selectedItems[item.id] - 1, remaining)}
215-
className="px-2 py-2 min-w-[44px] min-h-[44px] text-white/40 hover:text-white hover:bg-white/5 transition-all flex items-center justify-center"
217+
className="px-2 py-2 min-w-[40px] sm:min-w-[44px] min-h-[40px] sm:min-h-[44px] text-white/40 hover:text-white hover:bg-white/5 transition-all flex items-center justify-center"
216218
>-</button>
217219
<input
218220
type="number"
@@ -222,7 +224,7 @@ export function FulfillmentRitual({ order, isOpen, onOpenChange, onSuccess }: Fu
222224
/>
223225
<button
224226
onClick={() => handleQuantityChange(item.id, selectedItems[item.id] + 1, remaining)}
225-
className="px-2 py-2 min-w-[44px] min-h-[44px] text-white/40 hover:text-white hover:bg-white/5 transition-all flex items-center justify-center"
227+
className="px-2 py-2 min-w-[40px] sm:min-w-[44px] min-h-[40px] sm:min-h-[44px] text-white/40 hover:text-white hover:bg-white/5 transition-all flex items-center justify-center"
226228
disabled={selectedItems[item.id] >= remaining}
227229
>+</button>
228230
</div>
@@ -339,7 +341,7 @@ export function FulfillmentRitual({ order, isOpen, onOpenChange, onSuccess }: Fu
339341
)}
340342
</div>
341343

342-
<DialogFooter className="p-8 pt-0 flex sm:justify-between items-center bg-black/20 border-t border-white/5">
344+
<DialogFooter className="p-4 sm:p-8 pt-0 flex flex-col sm:flex-row sm:justify-between items-start sm:items-center gap-4 bg-black/20 border-t border-white/5 sm:bg-transparent sm:border-t-0 mt-4 sm:mt-0 pb-4 sm:pb-8">
343345
{step === 'verify' && (
344346
<>
345347
<div className="text-left">

‎features/home/components/HomeCategoryGrid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function HomeCategoryGrid({ categories }: { categories: Category[] }) {
3636
src={category.image_url || "/logo.jpg"}
3737
alt={category.name}
3838
fill
39-
className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
39+
className="object-contain transition-transform duration-700 ease-out group-hover:scale-105"
4040
/>
4141
{/* Overlay */}
4242
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-500" />

0 commit comments

Comments
 (0)