pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 15:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Optimize desktop layout for entity pages

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-06 15:59:22 +00:00
parent cb1ef6c177
commit 28f83b9c0f
11 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
{stats
.sort((a, b) => a.display_order - b.display_order)
.map((stat) => (

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

@@ -66,7 +66,7 @@ export function RecentPhotosPreview({ rideId, onViewAll }: RecentPhotosPreviewPr
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
{photos.map((photo) => (
<div
key={photo.id}

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

@@ -62,7 +62,7 @@ export function RideHighlights({ ride }: RideHighlightsProps) {
<CardTitle>Ride Highlights</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-4 gap-4 max-w-4xl mx-auto">
{highlights.map((highlight, index) => (
<div key={index} className="flex flex-col items-center text-center p-4 rounded-lg bg-accent/50">
<div className="mb-2">{highlight.icon}</div>

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

@@ -79,7 +79,7 @@ export function SimilarRides({ currentRideId, parkId, parkSlug, category }: Simi
<CardTitle>Similar Rides You Might Enjoy</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{rides.map((ride) => (
<RideCard
key={ride.id}

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 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
{specs
.sort((a, b) => a.display_order - b.display_order)
.map((spec) => (

2
src/pages/DesignerDetail.tsx
View File

@@ -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 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
{designer.founded_year && (
<Card>
<CardContent className="p-4 text-center">

2
src/pages/ManufacturerDetail.tsx
View File

@@ -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 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
{manufacturer.founded_year && (
<Card>
<CardContent className="p-3 md:p-4 text-center">

6
src/pages/OperatorDetail.tsx
View File

@@ -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 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
{operator.founded_year && (
<Card>
<CardContent className="p-4 text-center">
@@ -292,13 +292,13 @@ export default function OperatorDetail() {
</div>
{parksLoading ? (
<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 2xl:grid-cols-5 gap-6">
{[1, 2, 3].map((i) => (
<div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
))}
</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 2xl:grid-cols-5 gap-6">
{parks.map((park) => (
<ParkCard key={park.id} park={park} />
))}

10
src/pages/ParkDetail.tsx
View File

@@ -282,11 +282,11 @@ export default function ParkDetail() {
</div>
{/* Quick Stats */}
<div className="relative mb-12">
<div className="relative mb-12 max-w-7xl 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>
<div className="relative grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-md">
<div className="relative grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-md">
{/* Total Rides */}
<div className="group relative overflow-hidden">
<Card className="h-full border-0 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent hover:shadow-lg hover:shadow-primary/15 transition-all duration-300 hover:scale-[1.02]">
@@ -388,8 +388,8 @@ export default function ParkDetail() {
<CardTitle>Featured Rides</CardTitle>
</CardHeader>
<CardContent>
<div className="grid sm:grid-cols-2 gap-4">
{rides.slice(0, 4).map(ride => (
<div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{rides.slice(0, 6).map(ride => (
<RideCard
key={ride.id}
ride={ride}
@@ -399,7 +399,7 @@ export default function ParkDetail() {
/>
))}
</div>
{rides.length > 4 && (
{rides.length > 6 && (
<div className="mt-4 text-center">
<Button
variant="outline"

6
src/pages/PropertyOwnerDetail.tsx
View File

@@ -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 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
{owner.founded_year && (
<Card>
<CardContent className="p-4 text-center">
@@ -292,13 +292,13 @@ export default function PropertyOwnerDetail() {
</div>
{parksLoading ? (
<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 2xl:grid-cols-5 gap-6">
{[1, 2, 3].map((i) => (
<div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
))}
</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 2xl:grid-cols-5 gap-6">
{parks.map((park) => (
<ParkCard key={park.id} park={park} />
))}

8
src/pages/RideDetail.tsx
View File

@@ -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-7xl mx-auto mb-8">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl: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 */}
@@ -391,8 +393,8 @@ export default function RideDetail() {
</TabsList>
<TabsContent value="overview" className="mt-6">
<div className="grid lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 space-y-6">
<div className="grid lg:grid-cols-2 gap-6">
<div className="space-y-6">
{/* Description */}
{ride.description && (
<Card>