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

cleanup: streamerProfileHeader uses .is-hidden + .streamer-profile-skeleton owns display:flex

Browse Source 
The profile header on the VOD tab cycled between three display states via inline .style.display assignments — 'none' when no streamer is selected, 'flex' while loading (skeleton), 'block' once profile data is back. Three separate inline writes plus a starting style="display:none" in HTML.

Two changes:

1. Baked display:flex into the .streamer-profile-skeleton CSS rule itself (was previously implicit via the JS flip). Now the skeleton class fully owns its layout — adding it switches the element to flex, removing it falls back to .streamer-profile-header's base display:block.

2. Replaced the inline 'none' assignment with the shared .is-hidden class (from 4.6.134). hideStreamerProfileHeader adds it; renderStreamerProfileSkeleton + renderStreamerProfileCard both remove it as part of their existing classList work. HTML drops the inline display:none too.

Three .style.display assignments + one inline display:none gone, profile header's visual state is now entirely class-driven.

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

2
src/index.html
View File

@ -260,7 +260,7 @@
<div class="content"> <div class="content">
<!-- VODs Tab --> <!-- VODs Tab -->
<div class="tab-content active" id="vodsTab"> <div class="tab-content active" id="vodsTab">
<div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div> <div id="streamerProfileHeader" class="streamer-profile-header is-hidden"></div>
<div class="vod-filter-row"> <div class="vod-filter-row">
<input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()"> <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
<button type="button" id="vodFilterClearBtn" class="btn-close is-hidden" onclick="clearVodFilter()" title="Clear filter">x</button> <button type="button" id="vodFilterClearBtn" class="btn-close is-hidden" onclick="clearVodFilter()" title="Clear filter">x</button>

8
src/renderer-profile.ts
View File

@ -30,16 +30,15 @@ function formatLastStreamAgo(iso: string | null): string {
function hideStreamerProfileHeader(): void { function hideStreamerProfileHeader(): void {
const el = document.getElementById('streamerProfileHeader'); const el = document.getElementById('streamerProfileHeader');
if (!el) return; if (!el) return;
el.style.display = 'none'; el.classList.add('is-hidden');
applyHtml(el, ''); applyHtml(el, '');
} }
function renderStreamerProfileSkeleton(login: string): void { function renderStreamerProfileSkeleton(login: string): void {
const el = document.getElementById('streamerProfileHeader'); const el = document.getElementById('streamerProfileHeader');
if (!el) return; if (!el) return;
el.classList.remove('is-live'); el.classList.remove('is-live', 'is-hidden');
el.classList.add('streamer-profile-skeleton'); el.classList.add('streamer-profile-skeleton');
el.style.display = 'flex';
applyHtml(el, ` applyHtml(el, `
<div class="streamer-profile-skel-block avatar"></div> <div class="streamer-profile-skel-block avatar"></div>
<div class="streamer-profile-body"> <div class="streamer-profile-body">
@ -60,9 +59,8 @@ function renderStreamerProfileSkeleton(login: string): void {
function renderStreamerProfileCard(p: StreamerProfile): void { function renderStreamerProfileCard(p: StreamerProfile): void {
const el = document.getElementById('streamerProfileHeader'); const el = document.getElementById('streamerProfileHeader');
if (!el) return; if (!el) return;
el.classList.remove('streamer-profile-skeleton'); el.classList.remove('streamer-profile-skeleton', 'is-hidden');
if (p.isLive) el.classList.add('is-live'); else el.classList.remove('is-live'); if (p.isLive) el.classList.add('is-live'); else el.classList.remove('is-live');
el.style.display = 'block';
const safeLogin = p.login.replace(/'/g, "\\'"); const safeLogin = p.login.replace(/'/g, "\\'");
const safeUrl = p.twitchUrl.replace(/'/g, "\\'"); const safeUrl = p.twitchUrl.replace(/'/g, "\\'");

9
src/styles.css
View File

@ -4257,7 +4257,14 @@ input[type="number"]::-webkit-outer-spin-button {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
} }
/* Skeleton loading state */ /* Skeleton loading state — switches the profile-header from its
regular block layout to a flex row so the avatar + body sit
side-by-side. The element itself was previously flipped via inline
.style.display='flex' in renderStreamerProfileSkeleton(). */
.streamer-profile-skeleton {
display: flex;
}
.streamer-profile-skeleton .streamer-profile-skel-block { .streamer-profile-skeleton .streamer-profile-skel-block {
background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%); background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);
background-size: 200% 100%; background-size: 200% 100%;