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

Refactor: Implement unified responsive design

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:14:52 +00:00
parent 27864d99a6
commit 99acc31e3c
10 changed files with 135 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/designers/DesignerFilters.tsx
View File

@@ -84,7 +84,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
</Button> </Button>
</div> </div>
<FilterSection> <FilterSection title="Basic Filters">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>Entity Type</Label> <Label>Entity Type</Label>

2
src/components/manufacturers/ManufacturerFilters.tsx
View File

@@ -84,7 +84,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
</Button> </Button>
</div> </div>
<FilterSection> <FilterSection title="Basic Filters">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>Entity Type</Label> <Label>Entity Type</Label>

2
src/components/operators/OperatorFilters.tsx
View File

@@ -87,7 +87,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
</Button> </Button>
</div> </div>
<FilterSection> <FilterSection title="Basic Filters">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FilterMultiSelectCombobox <FilterMultiSelectCombobox
label="Headquarters Country" label="Headquarters Country"

4
src/components/parks/ParkFilters.tsx
View File

@@ -143,8 +143,8 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
</Button> </Button>
</div> </div>
<FilterSection> <FilterSection title="Basic Filters">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{/* Park Type */} {/* Park Type */}
<div className="space-y-2"> <div className="space-y-2">
<Label>Park Type</Label> <Label>Park Type</Label>

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

@@ -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-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<FilterMultiSelectCombobox <FilterMultiSelectCombobox
label="Parks" label="Parks"
options={parkOptions} options={parkOptions}

63
src/pages/Designers.tsx
View File

@@ -138,33 +138,42 @@ export default function Designers() {
</div> </div>
{/* Search and Filters */} {/* Search and Filters */}
<div className="space-y-3 mb-6"> <div className="mb-6 space-y-4">
<div className="relative"> <div className="flex flex-col lg:flex-row gap-4">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" /> <div className="flex-1">
<Input <div className="relative">
placeholder="Search designers..." <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
value={searchQuery} <Input
onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search designers..."
className="pl-10 h-11" value={searchQuery}
/> onChange={(e) => setSearchQuery(e.target.value)}
</div> className="pl-10 h-11"
/>
<div className="flex gap-2"> </div>
<Select value={sortBy} onValueChange={setSortBy}> </div>
<SelectTrigger className="w-[180px] h-10">
<SlidersHorizontal className="h-4 w-4 mr-2" /> <div className="flex gap-2 w-full lg:w-auto">
<SelectValue /> <Select value={sortBy} onValueChange={setSortBy}>
</SelectTrigger> <SelectTrigger className="w-[180px] h-10">
<SelectContent> <SlidersHorizontal className="h-4 w-4 mr-2" />
<SelectItem value="name">Name A-Z</SelectItem> <SelectValue />
<SelectItem value="founded">Founded (Newest)</SelectItem> </SelectTrigger>
</SelectContent> <SelectContent>
</Select> <SelectItem value="name">Name A-Z</SelectItem>
<Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2"> <SelectItem value="founded">Founded (Newest)</SelectItem>
<Filter className="w-4 h-4" /> </SelectContent>
Filters </Select>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button> <Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
className="gap-2"
>
<Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
</div>
</div> </div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>

63
src/pages/Manufacturers.tsx
View File

@@ -151,33 +151,42 @@ export default function Manufacturers() {
</div> </div>
{/* Search and Filters */} {/* Search and Filters */}
<div className="space-y-3 mb-6"> <div className="mb-6 space-y-4">
<div className="relative"> <div className="flex flex-col lg:flex-row gap-4">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" /> <div className="flex-1">
<Input <div className="relative">
placeholder="Search manufacturers..." <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
value={searchQuery} <Input
onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search manufacturers..."
className="pl-10 h-11" value={searchQuery}
/> onChange={(e) => setSearchQuery(e.target.value)}
</div> className="pl-10 h-11"
/>
<div className="flex gap-2"> </div>
<Select value={sortBy} onValueChange={setSortBy}> </div>
<SelectTrigger className="w-[180px] h-10">
<SlidersHorizontal className="h-4 w-4 mr-2" /> <div className="flex gap-2 w-full lg:w-auto">
<SelectValue /> <Select value={sortBy} onValueChange={setSortBy}>
</SelectTrigger> <SelectTrigger className="w-[180px] h-10">
<SelectContent> <SlidersHorizontal className="h-4 w-4 mr-2" />
<SelectItem value="name">Name A-Z</SelectItem> <SelectValue />
<SelectItem value="founded">Founded (Newest)</SelectItem> </SelectTrigger>
</SelectContent> <SelectContent>
</Select> <SelectItem value="name">Name A-Z</SelectItem>
<Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2"> <SelectItem value="founded">Founded (Newest)</SelectItem>
<Filter className="w-4 h-4" /> </SelectContent>
Filters </Select>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button> <Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
className="gap-2"
>
<Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
</div>
</div> </div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>

64
src/pages/Operators.tsx
View File

@@ -208,35 +208,43 @@ const Operators = () => {
</div> </div>
{/* Search and Filters */} {/* Search and Filters */}
<div className="space-y-3 mb-6"> <div className="mb-6 space-y-4">
<div className="relative"> <div className="flex flex-col lg:flex-row gap-4">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" /> <div className="flex-1">
<Input <div className="relative">
placeholder="Search park operators..." <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
value={searchTerm} <Input
onChange={(e) => setSearchTerm(e.target.value)} placeholder="Search park operators..."
className="pl-10 h-11" value={searchTerm}
/> onChange={(e) => setSearchTerm(e.target.value)}
</div> className="pl-10 h-11"
/>
<div className="flex gap-2"> </div>
<Select value={sortBy} onValueChange={setSortBy}> </div>
<SelectTrigger className="w-[180px] h-10">
<SelectValue placeholder="Sort by" /> <div className="flex gap-2 w-full lg:w-auto">
</SelectTrigger> <Select value={sortBy} onValueChange={setSortBy}>
<SelectContent> <SelectTrigger className="w-[180px] h-10">
<SelectItem value="name">Name</SelectItem> <SelectValue placeholder="Sort by" />
<SelectItem value="rating">Rating</SelectItem> </SelectTrigger>
<SelectItem value="founded">Founded Year</SelectItem> <SelectContent>
<SelectItem value="reviews">Review Count</SelectItem> <SelectItem value="name">Name</SelectItem>
</SelectContent> <SelectItem value="rating">Rating</SelectItem>
</Select> <SelectItem value="founded">Founded Year</SelectItem>
<SelectItem value="reviews">Review Count</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2"> <Button
<Filter className="w-4 h-4" /> variant={showFilters ? "default" : "outline"}
Filters onClick={() => setShowFilters(!showFilters)}
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} /> className="gap-2"
</Button> >
<Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
</div>
</div> </div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>

34
src/pages/Parks.tsx
View File

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
import { Header } from '@/components/layout/Header'; import { Header } from '@/components/layout/Header';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { import {
@@ -412,12 +413,13 @@ export default function Parks() {
<Button <Button
variant={showFilters ? "default" : "outline"} variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)} onClick={() => setShowFilters(!showFilters)}
className="shrink-0" className="shrink-0 gap-2"
> >
<Filter className="w-4 h-4 md:mr-2" /> <Filter className="w-4 h-4" />
<span className="hidden md:inline">Filters</span> <span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
{activeFilterCount > 0 && ( {activeFilterCount > 0 && (
<Badge variant="secondary" className="ml-2"> <Badge variant="secondary" className="ml-1">
{activeFilterCount} {activeFilterCount}
</Badge> </Badge>
)} )}
@@ -437,17 +439,19 @@ export default function Parks() {
</div> </div>
{/* Advanced Filters Panel */} {/* Advanced Filters Panel */}
{showFilters && ( <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<Card> <CollapsibleContent>
<CardContent className="p-6"> <Card>
<ParkFilters <CardContent className="pt-6">
filters={filters} <ParkFilters
onFiltersChange={setFilters} filters={filters}
parks={parks} onFiltersChange={setFilters}
/> parks={parks}
</CardContent> />
</Card> </CardContent>
)} </Card>
</CollapsibleContent>
</Collapsible>
</div> </div>
{/* Results */} {/* Results */}

4
src/pages/Rides.tsx
View File

@@ -185,12 +185,12 @@ export default function Rides() {
</Select> </Select>
<Button <Button
variant="outline" variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)} onClick={() => setShowFilters(!showFilters)}
className="gap-2" className="gap-2"
> >
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
Filters <span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} /> <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button> </Button>
</div> </div>