trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ui responsiveness

Browse source
This commit is contained in:
trafficlunar 2025-03-29 14:57:55 +00:00
parent dbe1d2417c
commit d8c9514a7d
4 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/components/header.tsx
View file

@ -10,14 +10,16 @@ export default async function Header() {
const session = await getServerSession();
return (
<div className="fixed top-0 w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md">
<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400">
<div className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-200 shadow-md max-lg:grid-cols-2 max-sm:grid-cols-1">
<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400 max-sm:text-center">
TomodachiShare
</Link>
<div className="flex justify-center max-lg:justify-end max-sm:col-span-3 max-sm:justify-center">
<SearchBar />
</div>
<ul className="flex gap-3 items-center h-11 *:h-full">
<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-sm:justify-center">
<li title="Random Mii">
<Link href={"/random"} className="button !p-0 h-full aspect-square">
<Icon icon="mdi:dice-3" fontSize={28} />

5
src/app/layout.tsx
View file

@ -20,9 +20,10 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={`${lexend.className} antialiased flex flex-col items-center py-32`}>
<body className={`${lexend.className} antialiased flex flex-col items-center`}>
<Header />
{children}
<div className="px-4 py-8">{children}</div>
</body>
</html>
);

6
src/app/login/page.tsx
View file

@ -13,9 +13,9 @@ export default async function LoginPage() {
}
return (
<div className="flex flex-col items-center">
<h1 className="text-3xl font-medium">Welcome to TomodachiShare!</h1>
<h2 className="text-lg">Choose your login method</h2>
<div className="flex flex-col">
<h1 className="text-3xl font-medium text-center">Welcome to TomodachiShare!</h1>
<h2 className="text-lg text-center">Choose your login method</h2>
<LoginButtons />
</div>

6
src/app/page.tsx
View file

@ -1,9 +1,9 @@
export default function Page() {
return (
<div className="max-w-5xl grid grid-cols-3 gap-4">
<div className="max-w-7xl grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-sm:grid-cols-2 max-[25rem]:grid-cols-1">
{/* testing purposes only */}
{[...Array(3)].map((_, index) => (
<div key={index} className="bg-zinc-50 rounded-3xl border-2 border-amber-300 shadow-lg p-3 transition hover:scale-105">
{[...Array(12)].map((_, index) => (
<div key={index} className="bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3 transition hover:scale-105">
<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl" />
<div className="p-4">
<h3 className="font-bold text-2xl">Frieren</h3>