jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Improved mobile layout

Browse Source
This commit is contained in:
Jose Selesan
2026-05-08 11:02:03 -03:00
parent 65295236c5
commit ab22ec86ec
25 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/frontend/src/components/header.tsx
View File

@@ -143,7 +143,7 @@ export function Header() {
<header className="sticky top-0 z-50 w-full border-b border-border/60 bg-background/60 dark:border-primary/20 dark:bg-[#030a10]/90 backdrop-blur-xl">
<div className="absolute inset-0 -z-10 bg-gradient-to-b from-background/85 to-background/45 dark:from-[#030a10]/95 dark:to-[#030a10]/70" />
<div className="mx-auto flex h-16 w-full max-w-7xl items-center gap-4 px-4 sm:px-6 lg:px-8">
<div className="mx-auto flex h-16 w-full max-w-7xl items-center gap-4 px-3 sm:px-6 lg:px-8">
<Link to="/" className="group flex items-center gap-3">
<div className="flex size-10 items-center justify-center shadow-primary/10 ">
<img src={PlayzerIcon} alt="Playzer" className="size-7" />

2
apps/frontend/src/components/layout.tsx
View File

@@ -20,7 +20,7 @@ export function Layout({ children }: LayoutProps) {
className={
isMobileHome
? 'relative z-10 mx-auto w-full max-w-7xl'
: 'relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8'
: 'relative z-10 mx-auto w-full max-w-7xl px-3 py-6 sm:px-6 lg:px-8'
}
>
{children}

2
apps/frontend/src/features/about/about-page.tsx
View File

@@ -1,6 +1,6 @@
export function AboutPage() {
return (
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h2 className="text-2xl font-semibold">About</h2>
<p className="mt-2 text-sm text-muted-foreground">

10
apps/frontend/src/features/booking/components/booking-mobile.tsx
View File

@@ -66,7 +66,7 @@ export function BookingMobile() {
return (
<div className="min-h-dvh pb-24">
<MobileTopBar />
<div className="space-y-6 px-4 pt-5">
<div className="space-y-6 px-3 pt-5">
<MobilePanelHeader />
<MobileFilters />
<MobileSummary />
@@ -155,7 +155,7 @@ function MobileTopBar() {
};
return (
<header className="sticky top-0 z-30 border-b border-border/70 bg-background/85 px-4 py-4 backdrop-blur-xl">
<header className="sticky top-0 z-30 border-b border-border/70 bg-background/85 px-3 py-4 backdrop-blur-xl">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2.5">
<img src={PlayzerIcon} alt="Playzer" className="size-9" />
@@ -475,7 +475,7 @@ function MobileCourtDay({
return (
<div className="min-h-dvh pb-24">
<header className="sticky top-0 z-30 border-b border-border/70 bg-background/90 px-4 py-4 backdrop-blur-xl">
<header className="sticky top-0 z-30 border-b border-border/70 bg-background/90 px-3 py-4 backdrop-blur-xl">
<div className="flex items-center justify-between gap-3">
<Button
type="button"
@@ -522,7 +522,7 @@ function MobileCourtDay({
</div>
</header>
<main className="space-y-4 px-4 pt-4">
<main className="space-y-4 px-3 pt-4">
<section className="rounded-lg border border-border/70 bg-card/70 p-4">
<StatusLegend />
</section>
@@ -534,7 +534,7 @@ function MobileCourtDay({
</section>
</main>
<div className="fixed inset-x-0 bottom-0 z-40 border-t border-border/70 bg-background/90 p-4 backdrop-blur-xl">
<div className="fixed inset-x-0 bottom-0 z-40 border-t border-border/70 bg-background/90 p-3 backdrop-blur-xl">
<Button
type="button"
className="h-14 w-full rounded-lg text-base shadow-lg shadow-primary/25"

2
apps/frontend/src/features/complex/complex-courts-page.tsx
View File

@@ -32,7 +32,7 @@ export function ComplexCourtsPage({ complexSlug }: ComplexCourtsPageProps) {
});
return (
<main className="mx-auto w-full max-w-6xl space-y-6 px-4 py-4 sm:px-6">
<main className="mx-auto w-full max-w-6xl space-y-6 py-4">
<section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
<h2 className="text-2xl font-semibold">
{complexQuery.data?.complexName ?? 'Configurar canchas'}

4
apps/frontend/src/features/complex/complex-settings-page.tsx
View File

@@ -43,7 +43,7 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
];
return (
<div className="mx-auto w-full max-w-6xl px-4 py-4 sm:px-6">
<div className="mx-auto w-full max-w-6xl py-4">
<section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
<h2 className="text-2xl font-semibold">
<Settings className="mb-1 mr-2 inline size-6" />
@@ -54,7 +54,7 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
</p>
</section>
<div className="mt-6 grid gap-6 lg:grid-cols-[200px_1fr]">
<div className="mt-6 grid gap-5 lg:grid-cols-[200px_1fr] lg:gap-6">
<nav className="flex flex-row gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
{tabs.map((tab) => {
const Icon = tab.icon;

2
apps/frontend/src/features/complex/components/complex-courts-section.tsx
View File

@@ -22,7 +22,7 @@ export function ComplexCourtsSection({ complexId }: ComplexCourtsSectionProps) {
});
return (
<section className="mt-6 rounded-xl border bg-card p-5">
<section className="mt-6 rounded-xl border bg-card p-3 sm:p-5">
<div className="flex items-center gap-2">
<MapPin className="size-5 text-muted-foreground" />
<h3 className="text-lg font-medium">Canchas</h3>

2
apps/frontend/src/features/complex/components/court-form-section.tsx
View File

@@ -128,7 +128,7 @@ export function CourtFormSection({
const buttonText = editingCourt ? 'Guardar cambios' : 'Agregar cancha';
return (
<section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5 mb-4">
<section className="mb-4 rounded-xl border bg-card p-3 text-card-foreground shadow-sm sm:p-5">
<h3 className="text-lg font-semibold">{title}</h3>
<p className="mt-1 text-sm text-muted-foreground">
Configura nombre, deporte, duración, precio base y horarios. El backend ya contempla precios

4
apps/frontend/src/features/complex/components/court-list-section.tsx
View File

@@ -18,7 +18,7 @@ export function CourtListSection({
onEditCourt,
}: CourtListSectionProps) {
return (
<section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
<section className="rounded-xl border bg-card p-3 text-card-foreground shadow-sm sm:p-5">
<h3 className="text-lg font-semibold">Canchas configuradas</h3>
{isLoading && <p className="mt-3 text-sm text-muted-foreground">Cargando canchas...</p>}
@@ -37,7 +37,7 @@ export function CourtListSection({
<div className="mt-4 space-y-3">
{courts.map((court) => (
<article key={court.id} className="rounded-lg border p-4">
<article key={court.id} className="rounded-lg border p-3 sm:p-4">
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
<div>
<p className="font-medium">{court.name}</p>

2
apps/frontend/src/features/login/login-page.tsx
View File

@@ -78,7 +78,7 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
};
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="mb-2 text-2xl font-semibold">Iniciar sesión</h1>
<p className="mb-4 text-sm text-muted-foreground">

2
apps/frontend/src/features/not-found/not-found-page.tsx
View File

@@ -4,7 +4,7 @@ import { Compass, Home, Sparkles } from 'lucide-react';
export function NotFoundPage() {
return (
<main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-6 py-10">
<main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-3 py-10 sm:px-6">
<div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_20%_20%,rgba(56,189,248,0.14),transparent_45%),radial-gradient(circle_at_80%_10%,rgba(244,114,182,0.12),transparent_40%),radial-gradient(circle_at_50%_90%,rgba(59,130,246,0.10),transparent_40%)]" />
<section className="w-full max-w-2xl rounded-2xl border bg-card/80 p-8 text-card-foreground shadow-xl backdrop-blur">

2
apps/frontend/src/features/onboard/components/onboarding-layout.tsx
View File

@@ -7,7 +7,7 @@ type OnboardingLayoutProps = PropsWithChildren<{
export function OnboardingLayout({ title, description, children }: OnboardingLayoutProps) {
return (
<main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-6">
<main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="mb-2 text-2xl font-semibold">{title}</h1>
<p className="mb-4 text-sm text-muted-foreground">{description}</p>

2
apps/frontend/src/features/onboard/create-complex-page.tsx
View File

@@ -106,7 +106,7 @@ export function CreateComplexPage() {
};
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="mb-2 text-2xl font-semibold">Crear tu complejo</h1>
<p className="mb-4 text-sm text-muted-foreground">

2
apps/frontend/src/features/onboard/onboard-login-page.tsx
View File

@@ -142,7 +142,7 @@ export function OnboardLoginPage({
};
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="mb-2 text-2xl font-semibold">
{mode === 'login' ? 'Iniciar sesión' : 'Crear cuenta'}

2
apps/frontend/src/features/onboard/verify-email-page.tsx
View File

@@ -24,7 +24,7 @@ export function VerifyEmailPage() {
};
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="mb-2 text-2xl font-semibold">Verificá tu email</h1>
<p className="mb-4 text-sm text-muted-foreground">

4
apps/frontend/src/features/password-reset/reset-password-page.tsx
View File

@@ -149,7 +149,7 @@ export function ResetPasswordPage() {
if (successMessage) {
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<div className="text-center">
<div className="mb-4 text-2xl">✓</div>
@@ -162,7 +162,7 @@ export function ResetPasswordPage() {
}
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="mb-2 text-2xl font-semibold">
{step === 'email' ? 'Restablecer contraseña' : 'Ingresá el código'}

4
apps/frontend/src/features/profile/profile-page.tsx
View File

@@ -100,7 +100,7 @@ export function ProfilePage() {
if (!isAuthenticated) {
return (
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="text-2xl font-semibold">Perfil</h1>
<p className="mt-2 text-sm text-muted-foreground">
@@ -115,7 +115,7 @@ export function ProfilePage() {
}
return (
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6 py-8">
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-3 py-8 sm:px-6">
<div className="w-full max-w-3xl space-y-6">
<section className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<div className="flex items-center gap-3">

2
apps/frontend/src/features/public-booking/public-booking-confirmation-page.tsx
View File

@@ -41,7 +41,7 @@ export function PublicBookingConfirmationPage({
return (
<main className="min-h-screen bg-linear-to-b from-background via-background to-primary/5">
<div className="mx-auto flex min-h-screen w-full max-w-3xl items-center px-4 py-8 sm:px-6">
<div className="mx-auto flex min-h-screen w-full max-w-3xl items-center px-3 py-8 sm:px-6">
<section className="w-full rounded-3xl border bg-card p-5 shadow-lg sm:p-8">
{confirmationQuery.isLoading && (
<p className="text-sm text-muted-foreground">Cargando confirmacion...</p>

2
apps/frontend/src/features/public-booking/public-booking-page.tsx
View File

@@ -330,7 +330,7 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
return (
<main className="min-h-screen bg-linear-to-b from-background to-muted/40">
<div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-4 sm:gap-6 sm:px-6 sm:py-8">
<div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-3 py-4 sm:gap-6 sm:px-6 sm:py-8">
<section className="rounded-2xl border bg-card p-4 shadow-sm sm:p-6">
<div className="flex flex-col gap-1">
<h1 className="text-2xl font-bold text-primary sm:text-3xl">

8
apps/frontend/src/features/select-complex/select-complex-page.tsx
View File

@@ -29,7 +29,7 @@ export function SelectComplexPage() {
if (complexesQuery.isLoading) {
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</main>
);
@@ -37,7 +37,7 @@ export function SelectComplexPage() {
if (complexesQuery.isError) {
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<div className="text-center">
<p className="text-destructive">Error al cargar tus complejos.</p>
<Button variant="link" className="mt-2" onClick={() => complexesQuery.refetch()}>
@@ -52,7 +52,7 @@ export function SelectComplexPage() {
if (complexes.length === 0) {
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<div className="text-center">
<p className="text-muted-foreground">No tenés complejos asociados.</p>
</div>
@@ -61,7 +61,7 @@ export function SelectComplexPage() {
}
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<section className="w-full max-w-md space-y-6">
<div className="space-y-2">
<h1 className="text-2xl font-semibold">Seleccioná un complejo</h1>

2
apps/frontend/src/features/server-error/server-error-page.tsx
View File

@@ -4,7 +4,7 @@ import { AlertTriangle, Home, RefreshCw, Route } from 'lucide-react';
export function ServerErrorPage({ error, reset }: ErrorComponentProps) {
return (
<main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-6 py-10">
<main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-3 py-10 sm:px-6">
<div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_15%_10%,rgba(248,113,113,0.14),transparent_42%),radial-gradient(circle_at_80%_20%,rgba(251,191,36,0.12),transparent_38%),radial-gradient(circle_at_60%_90%,rgba(59,130,246,0.10),transparent_42%)]" />
<section className="w-full max-w-2xl rounded-2xl border bg-card/80 p-8 text-card-foreground shadow-xl backdrop-blur">

2
apps/frontend/src/main.tsx
View File

@@ -36,7 +36,7 @@ function AppRouter() {
if (auth.loading) {
return (
<main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-6">
<main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-3 sm:px-6">
<p className="text-sm text-muted-foreground">Validando sesión...</p>
</main>
);

2
apps/frontend/src/routes/__root.tsx
View File

@@ -19,7 +19,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
function RootRoute() {
return (
<Layout>
<div className="flex flex-col p-6">
<div className="flex flex-col">
<Outlet />
</div>
</Layout>

2
apps/frontend/src/routes/auth-callback.tsx
View File

@@ -41,7 +41,7 @@ function AuthCallbackPage() {
}, [isAuthenticated, navigate]);
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<p className="text-sm text-muted-foreground">Completando sesión...</p>
</main>
);

2
apps/frontend/src/routes/invite.tsx
View File

@@ -36,7 +36,7 @@ function InvitePage() {
if (isAuthenticated) {
return (
<main className="flex min-h-screen w-full items-center justify-center px-6">
<main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
<p className="text-sm text-muted-foreground">Aceptando invitación...</p>
</main>
);