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

23
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
return (
<main className="h-screen flex flex-col justify-center items-center">
<div className="flex gap-32">
{/* Header */}
<main className="px-3 h-screen flex justify-center items-center">
<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">
{/* Banner */}
<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"
alt="Minecraft Players"
width={632}
height={632}
/>
<div className="flex flex-col gap-7">
{/* Search */}
<div className="pb-16 xl:pb-0 flex flex-col gap-7">
<h1
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
)}
>
Player Lookup
</h1>
{/* Error */}
{error && <p className="text-red-500">{error}</p>}
<div className="flex flex-col gap-5 px-10 xs:px-0">
{/* Error */}
{error && <p className="text-red-500">{error}</p>}
{/* Search */}
<PlayerSearch query={query} />
{/* Search */}
<PlayerSearch query={query} />
</div>
{/* 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">
{/* Player Head */}
<Image
className="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32"
src={parts.HEAD}
alt={`${username}'s Head`}
width={128}
@ -33,7 +34,7 @@ const PlayerResult = ({
{/* Name, Unique ID, and Badges */}
<div className="flex flex-col gap-1.5">
<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 && <p className="text-sm font-semibold uppercase">Legacy</p>}
@ -57,7 +58,7 @@ const PlayerResult = ({
.map(([part, url], index) => (
<Link key={index} href={url} target="_blank">
<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}
alt={`${username}'s ${part}`}
/>