Chief/romm-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

converted px to rem on home page

Browse Source
This commit is contained in:
roormonger
2026-03-26 07:36:12 -04:00
parent 7ccc48ae0f
commit b6aa43a809
5 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -21,7 +21,7 @@ const MainLayout = () => {
<div className="min-h-screen text-foreground selection:bg-[#2563eb]/30 overflow-hidden bg-[#10131f]">
<Sidebar />
<TopNav />
<main className="ml-64 pt-16 h-screen overflow-y-auto no-scrollbar">
<main className="ml-[16rem] pt-16 h-screen overflow-y-auto no-scrollbar">
<Outlet />
</main>
</div>

20
src/components/FeaturedHero.tsx
View File

@@ -5,7 +5,7 @@ import { Game } from '../api/client';
const FocusablePoster = ({ coverUrl }: { coverUrl: string }) => {
const { ref, focused } = useFocusableAutoScroll();
return (
<div ref={ref} className={`w-[400px] aspect-[3/4] shrink-0 bg-white/5 overflow-hidden rounded-[1.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.3)] transition-all duration-500 ease-out ${focused ? 'scale-105 ring-4 ring-[#2563eb] shadow-2xl z-20' : ''}`}>
<div ref={ref} className={`w-[25rem] aspect-[3/4] shrink-0 bg-white/5 overflow-hidden rounded-[1.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.3)] transition-all duration-500 ease-out ${focused ? 'scale-105 ring-4 ring-[#2563eb] shadow-2xl z-20' : ''}`}>
<img alt="Hero Poster" className="w-full h-full object-cover" src={coverUrl} />
</div>
);
@@ -26,7 +26,7 @@ const FocusableThumb = ({ g, isActive, onClick }: { g: Game, isActive: boolean,
<div
ref={ref}
onClick={onClick}
className={`carousel-thumb w-[90px] shrink-0 aspect-[2/3] overflow-hidden cursor-pointer transition-all duration-300 ring-1 ring-white/10 bg-white/5 rounded-[6px] ${
className={`carousel-thumb w-[5.625rem] shrink-0 aspect-[2/3] overflow-hidden cursor-pointer transition-all duration-300 ring-1 ring-white/10 bg-white/5 rounded-md ${
isActive ? 'opacity-100 ring-2 ring-[#2563eb]' : 'opacity-60 hover:opacity-100'
} ${focused ? 'scale-110 ring-2 ring-white z-10 shadow-2xl' : ''}`}
>
@@ -50,7 +50,7 @@ export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?
if (!games?.length) return null;
const game = games[currentIndex];
const formattedSize = (game.size / (1024 * 1024)).toFixed(2) + " MB";
const formattedSize = ((Number(game.size) || 0) / (1024 * 1024)).toFixed(2) + " MB";
return (
<section
@@ -68,16 +68,16 @@ export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?
<div className="flex-1 flex flex-col justify-between min-w-0">
<div className="flex flex-col min-w-0">
<div className="inline-flex items-center gap-2 px-3 py-1 bg-[#2563eb]/20 text-[#b4c5ff] mb-4 w-fit border border-[#2563eb]/30 rounded-md">
<span className="material-symbols-outlined text-[10px]" style={{ fontVariationSettings: "'FILL' 1" }}>
<span className="material-symbols-outlined text-[0.625rem]" style={{ fontVariationSettings: "'FILL' 1" }}>
{isFallback ? 'history' : 'star'}
</span>
<span className="text-[10px] font-black uppercase tracking-widest geist-mono">
<span className="text-[0.625rem] font-black uppercase tracking-widest geist-mono">
{isFallback ? 'Recently Added' : 'Featured'}
</span>
</div>
<h2
className="text-[72px] font-black text-white tracking-tighter mb-4 leading-[0.9] uppercase geist-mono truncate"
className="text-[4.5rem] font-black text-white tracking-tighter mb-4 leading-[0.9] uppercase geist-mono truncate"
title={game.title}
>
{game.title}
@@ -85,11 +85,11 @@ export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?
<div className="flex gap-10 mb-8 geist-mono">
<div className="flex flex-col">
<span className="text-[10px] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Platform</span>
<span className="text-[0.625rem] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Platform</span>
<span className="text-xs font-black text-white">{game.system}</span>
</div>
<div className="flex flex-col">
<span className="text-[10px] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Size</span>
<span className="text-[0.625rem] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Size</span>
<span className="text-xs font-black text-white">{formattedSize}</span>
</div>
</div>
@@ -99,11 +99,11 @@ export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?
</p>
<div className="flex items-center gap-3 mb-8">
<FocusableButton className="bg-gradient-to-br from-[#2563eb] to-[#6001d1] hover:opacity-90 text-white h-11 px-8 font-black flex items-center gap-2 active:scale-95 text-[11px] uppercase geist-mono rounded-[12px] shadow-[0_10px_30px_rgba(37,99,235,0.1)]">
<FocusableButton className="bg-gradient-to-br from-[#2563eb] to-[#6001d1] hover:opacity-90 text-white h-11 px-8 font-black flex items-center gap-2 active:scale-95 text-[0.6875rem] uppercase geist-mono rounded-xl shadow-[0_10px_30px_rgba(37,99,235,0.1)]">
<span className="material-symbols-outlined text-base" style={{ fontVariationSettings: "'FILL' 1" }}>play_arrow</span>
Play Now
</FocusableButton>
<FocusableButton className="bg-transparent hover:bg-white/10 text-[#2563eb] border border-white/5 h-11 px-8 font-black flex items-center gap-2 text-[11px] uppercase geist-mono rounded-[12px]">
<FocusableButton className="bg-transparent hover:bg-white/10 text-[#2563eb] border border-white/5 h-11 px-8 font-black flex items-center gap-2 text-[0.6875rem] uppercase geist-mono rounded-xl">
<span className="material-symbols-outlined text-base">download</span>
Download
</FocusableButton>

6
src/components/GameCard.tsx
View File

@@ -11,10 +11,10 @@ export const GameCard = ({ game }: { game: Game }) => {
return (
<MagicCard
ref={ref}
className={`w-56 shrink-0 cursor-pointer group flex flex-col p-3 rounded-[12px] bg-[#1c1f2c] shadow-[0_10px_30px_rgba(0,0,0,0.2)] transition-all z-10 hover:z-20 ${focused ? "scale-105 ring-2 ring-[#2563eb] z-30" : ""}`}
className={`w-56 shrink-0 cursor-pointer group flex flex-col p-3 rounded-xl bg-[#1c1f2c] shadow-[0_10px_30px_rgba(0,0,0,0.2)] transition-all z-10 hover:z-20 ${focused ? "scale-105 ring-2 ring-[#2563eb] z-30" : ""}`}
onClick={() => syncToPC(game.id, game.title)}
>
<div className="aspect-[2/3] bg-white/5 overflow-hidden mb-3 rounded-[8px] border border-white/5 shadow-inner">
<div className="aspect-[2/3] bg-white/5 overflow-hidden mb-3 rounded-lg border border-white/5 shadow-inner">
<img
alt={game.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
@@ -24,7 +24,7 @@ export const GameCard = ({ game }: { game: Game }) => {
<div className="px-1 flex flex-col relative z-20">
<h4 className="text-sm font-black text-white truncate geist-mono uppercase tracking-tight">{game.title}</h4>
<p className="text-[10px] text-[#2563eb] uppercase geist-mono tracking-widest font-bold mt-1 opacity-80">{game.system}</p>
<p className="text-[0.625rem] text-[#2563eb] uppercase geist-mono tracking-widest font-bold mt-1 opacity-80">{game.system}</p>
</div>
</MagicCard>
);

14
src/components/Sidebar.tsx
View File

@@ -50,10 +50,10 @@ export const Sidebar = () => {
return (
<FocusContext.Provider value={sidebarFocusKey}>
<aside ref={containerRef} className="w-64 h-screen fixed left-0 top-0 bg-[#181b28] shadow-[20px_0_50px_rgba(0,0,0,0.3)] flex flex-col py-8 z-[60]">
<aside ref={containerRef} className="w-[16rem] h-screen fixed left-0 top-0 bg-[#181b28] shadow-[20px_0_50px_rgba(0,0,0,0.3)] flex flex-col py-8 z-[60]">
<div className="px-6 mb-10">
<h1 className="text-xl font-black text-white tracking-tighter uppercase geist-mono">{import.meta.env.VITE_LIBRARY_TITLE || "Romm"}</h1>
<p className="text-[10px] geist-mono uppercase tracking-[0.05em] text-[#c3c6d7] opacity-60">{import.meta.env.VITE_LIBRARY_SUBTITLE || "Game Manager"}</p>
<h1 className="text-[1.25rem] font-black text-white tracking-tighter uppercase geist-mono">{import.meta.env.VITE_LIBRARY_TITLE || "Romm"}</h1>
<p className="text-[0.625rem] geist-mono uppercase tracking-[0.05em] text-[#c3c6d7] opacity-60">{import.meta.env.VITE_LIBRARY_SUBTITLE || "Game Manager"}</p>
</div>
<nav className="flex-1 flex flex-col gap-1">
@@ -66,7 +66,7 @@ export const Sidebar = () => {
<NavItem path="/settings" icon="settings" label="Settings" />
<div className="px-6 mt-4 flex items-center gap-3 overflow-hidden">
<div className="w-8 h-8 rounded-full bg-white/10 overflow-hidden shrink-0 ring-1 ring-white/20">
<div className="w-[2rem] h-[2rem] rounded-full bg-white/10 overflow-hidden shrink-0 ring-1 ring-white/20">
<img
alt="User profile avatar"
className="w-full h-full object-cover"
@@ -75,11 +75,11 @@ export const Sidebar = () => {
/>
</div>
<div className="flex flex-col leading-none flex-1 min-w-0">
<span className="text-xs font-bold text-white geist-mono truncate">{user?.username || "Loading"}</span>
<span className="text-[10px] text-[#2563eb] font-bold uppercase tracking-widest geist-mono truncate">{user?.roleName || "..."}</span>
<span className="text-[0.75rem] font-bold text-white geist-mono truncate">{user?.username || "Loading"}</span>
<span className="text-[0.625rem] text-[#2563eb] font-bold uppercase tracking-widest geist-mono truncate">{user?.roleName || "..."}</span>
</div>
<button onClick={logout} className="text-[#c3c6d7] hover:text-white hover:bg-red-500/20 p-2 shrink-0 rounded-full transition-all active:scale-95 flex items-center justify-center" title="Log Out">
<span className="material-symbols-outlined text-sm">logout</span>
<span className="material-symbols-outlined text-[0.875rem]">logout</span>
</button>
</div>
</div>

16
src/components/TopNav.tsx
View File

@@ -22,40 +22,40 @@ export const TopNav = () => {
<div className="flex items-center gap-6 w-full">
<div className="relative flex-1 max-w-md focus-within:ring-1 focus-within:ring-[#2563eb]/50 rounded-full overflow-hidden bg-[#070913] border border-white/5 transition-all outline-none shadow-inner">
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#c3c6d7] text-sm">search</span>
<input className="w-full bg-transparent border-none pl-10 pr-4 py-2 text-[11px] font-bold tracking-widest uppercase text-white placeholder-[#c3c6d7]/50 focus:ring-0 geist-mono outline-none" placeholder="Search the vault..." type="text"/>
<input className="w-full bg-transparent border-none pl-10 pr-4 py-2 text-[0.6875rem] font-bold tracking-widest uppercase text-white placeholder-[#c3c6d7]/50 focus:ring-0 geist-mono outline-none" placeholder="Search the vault..." type="text"/>
</div>
<div className="hidden xl:flex items-center gap-6 ml-4 geist-mono justify-end flex-1">
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="account_tree">account_tree</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.PLATFORMS ?? '--'}</span> Platforms</span>
<span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.PLATFORMS ?? '--'}</span> Platforms</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="sports_esports">sports_esports</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.ROMS?.toLocaleString() ?? '--'}</span> Games</span>
<span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.ROMS?.toLocaleString() ?? '--'}</span> Games</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="hard_drive">hard_drive</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{formatBytes(stats?.TOTAL_FILESIZE_BYTES)}</span></span>
<span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{formatBytes(stats?.TOTAL_FILESIZE_BYTES)}</span></span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="save">save</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SAVES?.toLocaleString() ?? '--'}</span> Saves</span>
<span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SAVES?.toLocaleString() ?? '--'}</span> Saves</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="history">history</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.STATES?.toLocaleString() ?? '--'}</span> States</span>
<span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.STATES?.toLocaleString() ?? '--'}</span> States</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="photo_library">photo_library</span>
<span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SCREENSHOTS?.toLocaleString() ?? '--'}</span> Screens</span>
<span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SCREENSHOTS?.toLocaleString() ?? '--'}</span> Screens</span>
</div>
<div className="w-px h-4 bg-white/10 mx-2"></div>
{/* Active Hardware Indicator */}
<div className="flex items-center justify-center w-8 h-8 bg-white/5 border border-white/5 rounded-full ring-1 ring-white/10 shadow-inner text-[#2563eb]" title={mode === 'gamepad' ? 'Gamepad Active' : mode === 'keyboard' ? 'Keyboard Active' : 'Mouse Active'}>
<span className="material-symbols-outlined text-[16px]" style={{ fontVariationSettings: "'FILL' 1" }}>
<span className="material-symbols-outlined text-[1rem]" style={{ fontVariationSettings: "'FILL' 1" }}>
{mode === 'gamepad' ? 'sports_esports' : mode === 'keyboard' ? 'keyboard_alt' : 'mouse'}
</span>
</div>