Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: VOD-card skeleton line variants — 3 inline styles gone

Browse Source 
The 6-placeholder VOD-card skeleton (shown while VODs load) had three lines per card with inline width/height/margin-top declarations:
- title line: 85% wide
- first meta line: 55% wide, 10px tall, 8px gap above
- second meta line: 40% wide, 10px tall, 6px gap above

Extracted into .vod-skel-line.title / .meta-1 / .meta-2 variants — the layout-defining values live next to the base .vod-skel-line rule. Matches the same approach as the .streamer-profile-skel-block variants from 4.6.123.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 09:22:11 +02:00
parent 7cb2358a54
commit 9a36814b0b
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer-streamers.ts
View File

@ -778,9 +778,9 @@ async function selectStreamer(name: string, forceRefresh = false): Promise<void>
<div class="vod-card vod-card-skeleton">
<div class="vod-skel-thumb"></div>
<div class="vod-info">
<div class="vod-skel-line" style="width: 85%;"></div>
<div class="vod-skel-line" style="width: 55%; margin-top: 8px; height: 10px;"></div>
<div class="vod-skel-line" style="width: 40%; margin-top: 6px; height: 10px;"></div>
<div class="vod-skel-line title"></div>
<div class="vod-skel-line meta-1"></div>
<div class="vod-skel-line meta-2"></div>
</div>
</div>
`).join('');

7
src/styles.css
View File

@ -562,6 +562,13 @@ body {
animation: skel-shimmer 1.5s linear infinite;
}
/* Three skeleton-line variants for the VOD card placeholder — match
the visual rhythm of a real card (title line, then two shorter
meta lines). Replaces inline width/height/margin-top declarations. */
.vod-card-skeleton .vod-skel-line.title { width: 85%; }
.vod-card-skeleton .vod-skel-line.meta-1 { width: 55%; height: 10px; margin-top: 8px; }
.vod-card-skeleton .vod-skel-line.meta-2 { width: 40%; height: 10px; margin-top: 6px; }
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }