fix: Clean up mobile layout and FAB styling
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! ✨
This commit is contained in:
@@ -329,8 +329,8 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
|
||||
}
|
||||
};
|
||||
|
||||
// Hide header completely on mobile in standalone mode
|
||||
if (isStandalone && typeof window !== 'undefined' && window.innerWidth < 768) {
|
||||
// Hide header completely on mobile in fullscreen mode (both standalone and wp-admin fullscreen)
|
||||
if (fullscreen && typeof window !== 'undefined' && window.innerWidth < 768) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -485,7 +485,7 @@ function Shell() {
|
||||
</main>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`flex flex-1 flex-col min-h-0 ${isStandalone ? 'pt-0' : 'pt-16'}`}>
|
||||
<div className={`flex flex-1 flex-col min-h-0 ${fullscreen ? 'pt-0' : 'pt-16'}`}>
|
||||
{!isMorePage && (isDashboardRoute ? (
|
||||
<DashboardSubmenuBar items={main.children} fullscreen={true} headerVisible={isHeaderVisible} />
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user