dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
87 Commits 1 Branch 0 Tags
57cb8db2fa7caac4f4a07c94c76c299f174b9bbe
Commit Graph

2 Commits

Author SHA1 Message Date
dwindown
57cb8db2fa 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! ✨
 2025-11-06 22:28:30 +07:00
dwindown
76624bb473 feat: Implement mobile-first navigation with bottom bar and FAB 
Implemented mobile-optimized navigation structure:

1. Bottom Navigation (Mobile Only)
   - 5 items: Dashboard, Orders, Products, Customers, More
   - Fixed at bottom, always visible
   - Thumb-friendly positioning
   - Active state indication
   - Hidden on desktop (md:hidden)

2. More Menu Page
   - Overflow menu for Coupons and Settings
   - Clean list layout with icons
   - Descriptions for each item
   - Chevron indicators

3. FAB (Floating Action Button)
   - Context-aware system via FABContext
   - Fixed bottom-right (72px from bottom)
   - Hidden on desktop (md:hidden)
   - Ready for contextual actions per page

4. FAB Context System
   - Global state for FAB configuration
   - setFAB() / clearFAB() methods
   - Supports icon, label, onClick, visibility
   - Allows pages to control FAB behavior

5. Layout Updates
   - Added pb-14 to main for bottom nav spacing
   - BottomNav and FAB in mobile fullscreen layout
   - Wrapped app with FABProvider

Structure (Mobile):
┌─────────────────────────────────┐
│ App Bar (will hide on scroll)   │
├─────────────────────────────────┤
│ Page Header (sticky, contextual)│
├─────────────────────────────────┤
│ Submenu (sticky)                │
├─────────────────────────────────┤
│ Content (scrollable)            │
│                        [+] FAB  │
├─────────────────────────────────┤
│ Bottom Nav (fixed)              │
└─────────────────────────────────┘

Next Steps:
- Implement scroll-hide for app bar
- Add contextual FAB per page
- Test on real devices

Files Created:
- BottomNav.tsx: Bottom navigation component
- More/index.tsx: More menu page
- FABContext.tsx: FAB state management
- FAB.tsx: Floating action button component
- useScrollDirection.ts: Scroll detection hook

Files Modified:
- App.tsx: Added bottom nav, FAB, More route, providers
 2025-11-06 20:21:12 +07:00