andy/CodeNavigator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the barber-pole progress bar loop seamlessly

Browse Source 
The stripes were 45deg with a 14px period, which repeats every 19.8px
horizontally, but the background tile and animation step were 28px, so
every tile cut a stripe and the loop visibly jumped. Stripe spacing is
now 28/sqrt(2) so the horizontal period is exactly 28px, painted once
on an untiled layer 28px wider than the bar and slid by one period with
a transform. Verified by comparing rendered frames: the end of the loop
is pixel-identical to its start.

Error and warning states now use a data-tone attribute (solid red or
yellow, no stripes) instead of inline backgrounds.
This commit is contained in:
Andy Dixon
2026-08-23 19:07:23 +01:00
parent b07095d789
commit e2f9c317c6
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+3 -3
View File
@@ -382,7 +382,7 @@ function showPrivateLinkWarning(place,authRequired){
$('#progressMessage').textContent=authRequired==='install'
?`This link points to ${repoName(place.repo)}, a private repository your GitHub account can't open here. Grant access to it, then open the link again.`
:`This link points to ${repoName(place.repo)}, a private repository, and your GitHub access has expired (or you haven't signed in on this device). Sign in with GitHub to carry on to the shared spot.`;
$('#progressFill').style.background='var(--yellow)';
$('#progressFill').dataset.tone='warn';
$('#progressCount').textContent='';
}
@@ -1326,8 +1326,8 @@ async function watchJob(jobId){
}catch(error){if(!controller.signal.aborted)showError(error.message);}
finally{if(activeJobStream===controller)activeJobStream=null;controller.abort();}
}
function showProgress(title,message,completed,total){$('#progressCard').hidden=false;$('#progressAction').hidden=true;$('#progressTitle').textContent=title;$('#progressMessage').textContent=message||'';const percent=total?Math.max(3,Math.round(completed/total*100)):12;$('#progressFill').style.width=`${percent}%`;$('#progressFill').style.background='';$('#progressCount').textContent=total?`${format(completed)} / ${format(total)} · ${percent}%`:'Working…';}
function showError(message,authRequired){$('#progressCard').hidden=false;showAuthAction(authRequired);$('#progressTitle').textContent='Could not build landscape';$('#progressMessage').textContent=message;$('#progressFill').style.width='100%';$('#progressFill').style.background='var(--danger)';$('#progressCount').textContent='Check the repository or folder and try again.';}
function showProgress(title,message,completed,total){$('#progressCard').hidden=false;$('#progressAction').hidden=true;$('#progressTitle').textContent=title;$('#progressMessage').textContent=message||'';const percent=total?Math.max(3,Math.round(completed/total*100)):12;$('#progressFill').style.width=`${percent}%`;delete $('#progressFill').dataset.tone;$('#progressCount').textContent=total?`${format(completed)} / ${format(total)} · ${percent}%`:'Working…';}
function showError(message,authRequired){$('#progressCard').hidden=false;showAuthAction(authRequired);$('#progressTitle').textContent='Could not build landscape';$('#progressMessage').textContent=message;$('#progressFill').style.width='100%';$('#progressFill').dataset.tone='error';$('#progressCount').textContent='Check the repository or folder and try again.';}
// Private repositories: sign in (or grant the GitHub App access), then resume the same repository on return.
let lastGithubUrl='',githubStatus={};