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:
dwindown
2025-11-06 22:28:30 +07:00
parent 51580d5008
commit 57cb8db2fa
2 changed files with 6 additions and 8 deletions

View File

@@ -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} />
) : (