make pages more consistent on mobile
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s

This commit is contained in:
Lee 2024-04-19 21:53:11 +01:00
parent 95fef83dcf
commit 78390a3bc9
4 changed files with 35 additions and 30 deletions

@ -83,33 +83,34 @@ export default async function Page(): Promise<ReactElement> {
<h1 className="text-xl">Mojang Status</h1> <h1 className="text-xl">Mojang Status</h1>
<p>The current status of Mojang Services</p> <p>The current status of Mojang Services</p>
</div> </div>
<Card classNameCard="py-0 pb-2" classNameContent="w-[23rem] md:w-[35rem] text-left"> <Card
<div className="flex flex-col divide-y gap-2"> classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]"
{endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>} classNameContent="text-left flex flex-col divide-y gap-2"
{endpoints.length > 0 && >
endpoints.map((endpoint: CachedEndpointStatus) => { {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
const { name, hostname, status } = endpoint; {endpoints.length > 0 &&
endpoints.map((endpoint: CachedEndpointStatus) => {
const { name, hostname, status } = endpoint;
const url = `https://${hostname}`; const url = `https://${hostname}`;
return ( return (
<div key={name} className="flex flex-row justify-between pt-2"> <div key={name} className="flex flex-row justify-between pt-2">
<div className="flex flex-col leading-[1.5rem]"> <div className="flex flex-col leading-[1.5rem]">
<p className="font-semibold">{name}</p> <p className="font-semibold">{name}</p>
<Link <Link
href={url} href={url}
className="text-sm text-primary hover:opacity-75 transition-all transform-gpu" className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
target="_blank" target="_blank"
> >
<p>{url}</p> <p>{url}</p>
</Link> </Link>
</div>
<div className={cn("flex items-center font-semibold", getColor(status))}>
<p>{formatStatus(status)}</p>
</div>
</div> </div>
); <div className={cn("flex items-center font-semibold", getColor(status))}>
})} <p>{formatStatus(status)}</p>
</div> </div>
</div>
);
})}
</Card> </Card>
</div> </div>
); );

@ -7,6 +7,7 @@ import { HrefButton } from "./href-button";
import Logo from "./logo"; import Logo from "./logo";
import { ToggleThemeButton } from "./theme-toggle-button"; import { ToggleThemeButton } from "./theme-toggle-button";
import { GithubStar } from "@/app/components/github-star"; import { GithubStar } from "@/app/components/github-star";
import { Card } from "@/app/components/card";
type Page = { type Page = {
/** /**
@ -37,7 +38,10 @@ export default function NavBar(): ReactElement {
const path = usePathname(); const path = usePathname();
return ( return (
<div className="bg-secondary relative w-full rounded-lg flex justify-between items-center gap-3 mt-2 px-3 bg-opacity-85 h-12"> <Card
classNameCard="w-full p-0 mt-2 border-none"
classNameContent="p-0 relative rounded-lg flex justify-between items-center gap-3 px-3 bg-opacity-85 h-12"
>
{/* Left */} {/* Left */}
<div className="z-50"> <div className="z-50">
<Link href="/" className="flex items-center gap-2"> <Link href="/" className="flex items-center gap-2">
@ -70,6 +74,6 @@ export default function NavBar(): ReactElement {
<ToggleThemeButton /> <ToggleThemeButton />
<GithubStar /> <GithubStar />
</div> </div>
</div> </Card>
); );
} }

@ -18,7 +18,7 @@ type PlayerViewProps = {
export function PlayerView({ player }: PlayerViewProps): ReactElement { export function PlayerView({ player }: PlayerViewProps): ReactElement {
return ( return (
<div className="flex flex-col gap-2 items-center"> <div className="flex flex-col gap-2 items-center">
<Card classNameContent="w-max xs:w-fit"> <Card classNameCard="w-screen xs:w-fit">
<div className="flex gap-4 flex-col xs:flex-row relative"> <div className="flex gap-4 flex-col xs:flex-row relative">
<div className="flex items-center flex-col"> <div className="flex items-center flex-col">
<SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} /> <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />

@ -24,10 +24,10 @@ type ServerViewProps = {
export function ServerView({ server, favicon }: ServerViewProps): ReactElement { export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
return ( return (
<div className="flex relative flex-col gap-2 items-center scale-75 xs:scale-100 w-screen"> <div className="flex relative flex-col gap-2 items-center w-screen">
<div <div
className={cn( className={cn(
"w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none", "w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none scale-75 xs:scale-100",
'bg-[url("/media/server-background.png")]', 'bg-[url("/media/server-background.png")]',
)} )}
> >