pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 19:31:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Optimize desktop max-widths

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-06 16:15:36 +00:00
parent 590d4ede52
commit bc8cb18172
11 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/homepage/ContentTabs.tsx
View File

@@ -125,11 +125,13 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Most Popular Parks</h2>
<p className="text-muted-foreground">Highest rated theme parks worldwide</p>
</div>
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
{popularParks.map((park) => (
<ParkCard key={park.id} park={park} />
))}
</div>
</div>
</TabsContent>
<TabsContent value="trending-parks" className="mt-8">
@@ -137,11 +139,13 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
<p className="text-muted-foreground">Most reviewed parks this month</p>
</div>
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
{trendingParks.map((park) => (
<ParkCard key={park.id} park={park} />
))}
</div>
</div>
</TabsContent>
<TabsContent value="popular-rides" className="mt-8">
@@ -149,11 +153,13 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Most Popular Rides</h2>
<p className="text-muted-foreground">Highest rated attractions worldwide</p>
</div>
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
{popularRides.map((ride) => (
<RideCard key={ride.id} ride={ride} />
))}
</div>
</div>
</TabsContent>
<TabsContent value="trending-rides" className="mt-8">
@@ -161,11 +167,13 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
<p className="text-muted-foreground">Most talked about attractions</p>
</div>
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
{trendingRides.map((ride) => (
<RideCard key={ride.id} ride={ride} />
))}
</div>
</div>
</TabsContent>
<TabsContent value="recent-parks" className="mt-8">
@@ -173,11 +181,13 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2>
<p className="text-muted-foreground">Latest parks added to our database</p>
</div>
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
{recentParks.map((park) => (
<ParkCard key={park.id} park={park} />
))}
</div>
</div>
</TabsContent>
<TabsContent value="recent-rides" className="mt-8">
@@ -185,11 +195,13 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2>
<p className="text-muted-foreground">Latest attractions added to our database</p>
</div>
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
{recentRides.map((ride) => (
<RideCard key={ride.id} ride={ride} />
))}
</div>
</div>
</TabsContent>
</Tabs>
</div>

2
src/components/rides/CoasterStatistics.tsx
View File

@@ -64,7 +64,7 @@ export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
<h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
{category}
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-3 max-w-4xl mx-auto">
{stats
.sort((a, b) => a.display_order - b.display_order)
.map((stat) => (

2
src/components/rides/TechnicalSpecifications.tsx
View File

@@ -71,7 +71,7 @@ export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificati
<h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
{category}
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-3 max-w-4xl mx-auto">
{specs
.sort((a, b) => a.display_order - b.display_order)
.map((spec) => (

4
src/pages/DesignerDetail.tsx
View File

@@ -111,7 +111,7 @@ export default function DesignerDetail() {
<div className="min-h-screen bg-background">
<Header />
<main className="container mx-auto px-4 py-8">
<main className="container mx-auto px-4 py-8 max-w-7xl">
{/* Back Button and Edit Button */}
<div className="flex items-center justify-between mb-6">
<Button variant="ghost" onClick={() => navigate('/designers')}>
@@ -200,7 +200,7 @@ export default function DesignerDetail() {
</div>
{/* Company Info */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
{designer.founded_year && (
<Card>
<CardContent className="p-4 text-center">

4
src/pages/ManufacturerDetail.tsx
View File

@@ -111,7 +111,7 @@ export default function ManufacturerDetail() {
<div className="min-h-screen bg-background">
<Header />
<main className="container mx-auto px-4 py-8">
<main className="container mx-auto px-4 py-8 max-w-7xl">
{/* Back Button and Edit Button */}
<div className="flex items-center justify-between mb-6">
<Button variant="ghost" onClick={() => navigate('/manufacturers')}>
@@ -202,7 +202,7 @@ export default function ManufacturerDetail() {
</div>
{/* Company Info */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
{manufacturer.founded_year && (
<Card>
<CardContent className="p-3 md:p-4 text-center">

6
src/pages/OperatorDetail.tsx
View File

@@ -140,7 +140,7 @@ export default function OperatorDetail() {
<div className="min-h-screen bg-background">
<Header />
<main className="container mx-auto px-4 py-8">
<main className="container mx-auto px-4 py-8 max-w-7xl">
{/* Back Button and Edit Button */}
<div className="flex items-center justify-between mb-6">
<Button variant="ghost" onClick={() => navigate('/operators')}>
@@ -229,7 +229,7 @@ export default function OperatorDetail() {
</div>
{/* Company Info */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
{operator.founded_year && (
<Card>
<CardContent className="p-4 text-center">
@@ -298,7 +298,7 @@ export default function OperatorDetail() {
))}
</div>
) : parks.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{parks.map((park) => (
<ParkCard key={park.id} park={park} />
))}

6
src/pages/ParkDetail.tsx
View File

@@ -204,7 +204,7 @@ export default function ParkDetail() {
return <div className="min-h-screen bg-background">
<Header />
<main className="container mx-auto px-4 py-8">
<main className="container mx-auto px-4 py-8 max-w-7xl">
{/* Back Button and Edit Button */}
<div className="flex items-center justify-between mb-6">
<Button variant="ghost" onClick={() => navigate('/parks')}>
@@ -282,7 +282,7 @@ export default function ParkDetail() {
</div>
{/* Quick Stats */}
<div className="relative mb-12">
<div className="relative mb-12 max-w-6xl mx-auto">
{/* Background decorative elements */}
<div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5 rounded-3xl blur-xl"></div>
@@ -388,7 +388,7 @@ export default function ParkDetail() {
<CardTitle>Featured Rides</CardTitle>
</CardHeader>
<CardContent>
<div className="grid sm:grid-cols-2 gap-4">
<div className="grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
{rides.slice(0, 4).map(ride => (
<RideCard
key={ride.id}

2
src/pages/Parks.tsx
View File

@@ -295,7 +295,7 @@ export default function Parks() {
<div className="min-h-screen bg-background">
<Header />
<main className="container mx-auto px-4 py-8">
<main className="container mx-auto px-4 py-8 max-w-7xl">
{/* Page Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-4">

6
src/pages/PropertyOwnerDetail.tsx
View File

@@ -140,7 +140,7 @@ export default function PropertyOwnerDetail() {
<div className="min-h-screen bg-background">
<Header />
<main className="container mx-auto px-4 py-8">
<main className="container mx-auto px-4 py-8 max-w-7xl">
{/* Back Button and Edit Button */}
<div className="flex items-center justify-between mb-6">
<Button variant="ghost" onClick={() => navigate('/owners')}>
@@ -229,7 +229,7 @@ export default function PropertyOwnerDetail() {
</div>
{/* Company Info */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
{owner.founded_year && (
<Card>
<CardContent className="p-4 text-center">
@@ -298,7 +298,7 @@ export default function PropertyOwnerDetail() {
))}
</div>
) : parks.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{parks.map((park) => (
<ParkCard key={park.id} park={park} />
))}

6
src/pages/RideDetail.tsx
View File

@@ -192,7 +192,7 @@ export default function RideDetail() {
<div className="min-h-screen bg-background">
<Header />
<main className="container mx-auto px-4 py-8">
<main className="container mx-auto px-4 py-8 max-w-7xl">
{/* Back Button and Edit Button */}
<div className="flex items-center justify-between mb-6">
<Button
@@ -290,7 +290,8 @@ export default function RideDetail() {
</div>
{/* Quick Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
<div className="max-w-6xl mx-auto mb-8">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
{ride.max_speed_kmh && (
<Card>
<CardContent className="p-4 text-center">
@@ -378,6 +379,7 @@ export default function RideDetail() {
</Card>
)}
</div>
</div>
{/* Main Content */}

4
src/pages/Rides.tsx
View File

@@ -148,7 +148,7 @@ export default function Rides() {
<div className="min-h-screen bg-background">
<Header />
<main className="container mx-auto px-4 py-8">
<main className="container mx-auto px-4 py-8 max-w-7xl">
{/* Page Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-4">
@@ -246,7 +246,7 @@ export default function Rides() {
{/* Rides Grid */}
{filteredRides.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
{filteredRides.map((ride) => (
<RideCard key={ride.id} ride={ride} showParkName={true} />
))}