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:
@@ -31,6 +31,7 @@ import DashboardSubmenuBar from './components/nav/DashboardSubmenuBar';
|
||||
import { DashboardProvider } from '@/contexts/DashboardContext';
|
||||
import { PageHeaderProvider } from '@/contexts/PageHeaderContext';
|
||||
import { FABProvider } from '@/contexts/FABContext';
|
||||
import { AppProvider } from '@/contexts/AppContext';
|
||||
import { PageHeader } from '@/components/PageHeader';
|
||||
import { BottomNav } from '@/components/nav/BottomNav';
|
||||
import { FAB } from '@/components/FAB';
|
||||
@@ -447,6 +448,7 @@ function Shell() {
|
||||
const { on, setOn } = useFullscreen();
|
||||
const { main } = useActiveSection();
|
||||
const toggle = () => setOn(v => !v);
|
||||
const exitFullscreen = () => setOn(false);
|
||||
const isDesktop = useIsDesktop();
|
||||
const location = useLocation();
|
||||
const scrollContainerRef = React.useRef<HTMLDivElement>(null);
|
||||
@@ -463,7 +465,7 @@ function Shell() {
|
||||
const isMorePage = location.pathname === '/more';
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppProvider isStandalone={isStandalone} exitFullscreen={exitFullscreen}>
|
||||
{!isStandalone && <ShortcutsBinder onToggle={toggle} />}
|
||||
{!isStandalone && <CommandPalette toggleFullscreen={toggle} />}
|
||||
<div className={`flex flex-col min-h-screen ${fullscreen ? 'woonoow-fullscreen-root' : ''}`}>
|
||||
@@ -485,7 +487,7 @@ function Shell() {
|
||||
</main>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`flex flex-1 flex-col min-h-0 ${fullscreen ? 'pt-0' : 'pt-16'}`}>
|
||||
<div className="flex flex-1 flex-col min-h-0">
|
||||
<PageHeader fullscreen={true} />
|
||||
{!isMorePage && (isDashboardRoute ? (
|
||||
<DashboardSubmenuBar items={main.children} fullscreen={true} headerVisible={isHeaderVisible} />
|
||||
@@ -518,7 +520,7 @@ function Shell() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</AppProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user