danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

video: card hover shows an info badge, not a misleading play button

Browse source 
Search / trending / filmography poster cards open the DETAIL page on click, so
the center ▶ read as 'play' wrongly. Swapped it for an italic 'i' info badge
('view details').
This commit is contained in:
BoulderBadgeDad 2026-06-15 11:42:32 -07:00
parent 9c29414e6d
commit c5e30530c7
3 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webui/static/video/video-person.js
View file

@ -51,7 +51,7 @@
return '<a class="vsr-card" href="' + href + '" ' +
'data-vp-open="' + c.kind + '" data-vp-source="' + source + '" data-vp-cid="' + id + '">' +
'<div class="vsr-poster">' + img + ribbon +
'<span class="vsr-play" aria-hidden="true">▶</span></div>' +
'<span class="vsr-peek" aria-hidden="true">i</span></div>' +
'<div class="vsr-info"><span class="vsr-name" title="' + esc(c.title) + '">' + esc(c.title) +
'</span><span class="vsr-sub">' + esc(sub) + '</span></div></a>';
}

2
webui/static/video/video-search.js
View file

@ -55,7 +55,7 @@
return '<a class="vsr-card" href="' + href + '" ' +
'data-vsr-open="' + it.kind + '" data-vsr-source="' + source + '" data-vsr-id="' + id + '">' +
'<div class="vsr-poster">' + img + ribbon + rating +
'<span class="vsr-play" aria-hidden="true">▶</span></div>' +
'<span class="vsr-peek" aria-hidden="true">i</span></div>' +
'<div class="vsr-info"><span class="vsr-name" title="' + esc(it.title) + '">' + esc(it.title) +
'</span><span class="vsr-sub">' + esc(sub) + '</span></div></a>';
}

10
webui/static/video/video-side.css
View file

@ -886,15 +886,17 @@ a.vd-prov:hover img, a.vd-prov:hover .vd-prov-ph { border-color: rgba(var(--vd-a
transition: opacity 0.3s ease;
}
.vsr-card:hover .vsr-poster::after { opacity: 1; }
.vsr-play {
/* hover affordance = "view details" (an info badge), NOT a play button */
.vsr-peek {
position: absolute; left: 50%; top: 50%; z-index: 3;
width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: rgba(var(--vd-accent-rgb), 0.92); color: #fff; font-size: 17px;
width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: rgba(var(--vd-accent-rgb), 0.92); color: #fff;
font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 22px;
transform: translate(-50%, -50%) scale(0.5); opacity: 0;
box-shadow: 0 6px 20px rgba(var(--vd-accent-rgb), 0.5);
transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.25s ease;
}
.vsr-card:hover .vsr-play { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.vsr-card:hover .vsr-peek { transform: translate(-50%, -50%) scale(1); opacity: 1; }
/* ribbon + rating chips */
.vsr-ribbon {