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

cleanup: update-banner progress bar — extract inline styles

Browse Source 
The update banner that shows during an auto-update download was
hosting three inline-styled divs in a row for its progress
indicator:

  <div style="display: none; flex: 1; margin: 0 15px;">
    <div style="background: rgba(0,0,0,0.3); border-radius: 4px;
                height: 8px; overflow: hidden;">
      <div id="updateProgressBar"
           style="background: white; height: 100%; width: 0%;
                  transition: width 0.3s;">

Renderer-updates.ts kept reaching in to mutate
updateProgressBar.style.width as the download advanced — works,
but the bar's static look-and-feel (rounded, dark track, 8px tall,
white fill, 0.3s transition) was buried in HTML attributes
instead of CSS.

Extracted to:
- .update-banner-progress-wrap (the flex:1 container with side
  margin)
- .update-banner-progress-track (the rounded dark track)
- .update-banner-progress-bar (the white fill, 0% default, transition)

The JS continues to drive width via style.width, which now layers
on top of the class's transition for the smooth animation. Zero
visual change.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 03:07:59 +02:00
parent 144088c01f
commit ce469b856c
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@ -10,9 +10,9 @@
<body class="theme-twitch"> <body class="theme-twitch">
<div class="update-banner" id="updateBanner"> <div class="update-banner" id="updateBanner">
<span id="updateText">Neue Version verfügbar!</span> <span id="updateText">Neue Version verfügbar!</span>
<div id="updateProgress" style="display: none; flex: 1; margin: 0 15px;"> <div id="updateProgress" class="update-banner-progress-wrap" style="display: none;">
<div style="background: rgba(0,0,0,0.3); border-radius: 4px; height: 8px; overflow: hidden;"> <div class="update-banner-progress-track">
<div id="updateProgressBar" style="background: white; height: 100%; width: 0%; transition: width 0.3s;"></div> <div id="updateProgressBar" class="update-banner-progress-bar"></div>
</div> </div>
</div> </div>
<button id="updateButton" onclick="downloadUpdate()">Jetzt herunterladen</button> <button id="updateButton" onclick="downloadUpdate()">Jetzt herunterladen</button>

21
src/styles.css
View File

@ -2037,6 +2037,27 @@ select option {
cursor: not-allowed; cursor: not-allowed;
} }
/* Update-banner download progress — sits between the message and
the button, fills as the update download runs. */
.update-banner-progress-wrap {
flex: 1;
margin: 0 15px;
}
.update-banner-progress-track {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
height: 8px;
overflow: hidden;
}
.update-banner-progress-bar {
background: #fff;
height: 100%;
width: 0%;
transition: width 0.3s ease-out;
}
.update-modal { .update-modal {
max-width: 680px; max-width: 680px;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);