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! 🎯
This commit is contained in:
32
admin-spa/src/contexts/AppContext.tsx
Normal file
32
admin-spa/src/contexts/AppContext.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React, { createContext, useContext, ReactNode } from 'react';
|
||||
|
||||
interface AppContextType {
|
||||
isStandalone: boolean;
|
||||
exitFullscreen?: () => void;
|
||||
}
|
||||
|
||||
const AppContext = createContext<AppContextType | undefined>(undefined);
|
||||
|
||||
export function AppProvider({
|
||||
children,
|
||||
isStandalone,
|
||||
exitFullscreen
|
||||
}: {
|
||||
children: ReactNode;
|
||||
isStandalone: boolean;
|
||||
exitFullscreen?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<AppContext.Provider value={{ isStandalone, exitFullscreen }}>
|
||||
{children}
|
||||
</AppContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useApp() {
|
||||
const context = useContext(AppContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useApp must be used within an AppProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
Reference in New Issue
Block a user