felix/packlist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: multiple columns

Browse source
This commit is contained in:
Felix Zett 2025-09-15 22:19:52 +02:00
parent 566c1cc125
commit de794b3c45
2 changed files with 139 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.tsx
View file

@ -44,7 +44,7 @@ export default function App() {
} }
return ( return (
<div className="p-4 max-w-2xl mx-auto"> <div className="p-4 max-w-5xl mx-auto">
<h1 className="text-2xl font-bold mb-4">Packlist</h1> <h1 className="text-2xl font-bold mb-4">Packlist</h1>
<div className="flex gap-2 mb-4"> <div className="flex gap-2 mb-4">

25
frontend/src/pages/TripChecklist.tsx
View file

@ -127,6 +127,9 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
return ( return (
<> <>
{/* Haupt-Items als Grid */}
{normalItems.length > 0 && (
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-2 mb-4">
{normalItems.map((item) => ( {normalItems.map((item) => (
<li <li
key={item.id} key={item.id}
@ -167,6 +170,9 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
)} )}
</li> </li>
))} ))}
</ul>
)}
{/* Slash-Kategorien wie gehabt */}
{Object.entries(slashCategoryMap).map(([cat, catItems]) => ( {Object.entries(slashCategoryMap).map(([cat, catItems]) => (
<React.Fragment key={cat}> <React.Fragment key={cat}>
<li className="mt-2 mb-1 flex items-center gap-2"> <li className="mt-2 mb-1 flex items-center gap-2">
@ -174,6 +180,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
{cat.charAt(0).toUpperCase() + cat.slice(1)} {cat.charAt(0).toUpperCase() + cat.slice(1)}
</h3> </h3>
</li> </li>
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-2">
{catItems.map((item) => ( {catItems.map((item) => (
<li <li
key={item.id} key={item.id}
@ -214,6 +221,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
)} )}
</li> </li>
))} ))}
</ul>
</React.Fragment> </React.Fragment>
))} ))}
</> </>
@ -228,16 +236,14 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
} }
return ( return (
<div> <div className="py-4 max-w-5xl mx-auto">
{/* Trip-Titel und Zeitraum */} {/* Trip-Titel und Zeitraum */}
<div className="mb-2"> <div className="mb-6 p-6 rounded-xl border-2 border-blue-200 bg-blue-50 shadow flex flex-col gap-2">
<h2 className="text-xl font-bold">{trip.name}</h2> <h2 className="text-2xl font-bold text-blue-900">{trip.name}</h2>
<div className="text-gray-600 text-sm"> <div className="text-gray-600 text-base">
{trip.start_date} – {trip.end_date} {trip.start_date} – {trip.end_date}
</div> </div>
</div> <div className="flex flex-wrap gap-2 items-center">
{/* Tag-Liste */}
<div className="mb-2 flex flex-wrap gap-2 items-center">
<span className="font-semibold">Tags: </span> <span className="font-semibold">Tags: </span>
{selectedTags.length === 0 ? ( {selectedTags.length === 0 ? (
<span className="text-gray-400">keine</span> <span className="text-gray-400">keine</span>
@ -313,8 +319,11 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
))} ))}
</div> </div>
</div> </div>
</div>
{/* ...Rest der Checklist... */} {/* ...Rest der Checklist... */}
<ul> <ul
className="grid grid-cols-1 gap-x-8 gap-y-2"
>
{/* 1. Ohne Tag */} {/* 1. Ohne Tag */}
{renderItemsWithCategories(itemsWithoutTag)} {renderItemsWithCategories(itemsWithoutTag)}