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} />} {error && <ErrorCard message={error} />}
{server != null && ( {server != null && (
<ContextMenu> <ContextMenu>
<ContextMenuTrigger> <ContextMenuTrigger asChild>
<ServerView server={server} favicon={favicon} /> <ServerView server={server} favicon={favicon} />
</ContextMenuTrigger> </ContextMenuTrigger>
<ContextMenuContent className="flex flex-col"> <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>
</div> </div>
</Card> </Card>
<div className="flex gap-2"> <div className="flex gap-2 flex-wrap">
<CodeDialog <CodeDialog
title="Player Data" title="Player Data"
description="The player's data from the API" 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 { export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
return ( return (
<div className="flex flex-col gap-2 items-center scale-75 xs:scale-100"> <div className="flex relative flex-col gap-2 items-center scale-75 xs:scale-100 w-screen">
<Card classNameContent="w-max xs:w-fit relative"> <div
<div className={cn(
className={cn( "w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
"w-[31rem] relative p-2 flex gap-2 rounded-lg pointer-events-none", 'bg-[url("/media/server-background.png")]',
'bg-[url("/media/server-background.png")]', )}
)} >
> {/* Favicon */}
{/* Favicon */} <Image
<Image src={favicon || `${config.apiUrl}/server/icon/fallback`}
src={favicon || `${config.apiUrl}/server/icon/fallback`} alt={`${server.hostname}'s Favicon`}
alt={`${server.hostname}'s Favicon`} width={64}
width={64} height={64}
height={64} />
/>
{/* Name & MOTD */} {/* Name & MOTD */}
<div className={cn("flex flex-col leading-[1.3rem] w-full", minecraft.className)}> <div className={cn("flex flex-col leading-[1.3rem]", minecraft.className)}>
<h1>{server.hostname}</h1> <h1>{server.hostname}</h1>
{server.motd.html.map((line: string, index: number): ReactElement => { {server.motd.html.map((line: string, index: number): ReactElement => {
return <p key={index} className="pointer-events-auto" dangerouslySetInnerHTML={{ __html: line }}></p>; 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>
</div> </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 <CodeDialog
title="Server Data" title="Server Data"
description="The servers's data from the API" description="The servers's data from the API"