diff --git a/app/assets/stylesheets/wardrobe/show.css b/app/assets/stylesheets/wardrobe/show.css index dbf5d7a4..3329ea3b 100644 --- a/app/assets/stylesheets/wardrobe/show.css +++ b/app/assets/stylesheets/wardrobe/show.css @@ -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 { diff --git a/app/views/wardrobe/items/_item_card_content.html.haml b/app/views/wardrobe/items/_item_card_content.html.haml index 55d5e577..284498a3 100644 --- a/app/views/wardrobe/items/_item_card_content.html.haml +++ b/app/views/wardrobe/items/_item_card_content.html.haml @@ -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