make pages more consistent on mobile
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s
This commit is contained in:
parent
95fef83dcf
commit
78390a3bc9
@ -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")]',
|
||||
)}
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user