diff --git a/internal/server/web/templates/files.html b/internal/server/web/templates/files.html index 578efd3..e4460ec 100644 --- a/internal/server/web/templates/files.html +++ b/internal/server/web/templates/files.html @@ -23,11 +23,13 @@ .fm-bar .fm-pathbox .btn.sq { position:absolute; right:4px; top:4px; width:26px; height:26px; border:1px solid transparent; } .fm-bar .fm-pathbox .btn.sq:hover { border-color:var(--border); background:#151a21; } .spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); - border-radius:50%; animation:spin .7s linear infinite; display:none; } + border-radius:50%; animation:spin .7s linear infinite; display:inline-block; flex:none; visibility:hidden; } @keyframes spin { to { transform:rotate(360deg); } } /* Busy indicator; while files upload it also shows how far they got, and a - click on it lists them. */ - .busy { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0 4px; + click on it lists them. It holds its place, hidden or not, so the path + field beside it never jumps. */ + #uppct:not(:empty) { min-width:9.5ch; } + .busy { flex:none; min-width:24px; justify-content:center; display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0 4px; height:34px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; cursor:default; } .busy:hover { background:none; } .busy.up { cursor:pointer; color:var(--text); } @@ -339,7 +341,8 @@ (function () { const agentID = {{.Agent.ID}}; let busyN = 0; - function setBusy(on) { busyN += on ? 1 : -1; if (busyN < 0) busyN = 0; document.getElementById('spin').style.display = busyN > 0 ? 'inline-block' : 'none'; } + // The spinner keeps its place when hidden, so the path field never jumps. + function setBusy(on) { busyN += on ? 1 : -1; if (busyN < 0) busyN = 0; document.getElementById('spin').style.visibility = busyN > 0 ? 'visible' : 'hidden'; } const api = (op, body) => { setBusy(true); return fetch('/api/panel/agents/' + encodeURIComponent(agentID) + '/fs/' + op, {