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

style: enhance tag visibility on TripChecklist with hover effects

Browse source
This commit is contained in:
Felix Zett 2025-08-31 22:59:23 +02:00
parent 067d8f2a6a
commit 2acd1454e8
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -201,7 +201,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
<li <li
key={item.id} key={item.id}
className={ className={
"flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded " + "flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded group " +
(item.checked ? "bg-green-100" : "hover:bg-gray-100") (item.checked ? "bg-green-100" : "hover:bg-gray-100")
} }
onClick={async () => { onClick={async () => {
@ -221,14 +221,14 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
{item.name_calculated} {item.name_calculated}
</span> </span>
{item.item && item.item.tags && item.item.tags.length > 0 && ( {item.item && item.item.tags && item.item.tags.length > 0 && (
<span className="ml-2 flex gap-1"> <span className="ml-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
{[...item.item.tags] {[...item.item.tags]
.slice() .slice()
.sort((a, b) => a.name.localeCompare(b.name)) .sort((a, b) => a.name.localeCompare(b.name))
.map((tag: any) => ( .map((tag: any) => (
<span <span
key={tag.id} key={tag.id}
className="text-xs text-gray-400 bg-gray-100 rounded px-1 py-0.5" className="text-xs text-gray-400 rounded px-1 py-0.5"
> >
#{tag.name} #{tag.name}
</span> </span>
@ -250,7 +250,7 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
<li <li
key={item.id} key={item.id}
className={ className={
"flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded " + "flex items-center gap-2 cursor-pointer select-none px-2 py-1 rounded group " +
(item.checked ? "bg-green-100" : "hover:bg-gray-100") (item.checked ? "bg-green-100" : "hover:bg-gray-100")
} }
onClick={async () => { onClick={async () => {
@ -270,14 +270,14 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
{item.name_calculated} {item.name_calculated}
</span> </span>
{item.item && item.item.tags && item.item.tags.length > 0 && ( {item.item && item.item.tags && item.item.tags.length > 0 && (
<span className="ml-2 flex gap-1"> <span className="ml-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
{[...item.item.tags] {[...item.item.tags]
.slice() .slice()
.sort((a, b) => a.name.localeCompare(b.name)) .sort((a, b) => a.name.localeCompare(b.name))
.map((tag: any) => ( .map((tag: any) => (
<span <span
key={tag.id} key={tag.id}
className="text-xs text-gray-400 bg-gray-100 rounded px-1 py-0.5" className="text-xs text-gray-400 rounded px-1 py-0.5"
> >
#{tag.name} #{tag.name}
</span> </span>