57cb8db2fa
Fixed 4 critical mobile UX issues: 1. ✅ Fixed pt-16 Logic Problem: pt-16 applied even when header was hidden Solution: Only add pt-16 when NOT in fullscreen mode Before: <div className={`... ${isStandalone ? 'pt-0' : 'pt-16'}`}> After: <div className={`... ${fullscreen ? 'pt-0' : 'pt-16'}`}> Result: No wasted space when header is hidden 2. ✅ Applied Fullscreen Logic to WP-Admin Fullscreen Problem: Header only hidden in standalone, not wp-admin fullscreen Solution: Hide header on mobile for BOTH modes Before: if (isStandalone && window.innerWidth < 768) return null; After: if (fullscreen && window.innerWidth < 768) return null; Result: Consistent behavior across all fullscreen modes 3. ✅ Non-Fullscreen Layout Status: Already correct, no changes needed Layout: WP Admin Bar → Top Nav → Submenu → Page Header → Content 4. ✅ Redesigned FAB Problems: - Position too high (bottom-72px) - Using Button component (unnecessary) - Rounded rectangle (should be circle) - Wrong shadow intensity Solutions: - Changed to bottom-20 (80px from bottom, above nav) - Direct button element (lighter, faster) - rounded-full (perfect circle) - Better shadow: shadow-lg → shadow-2xl on hover - Added active:scale-95 for tactile feedback - Increased z-index to z-50 Before: <Button size="lg" className="... bottom-[72px] ... rounded-2xl"> After: <button className="... bottom-20 ... rounded-full ... active:scale-95"> Result: Clean, modern FAB with proper Material Design specs Mobile Layout (Fullscreen): ┌─────────────────────────────────┐ │ (No header - no wasted space!) │ ← Fixed! ├─────────────────────────────────┤ │ Submenu (top-0) │ ├─────────────────────────────────┤ │ Page Title │ ├─────────────────────────────────┤ │ Content │ │ │ │ ( + ) │ ← Clean FAB! ├─────────────────────────────────┤ │ Bottom Nav │ └─────────────────────────────────┘ FAB Specs (Material Design): - Size: 56x56px (w-14 h-14) - Shape: Perfect circle (rounded-full) - Position: 16px from right, 80px from bottom - Color: Primary theme color - Shadow: Elevated (shadow-lg) - Hover: More elevated (shadow-2xl) - Active: Scale down (scale-95) - Z-index: 50 (above everything) Files Modified: - App.tsx: Fixed header hide logic and padding - FAB.tsx: Complete redesign Result: Clean, professional mobile UX! ✨
22 lines
620 B
TypeScript
22 lines
620 B
TypeScript
import React from 'react';
|
|
import { Plus } from 'lucide-react';
|
|
import { useFAB } from '@/contexts/FABContext';
|
|
|
|
export function FAB() {
|
|
const { config } = useFAB();
|
|
|
|
if (!config || config.visible === false) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={config.onClick}
|
|
className="fixed bottom-20 right-4 z-50 w-14 h-14 rounded-full bg-primary text-primary-foreground shadow-lg hover:shadow-2xl active:scale-95 transition-all duration-200 flex items-center justify-center md:hidden"
|
|
aria-label={config.label}
|
|
>
|
|
{config.icon || <Plus className="w-6 h-6" />}
|
|
</button>
|
|
);
|
|
}
|