mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 16:11:13 -05:00
Fix grid and filter sizing
This commit is contained in:
@@ -85,7 +85,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FilterSection title="Basic Filters">
|
<FilterSection title="Basic Filters">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>Entity Type</Label>
|
<Label>Entity Type</Label>
|
||||||
<Select
|
<Select
|
||||||
@@ -126,7 +126,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
|
|||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
<FilterSection title="Statistics">
|
<FilterSection title="Statistics">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterRangeSlider
|
<FilterRangeSlider
|
||||||
label="Rating"
|
label="Rating"
|
||||||
value={[filters.minRating, filters.maxRating]}
|
value={[filters.minRating, filters.maxRating]}
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FilterSection title="Basic Filters">
|
<FilterSection title="Basic Filters">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>Entity Type</Label>
|
<Label>Entity Type</Label>
|
||||||
<Select
|
<Select
|
||||||
@@ -126,7 +126,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
|
|||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
<FilterSection title="Statistics">
|
<FilterSection title="Statistics">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterRangeSlider
|
<FilterRangeSlider
|
||||||
label="Rating"
|
label="Rating"
|
||||||
value={[filters.minRating, filters.maxRating]}
|
value={[filters.minRating, filters.maxRating]}
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FilterSection title="Basic Filters">
|
<FilterSection title="Basic Filters">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterMultiSelectCombobox
|
<FilterMultiSelectCombobox
|
||||||
label="Headquarters Country"
|
label="Headquarters Country"
|
||||||
options={countryOptions}
|
options={countryOptions}
|
||||||
@@ -111,7 +111,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
|
|||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
<FilterSection title="Statistics">
|
<FilterSection title="Statistics">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterRangeSlider
|
<FilterRangeSlider
|
||||||
label="Rating"
|
label="Rating"
|
||||||
value={[filters.minRating, filters.maxRating]}
|
value={[filters.minRating, filters.maxRating]}
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FilterSection title="Basic Filters">
|
<FilterSection title="Basic Filters">
|
||||||
<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 gap-4">
|
||||||
{/* Park Type */}
|
{/* Park Type */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>Park Type</Label>
|
<Label>Park Type</Label>
|
||||||
@@ -227,7 +227,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
|
|||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
<FilterSection title="Operators & Owners">
|
<FilterSection title="Operators & Owners">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterMultiSelectCombobox
|
<FilterMultiSelectCombobox
|
||||||
label="Operators"
|
label="Operators"
|
||||||
options={operatorOptions}
|
options={operatorOptions}
|
||||||
@@ -248,7 +248,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
|
|||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
<FilterSection title="Opening Dates">
|
<FilterSection title="Opening Dates">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterDateRangePicker
|
<FilterDateRangePicker
|
||||||
label="Opening Year"
|
label="Opening Year"
|
||||||
fromDate={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : null}
|
fromDate={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : null}
|
||||||
@@ -270,7 +270,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
|
|||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
<FilterSection title="Statistics">
|
<FilterSection title="Statistics">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterRangeSlider
|
<FilterRangeSlider
|
||||||
label="Rating"
|
label="Rating"
|
||||||
value={[filters.minRating, filters.maxRating]}
|
value={[filters.minRating, filters.maxRating]}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ interface ParkGridViewProps {
|
|||||||
|
|
||||||
export function ParkGridView({ parks }: ParkGridViewProps) {
|
export function ParkGridView({ parks }: ParkGridViewProps) {
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
||||||
{parks.map((park) => (
|
{parks.map((park) => (
|
||||||
<ParkCard
|
<ParkCard
|
||||||
key={park.id}
|
key={park.id}
|
||||||
|
|||||||
@@ -218,7 +218,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
|
|||||||
|
|
||||||
{/* Basic Filters */}
|
{/* Basic Filters */}
|
||||||
<FilterSection title="Basic Filters">
|
<FilterSection title="Basic Filters">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterMultiSelectCombobox
|
<FilterMultiSelectCombobox
|
||||||
label="Categories"
|
label="Categories"
|
||||||
options={categoryOptions}
|
options={categoryOptions}
|
||||||
@@ -252,7 +252,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
|
|||||||
|
|
||||||
{/* Geographic Filters */}
|
{/* Geographic Filters */}
|
||||||
<FilterSection title="Location">
|
<FilterSection title="Location">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterMultiSelectCombobox
|
<FilterMultiSelectCombobox
|
||||||
label="Countries"
|
label="Countries"
|
||||||
options={countryOptions}
|
options={countryOptions}
|
||||||
@@ -281,7 +281,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
|
|||||||
|
|
||||||
{/* Relationship Filters */}
|
{/* Relationship Filters */}
|
||||||
<FilterSection title="Parks & Companies">
|
<FilterSection title="Parks & Companies">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterMultiSelectCombobox
|
<FilterMultiSelectCombobox
|
||||||
label="Parks"
|
label="Parks"
|
||||||
options={parkOptions}
|
options={parkOptions}
|
||||||
@@ -310,7 +310,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
|
|||||||
|
|
||||||
{/* Coaster-Specific Filters */}
|
{/* Coaster-Specific Filters */}
|
||||||
<FilterSection title="Coaster Details">
|
<FilterSection title="Coaster Details">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterMultiSelectCombobox
|
<FilterMultiSelectCombobox
|
||||||
label="Coaster Type"
|
label="Coaster Type"
|
||||||
options={coasterTypeOptions}
|
options={coasterTypeOptions}
|
||||||
@@ -346,7 +346,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
|
|||||||
|
|
||||||
{/* Numeric Range Filters */}
|
{/* Numeric Range Filters */}
|
||||||
<FilterSection title="Statistics">
|
<FilterSection title="Statistics">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterRangeSlider
|
<FilterRangeSlider
|
||||||
label="Speed"
|
label="Speed"
|
||||||
value={[filters.minSpeed, filters.maxSpeed]}
|
value={[filters.minSpeed, filters.maxSpeed]}
|
||||||
@@ -389,7 +389,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
|
|||||||
|
|
||||||
{/* Date Filters */}
|
{/* Date Filters */}
|
||||||
<FilterSection title="Dates">
|
<FilterSection title="Dates">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
<FilterDateRangePicker
|
<FilterDateRangePicker
|
||||||
label="Opening Date"
|
label="Opening Date"
|
||||||
fromDate={filters.openingDateFrom}
|
fromDate={filters.openingDateFrom}
|
||||||
|
|||||||
@@ -193,7 +193,7 @@ export default function Designers() {
|
|||||||
{/* Main Content Area with Sidebar */}
|
{/* Main Content Area with Sidebar */}
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
<div className="flex flex-col lg:flex-row gap-6">
|
||||||
{/* Desktop Filter Sidebar */}
|
{/* Desktop Filter Sidebar */}
|
||||||
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
|
<aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
|
||||||
<div className="sticky top-24">
|
<div className="sticky top-24">
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="pt-6">
|
<CardContent className="pt-6">
|
||||||
|
|||||||
@@ -206,7 +206,7 @@ export default function Manufacturers() {
|
|||||||
{/* Main Content Area with Sidebar */}
|
{/* Main Content Area with Sidebar */}
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
<div className="flex flex-col lg:flex-row gap-6">
|
||||||
{/* Desktop Filter Sidebar */}
|
{/* Desktop Filter Sidebar */}
|
||||||
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
|
<aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
|
||||||
<div className="sticky top-24">
|
<div className="sticky top-24">
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="pt-6">
|
<CardContent className="pt-6">
|
||||||
|
|||||||
@@ -264,7 +264,7 @@ const Operators = () => {
|
|||||||
{/* Main Content Area with Sidebar */}
|
{/* Main Content Area with Sidebar */}
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
<div className="flex flex-col lg:flex-row gap-6">
|
||||||
{/* Desktop Filter Sidebar */}
|
{/* Desktop Filter Sidebar */}
|
||||||
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
|
<aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
|
||||||
<div className="sticky top-24">
|
<div className="sticky top-24">
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="pt-6">
|
<CardContent className="pt-6">
|
||||||
|
|||||||
@@ -457,7 +457,7 @@ export default function Parks() {
|
|||||||
{/* Main Content Area with Sidebar */}
|
{/* Main Content Area with Sidebar */}
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
<div className="flex flex-col lg:flex-row gap-6">
|
||||||
{/* Desktop Filter Sidebar */}
|
{/* Desktop Filter Sidebar */}
|
||||||
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
|
<aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
|
||||||
<div className="sticky top-24">
|
<div className="sticky top-24">
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="pt-6">
|
<CardContent className="pt-6">
|
||||||
|
|||||||
@@ -213,7 +213,7 @@ export default function Rides() {
|
|||||||
{/* Main Content Area with Sidebar */}
|
{/* Main Content Area with Sidebar */}
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
<div className="flex flex-col lg:flex-row gap-6">
|
||||||
{/* Desktop Filter Sidebar */}
|
{/* Desktop Filter Sidebar */}
|
||||||
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
|
<aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
|
||||||
<div className="sticky top-24">
|
<div className="sticky top-24">
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="pt-6">
|
<CardContent className="pt-6">
|
||||||
|
|||||||
Reference in New Issue
Block a user