dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
93 Commits 1 Branch 0 Tags
796e6618089271c39c40b64f6b5ed811ae4f44a1
Commit Graph

3 Commits

Author SHA1 Message Date
dwindown
796e661808 fix: Remove top padding gap and add exit/logout to More page 
Fixed 2 issues:

1. Top Padding Gap (pt-16 → removed)
   Problem: Mobile fullscreen had pt-16 padding creating gap at top
   Cause: Redundant padding when header is hidden in fullscreen
   Solution: Removed pt-16 from mobile fullscreen layout

   Before:
   <div className="flex flex-1 flex-col min-h-0 pt-16">

   After:
   <div className="flex flex-1 flex-col min-h-0">

   Result: No gap, submenu starts at top-0 ✓

2. Exit/Logout Buttons in More Page
   Problem: No way to exit fullscreen or logout from mobile
   Solution: Added context-aware button to More page

   WP-Admin Mode:
   - Shows "Exit Fullscreen" button
   - Exits fullscreen mode (back to normal WP-admin)

   Standalone Mode (PWA):
   - Shows "Logout" button
   - Redirects to WP-admin login

   Implementation:
   - Created AppContext to provide isStandalone and exitFullscreen
   - Wrapped Shell with AppProvider
   - More page uses useApp() to get context
   - Conditional rendering based on mode

Files Modified:
- App.tsx: Removed pt-16, added AppProvider
- AppContext.tsx: New context for app-level state
- More/index.tsx: Added Exit/Logout button

Result:
✅ No top gap in mobile fullscreen
✅ Exit fullscreen available in WP-admin mode
✅ Logout available in standalone mode
✅ Clean, functional mobile UX! 🎯
 2025-11-06 23:22:18 +07:00
dwindown
51580d5008 feat: Modern mobile-first UX improvements 
Implemented 5 major improvements for better mobile UX:

1. ✅ Fixed Header Transform Issue
   Problem: Header used sticky + translateY, so submenu top-0 had no effect
   Solution: Changed to fixed positioning on mobile

   Before:
   <header className="sticky top-0 -translate-y-full">

   After:
   <header className="fixed top-0 left-0 right-0 -translate-y-full">
   <div className="pt-16"> <!-- compensate for fixed header -->

   Result: Submenu now properly moves to top-0 when header hides

2. ✅ Removed Top Bar in Mobile Standalone Mode
   Problem: Top bar wastes precious vertical space on mobile
   Solution: Hide header completely on mobile PWA standalone

   Implementation:
   if (isStandalone && window.innerWidth < 768) return null;

   Result: Native app feel, maximum content space

3. ✅ Fixed More Page Gap
   Problem: PageHeader had transparent background, content visible behind
   Solution: Changed to solid background

   Before: bg-background/95 backdrop-blur
   After: bg-background

   Result: Clean, solid header with no bleed-through

4. ✅ Fixed Button Sizing
   Problem: .ui-ctrl class overriding button heights
   Solution: Removed .ui-ctrl from Button component

   Before: className={cn('ui-ctrl', buttonVariants(...))}
   After: className={cn(buttonVariants(...))}

   Button sizes now work correctly:
   - sm: h-8 (32px)
   - default: h-9 (36px)
   - lg: h-10 (40px)

5. ✅ Implemented Contextual Headers
   Problem: No page-specific headers
   Solution: Added usePageHeader hook to More page

   Implementation:
   useEffect(() => {
     setPageHeader(__('More'));
     return () => clearPageHeader();
   }, []);

   Result: Consistent header pattern across all pages

Mobile Layout (Standalone Mode):
┌─────────────────────────────────┐
│ (No top bar - native feel)      │
├─────────────────────────────────┤
│ Submenu (dynamic top)           │
├─────────────────────────────────┤
│ Page Title (contextual)         │
├─────────────────────────────────┤
│ Content                         │
│                        [+]      │
├─────────────────────────────────┤
│ Bottom Nav                      │
└─────────────────────────────────┘

Benefits:
✅ Native app feel on mobile
✅ Maximum content space (64px saved!)
✅ Smooth scroll animations
✅ Consistent button sizing
✅ Clean, professional look
✅ Industry-standard UX

Files Modified:
- App.tsx: Fixed header positioning, hide on mobile standalone
- PageHeader.tsx: Solid background
- button.tsx: Removed ui-ctrl override
- More/index.tsx: Added contextual header

Next Steps:
- Add contextual headers to remaining pages
- Test on real devices
- Add page transitions
- Implement pull-to-refresh
 2025-11-06 22:16:48 +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