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

@ -7,6 +7,7 @@ import { HrefButton } from "./href-button";
import Logo from "./logo";
import { ToggleThemeButton } from "./theme-toggle-button";
import { GithubStar } from "@/app/components/github-star";
import { Card } from "@/app/components/card";
type Page = {
/**
@ -37,7 +38,10 @@ export default function NavBar(): ReactElement {
const path = usePathname();
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 */}
<div className="z-50">
<Link href="/" className="flex items-center gap-2">
@ -70,6 +74,6 @@ export default function NavBar(): ReactElement {
<ToggleThemeButton />
<GithubStar />
</div>
</div>
</Card>
);
}

@ -18,7 +18,7 @@ type PlayerViewProps = {
export function PlayerView({ player }: PlayerViewProps): ReactElement {
return (
<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 items-center flex-col">
<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 {
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
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")]',
)}
>