Rainnny/RESTfulMC
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Wiki Activity

Make the /player page responsive
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m9s
Details

Browse Source
This commit is contained in:
Braydon 2024-04-17 10:55:10 -04:00
parent 6d728dcb10
commit 132b3e0315
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
Frontend/src/app/(pages)/player/[[...slug]]/page.tsx
View File

@ -27,32 +27,35 @@ const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
// Render the page // Render the page
return ( return (
<main className="h-screen flex flex-col justify-center items-center"> <main className="px-3 h-screen flex justify-center items-center">
<div className="flex gap-32"> <div className="mt-0 sm:mt-[45rem] xl:mt-0 flex flex-col xl:flex-row xl:gap-24 2xl:gap-48 transition-all transform-gpu">
{/* Header */} {/* Banner */}
<Image <Image
className="my-auto h-[28rem] pointer-events-none" className="hidden sm:flex xl:my-auto h-[28rem] pointer-events-none"
src="/media/players.webp" src="/media/players.webp"
alt="Minecraft Players" alt="Minecraft Players"
width={632} width={632}
height={632} height={632}
/> />
<div className="flex flex-col gap-7"> {/* Search */}
<div className="pb-16 xl:pb-0 flex flex-col gap-7">
<h1 <h1
className={cn( className={cn(
"mt-20 text-6xl text-minecraft-green-3 pointer-events-none", "mt-20 text-6xl text-minecraft-green-3 text-center pointer-events-none",
minecrafter.className minecrafter.className
)} )}
> >
Player Lookup Player Lookup
</h1> </h1>
<div className="flex flex-col gap-5 px-10 xs:px-0">
{/* Error */} {/* Error */}
{error && <p className="text-red-500">{error}</p>} {error && <p className="text-red-500">{error}</p>}
{/* Search */} {/* Search */}
<PlayerSearch query={query} /> <PlayerSearch query={query} />
</div>
{/* Player Result */} {/* Player Result */}
{result && <PlayerResult player={result} />} {result && <PlayerResult player={result} />}

5
Frontend/src/app/components/player/player-result.tsx
View File

@ -24,6 +24,7 @@ const PlayerResult = ({
<div className="flex gap-5 items-center"> <div className="flex gap-5 items-center">
{/* Player Head */} {/* Player Head */}
<Image <Image
className="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32"
src={parts.HEAD} src={parts.HEAD}
alt={`${username}'s Head`} alt={`${username}'s Head`}
width={128} width={128}
@ -33,7 +34,7 @@ const PlayerResult = ({
{/* Name, Unique ID, and Badges */} {/* Name, Unique ID, and Badges */}
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<h1 className="text-xl font-bold text-minecraft-green-3">{username}</h1> <h1 className="text-xl font-bold text-minecraft-green-3">{username}</h1>
<code className="text-zinc-300">{uniqueId}</code> <code className="text-xs xs:text-sm text-zinc-300">{uniqueId}</code>
{/* Legacy Badge */} {/* Legacy Badge */}
{legacy && <p className="text-sm font-semibold uppercase">Legacy</p>} {legacy && <p className="text-sm font-semibold uppercase">Legacy</p>}
@ -57,7 +58,7 @@ const PlayerResult = ({
.map(([part, url], index) => ( .map(([part, url], index) => (
<Link key={index} href={url} target="_blank"> <Link key={index} href={url} target="_blank">
<img <img
className="h-28 hover:scale-[1.02] transition-all transform-gpu" className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
src={url} src={url}
alt={`${username}'s ${part}`} alt={`${username}'s ${part}`}
/> />