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

feat: enhance progress gradient

Browse source
This commit is contained in:
Felix Zett 2025-09-20 21:00:23 +02:00
parent 00d4a9b7e8
commit ef7eeb27a1
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -241,15 +241,20 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
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 (always full width)
const progressGradient = `linear-gradient(140deg, #f59e42 0%, #facc15 50%, #22c55e 100%)`; 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%)
`;
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 rounded-xl shadow flex flex-wrap items-center gap-4 relative" className="mb-6 px-4 py-3 pb-6 rounded-xl border hadow shadow-md flex flex-wrap items-center gap-4 relative"
style={{ style={{
background: progressGradient, background: progressGradient,
backgroundBlendMode: "lighten",
transition: "background 0.3s", transition: "background 0.3s",
overflow: "visible",
}} }}
> >
{/* Overlay: shrinking box from the right */} {/* Overlay: shrinking box from the right */}