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

Refactor: Implement side-by-side filter layout

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:27:50 +00:00
parent 890a6ab911
commit 703dbcd8af
5 changed files with 231 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/Designers.tsx
View File

@@ -167,7 +167,7 @@ export default function Designers() {
<Button <Button
variant={showFilters ? "default" : "outline"} variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)} onClick={() => setShowFilters(!showFilters)}
className="gap-2" className="gap-2 lg:hidden"
> >
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span> <span className="hidden sm:inline">Filters</span>
@@ -176,6 +176,8 @@ export default function Designers() {
</div> </div>
</div> </div>
{/* Mobile Filters */}
<div className="lg:hidden">
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent> <CollapsibleContent>
<Card className="mt-4"> <Card className="mt-4">
@@ -186,10 +188,25 @@ export default function Designers() {
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
</div> </div>
</div>
{/* Companies Grid */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
<div className="sticky top-24">
<Card>
<CardContent className="pt-6">
<DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
</CardContent>
</Card>
</div>
</aside>
{/* Results Area */}
<div className="flex-1 min-w-0">
{filteredCompanies.length > 0 ? ( {filteredCompanies.length > 0 ? (
<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-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredCompanies.map((company) => ( {filteredCompanies.map((company) => (
<DesignerCard key={company.id} company={company} /> <DesignerCard key={company.id} company={company} />
))} ))}
@@ -203,6 +220,8 @@ export default function Designers() {
</p> </p>
</div> </div>
)} )}
</div>
</div>
</main> </main>
<Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}> <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto"> <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">

25
src/pages/Manufacturers.tsx
View File

@@ -180,7 +180,7 @@ export default function Manufacturers() {
<Button <Button
variant={showFilters ? "default" : "outline"} variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)} onClick={() => setShowFilters(!showFilters)}
className="gap-2" className="gap-2 lg:hidden"
> >
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span> <span className="hidden sm:inline">Filters</span>
@@ -189,6 +189,8 @@ export default function Manufacturers() {
</div> </div>
</div> </div>
{/* Mobile Filters */}
<div className="lg:hidden">
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent> <CollapsibleContent>
<Card className="mt-4"> <Card className="mt-4">
@@ -199,10 +201,25 @@ export default function Manufacturers() {
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
</div> </div>
</div>
{/* Companies Grid */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
<div className="sticky top-24">
<Card>
<CardContent className="pt-6">
<ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
</CardContent>
</Card>
</div>
</aside>
{/* Results Area */}
<div className="flex-1 min-w-0">
{filteredCompanies.length > 0 ? ( {filteredCompanies.length > 0 ? (
<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-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredCompanies.map((company) => ( {filteredCompanies.map((company) => (
<ManufacturerCard key={company.id} company={company} /> <ManufacturerCard key={company.id} company={company} />
))} ))}
@@ -216,6 +233,8 @@ export default function Manufacturers() {
</p> </p>
</div> </div>
)} )}
</div>
</div>
</main> </main>
{/* Create Modal */} {/* Create Modal */}

25
src/pages/Operators.tsx
View File

@@ -238,7 +238,7 @@ const Operators = () => {
<Button <Button
variant={showFilters ? "default" : "outline"} variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)} onClick={() => setShowFilters(!showFilters)}
className="gap-2" className="gap-2 lg:hidden"
> >
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span> <span className="hidden sm:inline">Filters</span>
@@ -247,6 +247,8 @@ const Operators = () => {
</div> </div>
</div> </div>
{/* Mobile Filters */}
<div className="lg:hidden">
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent> <CollapsibleContent>
<Card className="mt-4"> <Card className="mt-4">
@@ -257,8 +259,23 @@ const Operators = () => {
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
</div> </div>
</div>
{/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
<div className="sticky top-24">
<Card>
<CardContent className="pt-6">
<OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
</CardContent>
</Card>
</div>
</aside>
{/* Results Area */}
<div className="flex-1 min-w-0">
{/* Loading State */} {/* Loading State */}
{isLoading && ( {isLoading && (
<div className="text-center py-12"> <div className="text-center py-12">
@@ -268,8 +285,8 @@ const Operators = () => {
)} )}
{/* Operators Grid */} {/* Operators Grid */}
{!isLoading && filteredAndSortedOperators && ( {!isLoading && filteredAndSortedOperators && filteredAndSortedOperators.length > 0 && (
<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-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredAndSortedOperators.map((operator) => ( {filteredAndSortedOperators.map((operator) => (
<OperatorCard key={operator.id} company={operator} /> <OperatorCard key={operator.id} company={operator} />
))} ))}
@@ -289,6 +306,8 @@ const Operators = () => {
</p> </p>
</div> </div>
)} )}
</div>
</div>
{/* Create Modal */} {/* Create Modal */}
<Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}> <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>

28
src/pages/Parks.tsx
View File

@@ -411,7 +411,7 @@ export default function Parks() {
<Button <Button
variant={showFilters ? "default" : "outline"} variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)} onClick={() => setShowFilters(!showFilters)}
className="shrink-0 gap-2" className="shrink-0 gap-2 lg:hidden"
> >
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span> <span className="hidden sm:inline">Filters</span>
@@ -436,7 +436,8 @@ export default function Parks() {
</div> </div>
</div> </div>
{/* Advanced Filters Panel */} {/* Mobile Filters */}
<div className="lg:hidden">
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent> <CollapsibleContent>
<Card> <Card>
@@ -451,8 +452,27 @@ export default function Parks() {
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
</div> </div>
</div>
{/* Results */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
<div className="sticky top-24">
<Card>
<CardContent className="pt-6">
<ParkFilters
filters={filters}
onFiltersChange={setFilters}
parks={parks}
/>
</CardContent>
</Card>
</div>
</aside>
{/* Results Area */}
<div className="flex-1 min-w-0">
{filteredAndSortedParks.length > 0 ? ( {filteredAndSortedParks.length > 0 ? (
<div> <div>
{viewMode === 'grid' ? ( {viewMode === 'grid' ? (
@@ -478,6 +498,8 @@ export default function Parks() {
</Button> </Button>
</div> </div>
)} )}
</div>
</div>
{/* Add Park Modal */} {/* Add Park Modal */}
<Dialog open={isAddParkModalOpen} onOpenChange={setIsAddParkModalOpen}> <Dialog open={isAddParkModalOpen} onOpenChange={setIsAddParkModalOpen}>

25
src/pages/Rides.tsx
View File

@@ -187,7 +187,7 @@ export default function Rides() {
<Button <Button
variant={showFilters ? "default" : "outline"} variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)} onClick={() => setShowFilters(!showFilters)}
className="gap-2" className="gap-2 lg:hidden"
> >
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
<span className="hidden sm:inline">Filters</span> <span className="hidden sm:inline">Filters</span>
@@ -196,6 +196,8 @@ export default function Rides() {
</div> </div>
</div> </div>
{/* Mobile Filters */}
<div className="lg:hidden">
<Collapsible open={showFilters} onOpenChange={setShowFilters}> <Collapsible open={showFilters} onOpenChange={setShowFilters}>
<CollapsibleContent> <CollapsibleContent>
<Card> <Card>
@@ -206,10 +208,25 @@ export default function Rides() {
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
</div> </div>
</div>
{/* Rides Grid */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
<div className="sticky top-24">
<Card>
<CardContent className="pt-6">
<RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
</CardContent>
</Card>
</div>
</aside>
{/* Results Area */}
<div className="flex-1 min-w-0">
{filteredRides.length > 0 ? ( {filteredRides.length > 0 ? (
<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-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredRides.map((ride) => ( {filteredRides.map((ride) => (
<RideCard key={ride.id} ride={ride} showParkName={true} /> <RideCard key={ride.id} ride={ride} showParkName={true} />
))} ))}
@@ -223,6 +240,8 @@ export default function Rides() {
</p> </p>
</div> </div>
)} )}
</div>
</div>
{/* Create Modal */} {/* Create Modal */}
<Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}> <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>