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

22
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>
{/* Tag-Filter */}
<div className="mb-4 p-2 rounded bg-blue-50 border border-blue-200 shadow-sm">
<TagFilter <TagFilter
tags={tags} tags={tags}
selected={selectedTags} selected={selectedTags}
onToggle={handleTagToggle} 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,7 +180,9 @@ 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 && (
<div className="flex flex-wrap gap-1 p-1 bg-white rounded border border-gray-200">
{tags.map((tag) => (
<span <span
key={tag.id} key={tag.id}
className={ className={
@ -190,6 +196,8 @@ export default function ItemsPage() {
{tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>} {tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
</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 }}