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>
</div>
<FilterSection>
<FilterSection title="Basic Filters">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-2">
<Label>Entity Type</Label>

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

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

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

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

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

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

17
src/pages/Designers.tsx
View File

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

17
src/pages/Manufacturers.tsx
View File

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

16
src/pages/Operators.tsx
View File

@@ -208,7 +208,9 @@ const Operators = () => {
</div>
{/* 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">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
<Input
@@ -218,8 +220,9 @@ const Operators = () => {
className="pl-10 h-11"
/>
</div>
</div>
<div className="flex gap-2">
<div className="flex gap-2 w-full lg:w-auto">
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-[180px] h-10">
<SelectValue placeholder="Sort by" />
@@ -232,12 +235,17 @@ const Operators = () => {
</SelectContent>
</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" />
Filters
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
</div>
</div>
<Collapsible open={showFilters} onOpenChange={setShowFilters}>
<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 { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
@@ -412,12 +413,13 @@ export default function Parks() {
<Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
className="shrink-0"
className="shrink-0 gap-2"
>
<Filter className="w-4 h-4 md:mr-2" />
<span className="hidden md:inline">Filters</span>
<Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
{activeFilterCount > 0 && (
<Badge variant="secondary" className="ml-2">
<Badge variant="secondary" className="ml-1">
{activeFilterCount}
</Badge>
)}
@@ -437,9 +439,10 @@ export default function Parks() {
</div>
{/* Advanced Filters Panel */}
{showFilters && (
<Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent>
<Card>
<CardContent className="p-6">
<CardContent className="pt-6">
<ParkFilters
filters={filters}
onFiltersChange={setFilters}
@@ -447,7 +450,8 @@ export default function Parks() {
/>
</CardContent>
</Card>
)}
</CollapsibleContent>
</Collapsible>
</div>
{/* Results */}

4
src/pages/Rides.tsx
View File

@@ -185,12 +185,12 @@ export default function Rides() {
</Select>
<Button
variant="outline"
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
className="gap-2"
>
<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' : ''}`} />
</Button>
</div>