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"

10
src/app/components/server/server-view.tsx
View File

@ -24,11 +24,10 @@ 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-[31rem] relative p-2 flex gap-2 rounded-lg pointer-events-none", "w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
'bg-[url("/media/server-background.png")]', 'bg-[url("/media/server-background.png")]',
)} )}
> >
@ -41,7 +40,7 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
/> />
{/* 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>;
@ -56,8 +55,7 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
<Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} /> <Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
</div> </div>
</div> </div>
</Card> <div className="flex gap-2 flex-wrap">
<div className="flex gap-2">
<CodeDialog <CodeDialog
title="Server Data" title="Server Data"
description="The servers's data from the API" description="The servers's data from the API"