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

Update the style of the server result

Browse Source
This commit is contained in:
Braydon 2024-04-20 13:34:47 -04:00
parent 9f2dc1d4ed
commit 8bda711215
2 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
View File

@ -70,7 +70,7 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
{/* Server Result */} {/* Server Result */}
{result && ( {result && (
<div className="flex justify-center scale-90 xs:scale-100 transition-all transform-gpu"> <div className="flex justify-center scale-[.71] xs:scale-75 sm:scale-100 transition-all transform-gpu">
<ServerResult server={result} /> <ServerResult server={result} />
</div> </div>
)} )}

64
Frontend/src/app/components/server/server-result.tsx
View File

@ -30,45 +30,55 @@ const ServerResult = ({ server }: ServerResultProps): ReactElement => {
return ( return (
<div <div
className={cn( className={cn(
"w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none", "w-[37.5rem] relative p-1.5 py-1 flex gap-2 items-center pointer-events-none",
`bg-[url("/media/dirt-background.png")] bg-center bg-repeat ${minecraft.className}` `bg-[url("/media/dirt-background.png")] bg-center bg-repeat ${minecraft.className}`
)} )}
> >
{/* Favicon */} {/* Favicon */}
<Image <Image
className="h-16 w-16"
src={favicon || `${config.apiEndpoint}/server/icon/fallback`} src={favicon || `${config.apiEndpoint}/server/icon/fallback`}
alt={`${server.hostname}'s Favicon`} alt={`${server.hostname}'s Favicon`}
width={64} width={64}
height={64} height={64}
/> />
{/* Name & MOTD */} {/* Content */}
<div className="flex flex-col"> <div className="-translate-y-1 w-full h-full flex flex-col gap-1">
<h1>{server.hostname}</h1> {/* Name & Ping */}
{server.motd.html.map( <div className="w-full flex justify-between">
(line: string, index: number): ReactElement => { <h1>{server.hostname}</h1>
return (
<p
key={index}
className="pointer-events-auto"
dangerouslySetInnerHTML={{ __html: line }}
></p>
);
}
)}
</div>
{/* Ping */} {/* Players & Ping */}
<div className="absolute top-0.5 right-0.5 flex gap-1 items-center"> <div className="flex gap-1 items-center">
<p> <p className="text-[#AAAAAA]">
{server.players.online}/{server.players.max} {server.players.online}
</p> <span className="text-[#555555]">/</span>
<Image {server.players.max}
src="/media/full-ping.png" </p>
alt="Ping!" <Image
width={28} src="/media/ping-full.png"
height={28} alt="Ping!"
/> width={21}
height={21}
/>
</div>
</div>
{/* MOTD */}
<div className="w-full flex flex-col">
{server.motd.html.map(
(line: string, index: number): ReactElement => {
return (
<p
key={index}
className="leading-[1.15rem] pointer-events-auto"
dangerouslySetInnerHTML={{ __html: line }}
></p>
);
}
)}
</div>
</div> </div>
</div> </div>
); );