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 */}
{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} />
</div>
)}

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

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