MinecraftUtilities/Frontend
1
1
Fork 0
Code Issues1 Pull Requests10 Actions Activity

fix server page for mobile

Browse Source
This commit is contained in:
Lee
2024-04-19 21:43:32 +01:00
parent 97c1b88370
commit 95fef83dcf
3 changed files with 32 additions and 34 deletions
src/app
(pages)/server/[platform]/[[...hostname]]
page.tsx
components
player
player-view.tsx
server
server-view.tsx

2
src/app/components/player/player-view.tsx

@ -45,7 +45,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
</div>
</div>
</Card>
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<CodeDialog
title="Player Data"
description="The player's data from the API"

62
src/app/components/server/server-view.tsx

@ -24,40 +24,38 @@ type ServerViewProps = {
export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
return (
<div className="flex flex-col gap-2 items-center scale-75 xs:scale-100">
<Card classNameContent="w-max xs:w-fit relative">
<div
className={cn(
"w-[31rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
'bg-[url("/media/server-background.png")]',
)}
>
{/* Favicon */}
<Image
src={favicon || `${config.apiUrl}/server/icon/fallback`}
alt={`${server.hostname}'s Favicon`}
width={64}
height={64}
/>
<div className="flex relative flex-col gap-2 items-center scale-75 xs:scale-100 w-screen">
<div
className={cn(
"w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
'bg-[url("/media/server-background.png")]',
)}
>
{/* Favicon */}
<Image
src={favicon || `${config.apiUrl}/server/icon/fallback`}
alt={`${server.hostname}'s Favicon`}
width={64}
height={64}
/>
{/* Name & MOTD */}
<div className={cn("flex flex-col leading-[1.3rem] w-full", minecraft.className)}>
<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>
{/* Ping */}
<div className={cn("absolute top-0.5 right-0.5 flex items-center", minecraft.className)}>
<p>
{server.players.online}/{server.players.max}
</p>
<Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
</div>
{/* Name & MOTD */}
<div className={cn("flex flex-col leading-[1.3rem]", minecraft.className)}>
<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>
</Card>
<div className="flex gap-2">
{/* Ping */}
<div className={cn("absolute top-0.5 right-0.5 flex items-center", minecraft.className)}>
<p>
{server.players.online}/{server.players.max}
</p>
<Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
</div>
</div>
<div className="flex gap-2 flex-wrap">
<CodeDialog
title="Server Data"
description="The servers's data from the API"