jory/personal_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed the layout of the mobile screen on all /games

Browse Source
This commit is contained in:
JorySeverijnse
2026-01-03 00:17:38 +01:00
parent e98bb0aad6
commit d1217c7ed7
1 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MainLayout.tsx
+21 -14
View File
@@ -5,38 +5,45 @@ import { MiniOscilloscope } from './MiniOscilloscope';
const MainLayout = () => { const MainLayout = () => {
const location = useLocation(); const location = useLocation();
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
// Don't show mini oscilloscope on the oscilloscope page itself // Don't show mini oscilloscope on the oscilloscope page itself
const showMiniOscilloscope = location.pathname !== '/oscilloscope'; const showMiniOscilloscope = location.pathname !== '/oscilloscope';
// Check if on game page and mobile
const isMobileGamePage = isMobile && location.pathname.startsWith('/games/') && location.pathname !== '/games' && location.pathname !== '/games/leaderboard';
return ( return (
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="relative z-10 flex flex-col items-center pt-8 md:pt-12 px-4 w-full pb-20" className={`relative z-10 flex flex-col items-center ${isMobileGamePage ? 'pt-4' : 'pt-8 md:pt-12'} px-4 w-full ${isMobileGamePage ? 'pb-4' : 'pb-20'}`}
> >
{/* Branding */} {!isMobileGamePage && (
<motion.h1 <>
initial={{ opacity: 0, y: -20 }} {/* Branding */}
animate={{ opacity: 1, y: 0 }} <motion.h1
transition={{ delay: 0.3, duration: 0.5 }} initial={{ opacity: 0, y: -20 }}
className="font-minecraft text-4xl md:text-5xl lg:text-6xl text-primary text-glow-strong mb-6" animate={{ opacity: 1, y: 0 }}
> transition={{ delay: 0.3, duration: 0.5 }}
<span className="inline-block translate-y-[0.35em]">~</span>$ whoami Jory className="font-minecraft text-4xl md:text-5xl lg:text-6xl text-primary text-glow-strong mb-6"
</motion.h1> >
<span className="inline-block translate-y-[0.35em]">~</span>$ whoami Jory
</motion.h1>
</>
)}
{/* Main Container */} {/* Main Container */}
<div className="w-full max-w-[90vw] xl:max-w-[1200px] 2xl:max-w-[1400px] min-h-[55vh] md:h-[70vh] max-h-[750px] flex flex-col md:flex-row border-2 border-primary bg-background/60 box-glow-strong rounded-lg overflow-hidden"> <div className={`w-full ${isMobileGamePage ? 'h-[calc(100vh-2rem)] max-w-[95vw]' : 'max-w-[90vw] xl:max-w-[1200px] 2xl:max-w-[1400px] min-h-[55vh] md:h-[70vh] max-h-[750px]'} flex flex-col md:flex-row border-2 border-primary bg-background/60 box-glow-strong rounded-lg overflow-hidden`}>
<Sidebar /> {!isMobileGamePage && <Sidebar />}
{/* Content Area */} {/* Content Area */}
<main className="flex-1 p-6 md:p-8 overflow-y-auto bg-background/40"> <main className={`flex-1 p-6 md:p-8 ${isMobileGamePage ? 'p-2 md:p-4 overflow-hidden' : 'overflow-y-auto'} bg-background/40`}>
<Outlet /> <Outlet />
</main> </main>
</div> </div>
{/* Mini Oscilloscope Bar */} {/* Mini Oscilloscope Bar */}
{showMiniOscilloscope && <MiniOscilloscope />} {showMiniOscilloscope && !isMobileGamePage && <MiniOscilloscope />}
</motion.div> </motion.div>
); );
}; };