MinecraftUtilities/Frontend
1
1
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

fix server page for mobile
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
Details

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
View File

@ -135,7 +135,7 @@ export default async function Page({ params: { platform, hostname } }: Params):
{error && <ErrorCard message={error} />}
{server != null && (
<ContextMenu>
<ContextMenuTrigger>
<ContextMenuTrigger asChild>
<ServerView server={server} favicon={favicon} />
</ContextMenuTrigger>
<ContextMenuContent className="flex flex-col">

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

@ -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
View File

@ -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"