danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Make redownload modal buttons sticky at bottom

Browse source 
Step 1 and Step 2 action buttons (Cancel, Search/Download) now render
in a sticky footer outside the scrollable body — always visible
regardless of how many results are shown. Footer has backdrop blur
and top border separator matching the modal glass theme.
This commit is contained in:
Broque Thomas 2026-04-01 14:01:51 -07:00
parent 0fd6be3239
commit 76a76c206e
2 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
webui/static/script.js
View file

@ -42962,13 +42962,21 @@ function _renderRedownloadStep1(overlay, track, data) {
</div>`;
}).join('');
body.innerHTML = `
<div class="redownload-columns">${columnsHtml}</div>
body.innerHTML = `<div class="redownload-columns">${columnsHtml}</div>`;
// Add sticky footer for Step 1
const modal = overlay.querySelector('.redownload-modal');
const oldFooter = modal.querySelector('.redownload-sticky-footer');
if (oldFooter) oldFooter.remove();
const footer = document.createElement('div');
footer.className = 'redownload-sticky-footer';
footer.innerHTML = `
<div class="redownload-actions">
<button class="redownload-btn secondary" onclick="document.getElementById('redownload-overlay')?.remove()">Cancel</button>
<button class="redownload-btn primary" id="redownload-next-btn">Search Download Sources →</button>
</div>
`;
modal.appendChild(footer);
// Next button
document.getElementById('redownload-next-btn').addEventListener('click', async () => {
@ -42983,10 +42991,19 @@ function _renderRedownloadStep1(overlay, track, data) {
overlay.querySelector('.redownload-step[data-step="2"]').classList.add('active');
// Stream results from all download sources — columns appear as each source responds
// Body gets the scrollable content, footer is sticky outside the scroll
body.innerHTML = `
<div class="rdl-src-columns" id="rdl-src-columns">
<div class="redownload-loading" id="rdl-src-loading"><div class="server-search-spinner"></div>Searching download sources...</div>
</div>
`;
// Add sticky footer outside the scrollable body
const existingFooter = overlay.querySelector('.redownload-sticky-footer');
if (existingFooter) existingFooter.remove();
const modal = overlay.querySelector('.redownload-modal');
const footer = document.createElement('div');
footer.className = 'redownload-sticky-footer';
footer.innerHTML = `
<label class="redownload-delete-old">
<input type="checkbox" id="redownload-delete-old-check" checked>
Delete old file after successful download
@ -42996,6 +43013,7 @@ function _renderRedownloadStep1(overlay, track, data) {
<button class="redownload-btn primary" id="redownload-start-btn" disabled>Waiting for results...</button>
</div>
`;
modal.appendChild(footer);
_streamRedownloadSources(overlay, track, selectedMeta);
});

16
webui/static/style.css
View file

@ -52326,9 +52326,19 @@ tr.tag-diff-same {
font-size: 12px; color: rgba(255, 255, 255, 0.2);
}
/* Sticky footer — always visible at bottom of modal */
.redownload-sticky-footer {
padding: 16px 32px 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(16, 16, 24, 0.95);
backdrop-filter: blur(20px);
flex-shrink: 0;
border-radius: 0 0 24px 24px;
}
.redownload-delete-old {
display: flex; align-items: center; gap: 8px; padding: 12px 0 4px;
font-size: 11px; color: rgba(255,255,255,0.4); cursor: pointer;
display: flex; align-items: center; gap: 8px; padding: 0 0 12px;
font-size: 12px; color: rgba(255,255,255,0.4); cursor: pointer;
}
.redownload-delete-old input { accent-color: var(--accent); }
@ -52341,7 +52351,7 @@ tr.tag-diff-same {
.redownload-progress-status { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 12px; }
/* Action buttons */
.redownload-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 12px; }
.redownload-actions { display: flex; justify-content: flex-end; gap: 12px; }
.redownload-btn {
padding: 12px 28px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none;
}