[WV2] Add item info links

Add an info link (ℹ️) to each item card that opens the item's detail
page in a new tab. The link is:
- Subtle and hidden by default (opacity: 0)
- Visible on hover or focus-within for mouse/keyboard users
- Always visible (60% opacity) on touch devices
- Accessible with proper aria-label
- Opens in new tab with target="_blank" and rel="noopener"

This is the first commit of Phase 2 (Detail-Oriented Experience),
adding contextual navigation to item details.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Emi Matchu 2026-02-15 20:32:11 -08:00
parent d02afd87e8
commit 602e928180
2 changed files with 38 additions and 2 deletions

View file

@ -167,7 +167,12 @@ item-card {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
&:hover :is(.item-add-button, .item-remove-button, .item-hide-button, .item-show-button) {
&:hover :is(.item-add-button, .item-remove-button, .item-hide-button, .item-show-button),
&:hover .item-info-link {
opacity: 1;
}
&:focus-within .item-info-link {
opacity: 1;
}
@ -202,6 +207,34 @@ item-card {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.25rem;
}
.item-info-link {
flex-shrink: 0;
font-size: 0.9rem;
text-decoration: none;
opacity: 0;
transition: opacity 0.2s;
line-height: 1;
&:hover {
opacity: 1 !important;
}
&:focus {
opacity: 1;
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* Always visible on touch devices */
@media (hover: none) {
opacity: 0.6;
}
}
.item-badges {

View file

@ -1,7 +1,10 @@
.item-thumbnail
= image_tag item.thumbnail_url, alt: "", loading: "lazy"
.item-info
.item-name= item.name
.item-name
= item.name
= link_to item_path(item), class: "item-info-link", target: "_blank", rel: "noopener" do
%span{aria: {label: "Item info"}}
.item-badges
= render "items/badges/kind", item: item
= render "items/badges/first_seen", item: item