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

114
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,69 +273,65 @@ 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">
{selectedTags.length === 0 ? (
<span className="text-gray-400 text-sm">keine</span>
) : (
selectedTags.map((tag: any) => (
<Tag
key={tag.id}
tag={tag}
isMarked={markedTags.some((mt: any) => mt.id === tag.id)}
hoveredTag={hoveredTag}
onToggleMark={handleToggleMark}
onRemoveTag={handleRemoveTag}
onMouseEnter={setHoveredTag}
onMouseLeave={() => setHoveredTag(null)}
/>
))
)}
{/* "+Tag" link and dropdown */}
{!addingTag ? (
<button
className="text-blue-500 underline text-xs ml-2"
onClick={() => {
setAddingTag(true);
</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>
) : (
selectedTags.map((tag: any) => (
<Tag
key={tag.id}
tag={tag}
isMarked={markedTags.some((mt: any) => mt.id === tag.id)}
hoveredTag={hoveredTag}
onToggleMark={handleToggleMark}
onRemoveTag={handleRemoveTag}
onMouseEnter={setHoveredTag}
onMouseLeave={() => setHoveredTag(null)}
/>
))
)}
{/* "+Tag" link and dropdown */}
{!addingTag ? (
<button
className="text-blue-500 underline text-xs ml-2"
onClick={() => {
setAddingTag(true);
setTimeout(() => {
inputRef.current?.focus();
}, 0);
}}
type="button"
>
+ Tag
</button>
) : (
<TagAutocompleteInput
ref={inputRef}
allTags={allTags}
selectedTags={selectedTags}
onAddTag={(tagId, viaTab) => {
handleAddTag(tagId);
if (viaTab) {
setTimeout(() => {
setAddingTag(true);
inputRef.current?.focus();
}, 0);
}}
type="button"
>
+ Tag
</button>
) : (
<TagAutocompleteInput
ref={inputRef}
allTags={allTags}
selectedTags={selectedTags}
onAddTag={(tagId, viaTab) => {
handleAddTag(tagId);
if (viaTab) {
setTimeout(() => {
setAddingTag(true);
inputRef.current?.focus();
}, 0);
} else {
setAddingTag(false);
}
}}
onEscape={() => setAddingTag(false)}
placeholder="Tag suchen..."
/>
)}
</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>
} else {
setAddingTag(false);
}
}}
onEscape={() => setAddingTag(false)}
placeholder="Tag suchen..."
/>
)}
</div>
</div>
{/* ...restliche Seite... */}