g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve browser detection and table UX for Firefox
All checks were successful
Build Frontend / build (push) Successful in 1m10s
Details

Browse Source 
Standardizes browser detection logic across admin and storefront pages to more accurately identify Firefox. Updates table rendering logic to provide better compatibility and fallback for Firefox, including conditional use of AnimatePresence and improved loading/empty states. Refines table UI styles for consistency and accessibility.
This commit is contained in:
g
2026-01-12 08:59:04 +00:00
parent 064cd7a486
commit 3f9d28bf1b
7 changed files with 400 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/tables/order-table.tsx
View File

@@ -158,10 +158,12 @@ export default function OrderTable() {
// Fetch orders with server-side pagination
// State for browser detection
// Browser detection
const [isFirefox, setIsFirefox] = useState(false);
useEffect(() => {
setIsFirefox(navigator.userAgent.toLowerCase().indexOf("firefox") > -1);
const ua = navigator.userAgent.toLowerCase();
setIsFirefox(ua.includes("firefox") && !ua.includes("chrome"));
}, []);
const fetchOrders = useCallback(async () => {
@@ -401,9 +403,9 @@ export default function OrderTable() {
return (
<div className="space-y-4">
<Card className="border-white/10 bg-black/40 backdrop-blur-xl shadow-2xl overflow-hidden rounded-xl">
<Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
{/* Filters header */}
<div className="p-4 border-b border-white/5 bg-white/[0.02]">
<div className="p-4 border-b border-border/50 bg-muted/30">
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
<div className="flex flex-col sm:flex-row gap-2 sm:items-center w-full lg:w-auto">
<StatusFilter
@@ -423,7 +425,7 @@ export default function OrderTable() {
disabled={exporting}
variant="outline"
size="sm"
className="bg-black/20 border-white/10 hover:bg-white/5 hover:text-white transition-colors"
className="bg-background/50 border-border/50 hover:bg-muted/50 transition-colors"
>
{exporting ? (
<>
@@ -443,7 +445,7 @@ export default function OrderTable() {
<div className="flex items-center gap-2 self-end lg:self-auto">
<AlertDialog>
<AlertDialogTrigger asChild>
<Button disabled={selectedOrders.size === 0 || isShipping} className="shadow-lg bg-indigo-600 hover:bg-indigo-700 text-white border-0 transition-all hover:scale-105 active:scale-95">
<Button disabled={selectedOrders.size === 0 || isShipping} className="shadow-md">
<Truck className="mr-2 h-4 w-4" />
{isShipping ? (
<Loader2 className="h-4 w-4 animate-spin" />
@@ -484,8 +486,8 @@ export default function OrderTable() {
)}
<div className="max-h-[calc(100vh-350px)] overflow-auto">
<Table>
<TableHeader className="bg-white/[0.02] sticky top-0 z-20 backdrop-blur-md">
<TableRow className="hover:bg-transparent border-white/5">
<TableHeader className="bg-muted/30 sticky top-0 z-20">
<TableRow className="hover:bg-transparent border-border/50">
<TableHead className="w-12">
<Checkbox
checked={selectedOrders.size === paginatedOrders.length && paginatedOrders.length > 0}
@@ -525,7 +527,7 @@ export default function OrderTable() {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}
className="group hover:bg-white/[0.03] border-b border-white/5 transition-colors"
className="group hover:bg-muted/50 border-b border-border/50 transition-colors"
>
<TableCell>
<Checkbox
@@ -641,11 +643,11 @@ export default function OrderTable() {
<motion.tr
key={order._id}
layout
initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.98 }}
transition={{ duration: 0.2 }}
className="group hover:bg-white/[0.03] border-b border-white/5 transition-colors"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2, delay: index * 0.03 }}
className="group hover:bg-muted/50 border-b border-border/50 transition-colors"
>
<TableCell>
<Checkbox