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

Refactor: Improve desktop layout

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-06 16:03:35 +00:00
parent 28f83b9c0f
commit b22d74c381
4 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-4 gap-4 max-w-4xl mx-auto">
<div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4">
{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 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{rides.map((ride) => (
<RideCard
key={ride.id}

8
src/pages/ParkDetail.tsx
View File

@@ -368,10 +368,11 @@ export default function ParkDetail() {
</TabsList>
<TabsContent value="overview" className="mt-6">
<div className="grid lg:grid-cols-3 gap-6">
<div className="grid lg:grid-cols-[1fr,1fr,340px] xl:grid-cols-[1fr,1fr,380px] gap-6">
{/* Main content - spans 2 columns on desktop */}
<div className="lg:col-span-2 space-y-6">
{/* Description */}
{park.description && <Card>
{park.description && <Card className="max-w-prose mx-auto lg:mx-0">
<CardHeader>
<CardTitle>About {park.name}</CardTitle>
</CardHeader>
@@ -413,7 +414,8 @@ export default function ParkDetail() {
</Card>
</div>
<div className="space-y-6">
{/* Sidebar - single column on desktop */}
<div className="space-y-6 lg:row-span-2">
{/* Park Information */}
<Card>
<CardHeader>

41
src/pages/RideDetail.tsx
View File

@@ -290,8 +290,8 @@ export default function RideDetail() {
</div>
{/* Quick Stats */}
<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">
<div className="max-w-5xl mx-auto mb-8">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4">
{ride.max_speed_kmh && (
<Card>
<CardContent className="p-4 text-center">
@@ -393,11 +393,12 @@ export default function RideDetail() {
</TabsList>
<TabsContent value="overview" className="mt-6">
<div className="grid lg:grid-cols-2 gap-6">
<div className="space-y-6">
<div className="grid lg:grid-cols-[1fr,1fr,340px] xl:grid-cols-[1fr,1fr,380px] gap-6">
{/* Main content - spans 2 columns on desktop */}
<div className="lg:col-span-2 space-y-6">
{/* Description */}
{ride.description && (
<Card>
<Card className="max-w-prose mx-auto lg:mx-0">
<CardHeader>
<CardTitle>About {ride.name}</CardTitle>
</CardHeader>
@@ -412,21 +413,10 @@ export default function RideDetail() {
{ride.name_history && ride.name_history.length > 0 && (
<FormerNames nameHistory={ride.name_history} currentName={ride.name} />
)}
<SimilarRides
currentRideId={ride.id}
parkId={(ride as any).currentParkId}
parkSlug={parkSlug || ''}
category={ride.category}
/>
<RecentPhotosPreview
rideId={ride.id}
onViewAll={() => setActiveTab("photos")}
/>
</div>
<div className="space-y-6">
{/* Sidebar - single column on desktop */}
<div className="space-y-6 lg:row-span-2">
<RatingDistribution
rideId={ride.id}
totalReviews={ride.review_count}
@@ -540,6 +530,21 @@ export default function RideDetail() {
</CardContent>
</Card>
</div>
{/* Full-width sections below */}
<div className="lg:col-span-3 space-y-6">
<SimilarRides
currentRideId={ride.id}
parkId={(ride as any).currentParkId}
parkSlug={parkSlug || ''}
category={ride.category}
/>
<RecentPhotosPreview
rideId={ride.id}
onViewAll={() => setActiveTab("photos")}
/>
</div>
</div>
</TabsContent>