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

fix: improve tag layout in TripChecklist

Browse source
This commit is contained in:
Felix Zett 2025-09-21 16:12:16 +02:00
parent 16dbd44831
commit c7b720ba4a
1 changed files with 55 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -241,16 +241,16 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
const checkedItems = items.filter((item) => item.checked).length;
const progress = totalItems > 0 ? Math.round((checkedItems / totalItems) * 100) : 0;
// Progress gradient for header background (always full width)
// Progress gradient for header background
const progressGradient = `
linear-gradient(90deg,#facc15 0%, #22c55e 100%),
linear-gradient(to top, rgba(255,255,255,0) 6%, rgba(255, 255, 255, 1) 8%)
linear-gradient(90deg, #facc15 0%, fuchsia 100%),
linear-gradient(to top, rgba(255,255,255,0) 6%, rgba(255, 255, 255, 1) 10%)
`;
return (
<div className="py-4 max-w-5xl mx-auto">
<div
className="mb-6 px-4 py-3 pb-6 rounded-xl border hadow shadow-md flex flex-wrap items-center gap-4 relative"
className="mb-6 px-4 py-3 pb-6 rounded-xl border shadow shadow-md flex flex-wrap items-center gap-4 relative"
style={{
background: progressGradient,
backgroundBlendMode: "lighten",
@ -273,13 +273,15 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
}}
/>
<div className="flex flex-col flex-1 min-w-[180px]" style={{ position: "relative", zIndex: 2 }}>
<div className="flex items-end gap-2">
<div className="flex flex-nowrap items-end gap-2">
<h2 className="text-xl text-gray-900 font-bold m-0">{trip.name}</h2>
<span className="text-xs text-gray-500 px-2 py-0.5 rounded font-semibold">
{trip.start_date} – {trip.end_date}
</span>
</div>
<div className="flex flex-wrap gap-2 items-center mt-2">
</div>
{/* Tags kompakt rechts */}
<div className="flex flex-wrap gap-2 items-center min-w-[180px]" style={{ position: "relative", zIndex: 2 }}>
{selectedTags.length === 0 ? (
<span className="text-gray-400 text-sm">keine</span>
) : (
@ -332,12 +334,6 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
)}
</div>
</div>
{/* Fortschritt kompakt rechts */}
<div className="flex flex-col items-end min-w-[120px]" style={{ position: "relative", zIndex: 2 }}>
<span className="text-xs text-gray-500">{checkedItems} / {totalItems}</span>
<span className="text-xs text-gray-500">{progress}%</span>
</div>
</div>
{/* ...restliche Seite... */}
<ul
className="grid grid-cols-1 gap-x-8 gap-y-2"