pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 12:51:16 -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}

17
src/pages/Designers.tsx
View File

@@ -138,7 +138,9 @@ 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="flex flex-col lg:flex-row gap-4">
<div className="flex-1">
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
<Input <Input
@@ -148,8 +150,9 @@ export default function Designers() {
className="pl-10 h-11" className="pl-10 h-11"
/> />
</div> </div>
</div>
<div className="flex gap-2"> <div className="flex gap-2 w-full lg:w-auto">
<Select value={sortBy} onValueChange={setSortBy}> <Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-[180px] h-10"> <SelectTrigger className="w-[180px] h-10">
<SlidersHorizontal className="h-4 w-4 mr-2" /> <SlidersHorizontal className="h-4 w-4 mr-2" />
@@ -160,12 +163,18 @@ export default function Designers() {
<SelectItem value="founded">Founded (Newest)</SelectItem> <SelectItem value="founded">Founded (Newest)</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
<Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
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>
</div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent> <CollapsibleContent>

17
src/pages/Manufacturers.tsx
View File

@@ -151,7 +151,9 @@ 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="flex flex-col lg:flex-row gap-4">
<div className="flex-1">
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
<Input <Input
@@ -161,8 +163,9 @@ export default function Manufacturers() {
className="pl-10 h-11" className="pl-10 h-11"
/> />
</div> </div>
</div>
<div className="flex gap-2"> <div className="flex gap-2 w-full lg:w-auto">
<Select value={sortBy} onValueChange={setSortBy}> <Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-[180px] h-10"> <SelectTrigger className="w-[180px] h-10">
<SlidersHorizontal className="h-4 w-4 mr-2" /> <SlidersHorizontal className="h-4 w-4 mr-2" />
@@ -173,12 +176,18 @@ export default function Manufacturers() {
<SelectItem value="founded">Founded (Newest)</SelectItem> <SelectItem value="founded">Founded (Newest)</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
<Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
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>
</div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent> <CollapsibleContent>

16
src/pages/Operators.tsx
View File

@@ -208,7 +208,9 @@ 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="flex flex-col lg:flex-row gap-4">
<div className="flex-1">
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
<Input <Input
@@ -218,8 +220,9 @@ const Operators = () => {
className="pl-10 h-11" className="pl-10 h-11"
/> />
</div> </div>
</div>
<div className="flex gap-2"> <div className="flex gap-2 w-full lg:w-auto">
<Select value={sortBy} onValueChange={setSortBy}> <Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-[180px] h-10"> <SelectTrigger className="w-[180px] h-10">
<SelectValue placeholder="Sort by" /> <SelectValue placeholder="Sort by" />
@@ -232,12 +235,17 @@ const Operators = () => {
</SelectContent> </SelectContent>
</Select> </Select>
<Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2"> <Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
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>
</div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent> <CollapsibleContent>

18
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,9 +439,10 @@ export default function Parks() {
</div> </div>
{/* Advanced Filters Panel */} {/* Advanced Filters Panel */}
{showFilters && ( <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent>
<Card> <Card>
<CardContent className="p-6"> <CardContent className="pt-6">
<ParkFilters <ParkFilters
filters={filters} filters={filters}
onFiltersChange={setFilters} onFiltersChange={setFilters}
@@ -447,7 +450,8 @@ export default function Parks() {
/> />
</CardContent> </CardContent>
</Card> </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>