simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

virtual video item cards

Browse Source
This commit is contained in:
Simon
2026-06-23 20:05:59 +00:00
parent 55828c9726
commit b9ff61244c
2 changed files with 336 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/css/style.css
View File

@@ -889,14 +889,9 @@ body.theme-light .setting-item select option {
box-shadow: 0 6px 16px var(--shadow);
position: relative;
margin-bottom: 0;
/* Off-screen cards are kept in the DOM (so infinite scroll and scroll
position are untouched) but the browser skips their style, layout, and
paint work. This is what keeps a grid of hundreds of cards smooth on
mobile. `auto` lets the browser remember each card's real rendered height
so the scroll height stays stable; the fallback is only a first-paint
estimate for cards that have never been on screen. */
content-visibility: auto;
contain-intrinsic-size: auto 300px;
/* The grid is virtualized in JS (see App.virtualGrid): only cards near the
viewport are in the DOM at all, and each is absolutely positioned at a
precomputed (top,left). */
}
.video-card:hover {
@@ -907,7 +902,8 @@ body.theme-light .setting-item select option {
.video-card img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
background: var(--bg-tertiary);
}