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">
<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
type="text"
placeholder="🔍 Suchen..."
value={filterText}
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>
<TagFilter
tags={tags}
selected={selectedTags}
onToggle={handleTagToggle}
/>
{/* Tag-Filter */}
<div className="mb-4 p-2 rounded bg-blue-50 border border-blue-200 shadow-sm">
<TagFilter
tags={tags}
selected={selectedTags}
onToggle={handleTagToggle}
/>
</div>
{/* Neue ItemRow als erste Zeile */}
<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
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}
onChange={e => setNewItemName(e.target.value)}
placeholder="Neues Item..."
@ -161,7 +165,7 @@ export default function ItemsPage() {
/>
{/* Trip-Auswahl */}
<select
className="border rounded px-1 py-0.5"
className="border rounded px-2 py-1 shadow"
value={newItemTripId}
onChange={e => {
setNewItemTripId(e.target.value);
@ -176,20 +180,24 @@ export default function ItemsPage() {
))}
</select>
{/* Tags-Auswahl, nur wenn kein Trip gewählt */}
{!newItemTripId && tags.map((tag) => (
<span
key={tag.id}
className={
`${getTagColor(tag.id).bg} text-sm rounded px-1 py-0.5 flex items-center cursor-pointer font-medium` +
(newItemTags.includes(tag.id) ? " ring-2 ring-blue-400 font-bold" : "")
}
onClick={() => toggleNewItemTag(tag.id)}
title={tag.mandatory ? "Pflicht-Tag (mandatory)" : ""}
>
#{tag.name}
{tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
</span>
))}
{!newItemTripId && (
<div className="flex flex-wrap gap-1 p-1 bg-white rounded border border-gray-200">
{tags.map((tag) => (
<span
key={tag.id}
className={
`${getTagColor(tag.id).bg} text-sm rounded px-1 py-0.5 flex items-center cursor-pointer font-medium` +
(newItemTags.includes(tag.id) ? " ring-2 ring-blue-400 font-bold" : "")
}
onClick={() => toggleNewItemTag(tag.id)}
title={tag.mandatory ? "Pflicht-Tag (mandatory)" : ""}
>
#{tag.name}
{tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
</span>
))}
</div>
)}
{/* Hinweis, falls Trip gewählt */}
{newItemTripId && (
<span className="text-xs text-gray-500 italic">
@ -197,7 +205,7 @@ export default function ItemsPage() {
</span>
)}
<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}
disabled={adding || !newItemName.trim()}
style={{ minWidth: 90 }}