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

feat: enhance UI for ItemsPage with improved input styles and tag filter layout

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

58
frontend/src/pages/ItemsPage.tsx
View file

@ -130,27 +130,31 @@ export default function ItemsPage() {
<div className="p-2"> <div className="p-2">
<h1 className="text-2xl font-bold mb-4">Items</h1> <h1 className="text-2xl font-bold mb-4">Items</h1>
<div className="mb-4 flex items-center gap-2"> {/* Suche */}
<div className="mb-4">
<input <input
type="text" type="text"
placeholder="🔍 Suchen..." placeholder="🔍 Suchen..."
value={filterText} value={filterText}
onChange={(e) => setFilterText(e.target.value)} onChange={(e) => setFilterText(e.target.value)}
className="border rounded px-2 py-1 w-full" className="border rounded px-3 py-2 w-full shadow focus:outline-none focus:ring-2 focus:ring-blue-300"
/> />
</div> </div>
<TagFilter {/* Tag-Filter */}
tags={tags} <div className="mb-4 p-2 rounded bg-blue-50 border border-blue-200 shadow-sm">
selected={selectedTags} <TagFilter
onToggle={handleTagToggle} tags={tags}
/> selected={selectedTags}
onToggle={handleTagToggle}
/>
</div>
{/* Neue ItemRow als erste Zeile */} {/* Neue ItemRow als erste Zeile */}
<ul className="divide-y"> <ul className="divide-y">
<li className="flex flex-wrap items-center gap-2 py-1 border-b bg-gray-50"> <li className="flex flex-wrap items-center gap-2 py-2 border-b bg-gray-50 rounded shadow-sm">
<input <input
className="border rounded px-1 py-0.5 flex-1 min-w-[120px]" className="border rounded px-2 py-1 flex-1 min-w-[120px] shadow focus:outline-none focus:ring-2 focus:ring-green-300"
value={newItemName} value={newItemName}
onChange={e => setNewItemName(e.target.value)} onChange={e => setNewItemName(e.target.value)}
placeholder="Neues Item..." placeholder="Neues Item..."
@ -161,7 +165,7 @@ export default function ItemsPage() {
/> />
{/* Trip-Auswahl */} {/* Trip-Auswahl */}
<select <select
className="border rounded px-1 py-0.5" className="border rounded px-2 py-1 shadow"
value={newItemTripId} value={newItemTripId}
onChange={e => { onChange={e => {
setNewItemTripId(e.target.value); setNewItemTripId(e.target.value);
@ -176,20 +180,24 @@ export default function ItemsPage() {
))} ))}
</select> </select>
{/* Tags-Auswahl, nur wenn kein Trip gewählt */} {/* Tags-Auswahl, nur wenn kein Trip gewählt */}
{!newItemTripId && tags.map((tag) => ( {!newItemTripId && (
<span <div className="flex flex-wrap gap-1 p-1 bg-white rounded border border-gray-200">
key={tag.id} {tags.map((tag) => (
className={ <span
`${getTagColor(tag.id).bg} text-sm rounded px-1 py-0.5 flex items-center cursor-pointer font-medium` + key={tag.id}
(newItemTags.includes(tag.id) ? " ring-2 ring-blue-400 font-bold" : "") className={
} `${getTagColor(tag.id).bg} text-sm rounded px-1 py-0.5 flex items-center cursor-pointer font-medium` +
onClick={() => toggleNewItemTag(tag.id)} (newItemTags.includes(tag.id) ? " ring-2 ring-blue-400 font-bold" : "")
title={tag.mandatory ? "Pflicht-Tag (mandatory)" : ""} }
> onClick={() => toggleNewItemTag(tag.id)}
#{tag.name} title={tag.mandatory ? "Pflicht-Tag (mandatory)" : ""}
{tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>} >
</span> #{tag.name}
))} {tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
</span>
))}
</div>
)}
{/* Hinweis, falls Trip gewählt */} {/* Hinweis, falls Trip gewählt */}
{newItemTripId && ( {newItemTripId && (
<span className="text-xs text-gray-500 italic"> <span className="text-xs text-gray-500 italic">
@ -197,7 +205,7 @@ export default function ItemsPage() {
</span> </span>
)} )}
<button <button
className="text-xs text-green-600 bg-green-100 rounded px-2 py-1 ml-auto" className="text-xs text-green-600 bg-green-100 rounded px-4 py-2 ml-auto shadow"
onClick={handleAddItem} onClick={handleAddItem}
disabled={adding || !newItemName.trim()} disabled={adding || !newItemName.trim()}
style={{ minWidth: 90 }} style={{ minWidth: 90 }}