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 checkedItems = items.filter((item) => item.checked).length;
const progress = totalItems > 0 ? Math.round((checkedItems / totalItems) * 100) : 0; 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 = ` const progressGradient = `
linear-gradient(90deg,#facc15 0%, #22c55e 100%), linear-gradient(90deg, #facc15 0%, fuchsia 100%),
linear-gradient(to top, rgba(255,255,255,0) 6%, rgba(255, 255, 255, 1) 8%) linear-gradient(to top, rgba(255,255,255,0) 6%, rgba(255, 255, 255, 1) 10%)
`; `;
return ( return (
<div className="py-4 max-w-5xl mx-auto"> <div className="py-4 max-w-5xl mx-auto">
<div <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={{ style={{
background: progressGradient, background: progressGradient,
backgroundBlendMode: "lighten", 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 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> <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"> <span className="text-xs text-gray-500 px-2 py-0.5 rounded font-semibold">
{trip.start_date} – {trip.end_date} {trip.start_date} – {trip.end_date}
</span> </span>
</div> </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 ? ( {selectedTags.length === 0 ? (
<span className="text-gray-400 text-sm">keine</span> <span className="text-gray-400 text-sm">keine</span>
) : ( ) : (
@ -332,12 +334,6 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
)} )}
</div> </div>
</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... */} {/* ...restliche Seite... */}
<ul <ul
className="grid grid-cols-1 gap-x-8 gap-y-2" className="grid grid-cols-1 gap-x-8 gap-y-2"