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

Fix desktop layout

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-06 16:10:37 +00:00
parent b22d74c381
commit 88901a7f20
5 changed files with 121 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-3">
{photos.map((photo) => (
<div
key={photo.id}

9
src/components/rides/RideCard.tsx
View File

@@ -10,9 +10,10 @@ interface RideCardProps {
showParkName?: boolean;
className?: string;
parkSlug?: string;
compact?: boolean;
}
export function RideCard({ ride, showParkName = true, className, parkSlug }: RideCardProps) {
export function RideCard({ ride, showParkName = true, className, parkSlug, compact = false }: RideCardProps) {
const navigate = useNavigate();
const handleRideClick = () => {
@@ -49,12 +50,12 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
return (
<Card
className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02] ${className}`}
className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02] ${compact ? 'max-w-sm' : ''} ${className}`}
onClick={handleRideClick}
>
<div className="relative overflow-hidden">
{/* Image/Icon Section */}
<div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
<div className={`bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative ${compact ? 'aspect-[4/3]' : 'aspect-video'}`}>
{(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
<img
src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.card_image_id}/public` : ride.image_url)}
@@ -78,7 +79,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
</Badge>
</div>
<CardContent className="p-4 space-y-3">
<CardContent className={`space-y-3 ${compact ? 'p-3' : 'p-4'}`}>
{/* Header */}
<div className="space-y-1">
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">

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

107
src/pages/ParkDetail.tsx
View File

@@ -358,64 +358,66 @@ export default function ParkDetail() {
</div>
{/* Main Content */}
<Tabs defaultValue="overview" className="w-full">
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
<TabsTrigger value="reviews">Reviews</TabsTrigger>
<TabsTrigger value="photos">Photos</TabsTrigger>
<TabsTrigger value="history">History</TabsTrigger>
</TabsList>
<div className="max-w-7xl mx-auto px-4 lg:px-6">
<Tabs defaultValue="overview" className="w-full">
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
<TabsTrigger value="reviews">Reviews</TabsTrigger>
<TabsTrigger value="photos">Photos</TabsTrigger>
<TabsTrigger value="history">History</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="mt-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 className="max-w-prose mx-auto lg:mx-0">
<TabsContent value="overview" className="mt-6">
<div className="grid lg:grid-cols-[2fr,1fr] xl:grid-cols-[1.5fr,1fr] gap-6">
{/* Left column - main content */}
<div className="space-y-6">
{/* Description */}
{park.description && <Card>
<CardHeader>
<CardTitle>About {park.name}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground leading-relaxed text-base">
{park.description}
</p>
</CardContent>
</Card>}
{/* Featured Rides */}
<Card>
<CardHeader>
<CardTitle>About {park.name}</CardTitle>
<CardTitle>Featured Rides</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground leading-relaxed">
{park.description}
</p>
</CardContent>
</Card>}
{/* Featured Rides */}
<Card>
<CardHeader>
<CardTitle>Featured Rides</CardTitle>
</CardHeader>
<CardContent>
<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}
showParkName={false}
parkSlug={park.slug}
className="h-full"
/>
))}
</div>
{rides.length > 6 && (
<div className="mt-4 text-center">
<Button
variant="outline"
onClick={() => navigate(`/parks/${park.slug}/rides/`)}
>
View All {park.ride_count} Rides
</Button>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{rides.slice(0, 6).map(ride => (
<RideCard
key={ride.id}
ride={ride}
showParkName={false}
parkSlug={park.slug}
className="h-full"
compact={true}
/>
))}
</div>
)}
</CardContent>
</Card>
</div>
{rides.length > 6 && (
<div className="mt-4 text-center">
<Button
variant="outline"
onClick={() => navigate(`/parks/${park.slug}/rides/`)}
>
View All {park.ride_count} Rides
</Button>
</div>
)}
</CardContent>
</Card>
</div>
{/* Sidebar - single column on desktop */}
<div className="space-y-6 lg:row-span-2">
{/* Right sidebar - sticky on desktop */}
<div className="space-y-6 lg:sticky lg:top-6 lg:self-start">
{/* Park Information */}
<Card>
<CardHeader>
@@ -631,6 +633,7 @@ export default function ParkDetail() {
</Tabs>
</TabsContent>
</Tabs>
</div>
{/* Add Ride Modal */}
<Dialog open={isAddRideModalOpen} onOpenChange={setIsAddRideModalOpen}>

115
src/pages/RideDetail.tsx
View File

@@ -290,8 +290,8 @@ export default function RideDetail() {
</div>
{/* Quick Stats */}
<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">
<div className="max-w-4xl mx-auto mb-8 px-4">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
{ride.max_speed_kmh && (
<Card>
<CardContent className="p-4 text-center">
@@ -383,45 +383,60 @@ export default function RideDetail() {
{/* Main Content */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="specs">Specifications</TabsTrigger>
<TabsTrigger value="reviews">Reviews</TabsTrigger>
<TabsTrigger value="photos">Photos</TabsTrigger>
<TabsTrigger value="history">History</TabsTrigger>
</TabsList>
<div className="max-w-7xl mx-auto px-4 lg:px-6">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="specs">Specifications</TabsTrigger>
<TabsTrigger value="reviews">Reviews</TabsTrigger>
<TabsTrigger value="photos">Photos</TabsTrigger>
<TabsTrigger value="history">History</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="mt-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 className="max-w-prose mx-auto lg:mx-0">
<CardHeader>
<CardTitle>About {ride.name}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground leading-relaxed">
{ride.description}
</p>
</CardContent>
</Card>
)}
<TabsContent value="overview" className="mt-6">
<div className="grid lg:grid-cols-[2fr,1fr] xl:grid-cols-[1.5fr,1fr] gap-6">
{/* Left column - main content */}
<div className="space-y-6">
{/* Description */}
{ride.description && (
<Card>
<CardHeader>
<CardTitle>About {ride.name}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground leading-relaxed text-base">
{ride.description}
</p>
</CardContent>
</Card>
)}
{ride.name_history && ride.name_history.length > 0 && (
<FormerNames nameHistory={ride.name_history} currentName={ride.name} />
)}
</div>
{ride.name_history && ride.name_history.length > 0 && (
<FormerNames nameHistory={ride.name_history} currentName={ride.name} />
)}
{/* Sidebar - single column on desktop */}
<div className="space-y-6 lg:row-span-2">
<RatingDistribution
rideId={ride.id}
totalReviews={ride.review_count}
averageRating={ride.average_rating}
/>
{/* Similar Rides in left column */}
<SimilarRides
currentRideId={ride.id}
parkId={(ride as any).currentParkId}
parkSlug={parkSlug || ''}
category={ride.category}
/>
{/* Recent Photos in left column */}
<RecentPhotosPreview
rideId={ride.id}
onViewAll={() => setActiveTab("photos")}
/>
</div>
{/* Right sidebar - sticky on desktop */}
<div className="space-y-6 lg:sticky lg:top-6 lg:self-start">
<RatingDistribution
rideId={ride.id}
totalReviews={ride.review_count}
averageRating={ride.average_rating}
/>
{/* Ride Information */}
<Card>
<CardHeader>
@@ -530,32 +545,18 @@ 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>
<TabsContent value="specs" className="mt-6">
<div className="grid md:grid-cols-2 gap-6">
<div className="max-w-5xl mx-auto">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Performance Stats */}
<Card>
<CardHeader>
<CardTitle>Performance</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="space-y-3">
{ride.max_speed_kmh && (
<div className="flex justify-between">
<span>Maximum Speed</span>
@@ -614,7 +615,7 @@ export default function RideDetail() {
<CardHeader>
<CardTitle>Operational Details</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="space-y-3">
{ride.capacity_per_hour && (
<div className="flex justify-between">
<span>Capacity</span>
@@ -644,6 +645,7 @@ export default function RideDetail() {
</CardContent>
</Card>
</div>
</div>
</TabsContent>
<TabsContent value="reviews" className="mt-6">
@@ -710,6 +712,7 @@ export default function RideDetail() {
</Tabs>
</TabsContent>
</Tabs>
</div>
{/* Edit Ride Modal */}
<Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>