Cieric/Naut-Plugin-WebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

webui: float the tags dropdown over content (fixed-position)

Browse source 
The checkbox menu now uses position:fixed anchored under the button,
overlaying the rest of the dialog instead of expanding it. Closes on
outside click; repositions on scroll/resize.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ookami125 2026-06-22 00:26:58 -04:00
parent c15cecaa5f
commit c3985fe742
2 changed files with 31 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

30
public/js/app.js
View file

@ -544,8 +544,9 @@ function openAddModal() {
closeModal();
}, 'Failed to add torrent'),
}]);
// tags checkbox dropdown: toggle, live label, inline new-tag creation
// tags checkbox dropdown: a fixed-position menu that floats over the dialog
(() => {
const btn = document.getElementById('addTagsBtn');
const menu = document.getElementById('addTagsMenu');
const list = document.getElementById('addTagsList');
const label = document.getElementById('addTagsLabel');
@ -571,8 +572,33 @@ function openAddModal() {
cb.checked = true;
input.value = '';
refresh();
place();
};
document.getElementById('addTagsBtn').addEventListener('click', () => { menu.hidden = !menu.hidden; });
// Anchor the floating menu under the button and keep it on-screen.
const place = () => {
const r = btn.getBoundingClientRect();
menu.style.left = r.left + 'px';
menu.style.width = r.width + 'px';
menu.style.top = (r.bottom + 4) + 'px';
menu.style.maxHeight = Math.max(120, window.innerHeight - r.bottom - 16) + 'px';
};
let onOutside; let onReflow;
const close = () => {
menu.hidden = true;
document.removeEventListener('mousedown', onOutside, true);
document.removeEventListener('scroll', onReflow, true);
window.removeEventListener('resize', onReflow);
};
const open = () => {
menu.hidden = false;
place();
onOutside = (e) => { if (!menu.contains(e.target) && !btn.contains(e.target)) close(); };
onReflow = () => place();
document.addEventListener('mousedown', onOutside, true);
document.addEventListener('scroll', onReflow, true); // reposition on modal scroll
window.addEventListener('resize', onReflow);
};
btn.addEventListener('click', () => (menu.hidden ? open() : close()));
list.addEventListener('change', refresh);
document.getElementById('addTagAdd').addEventListener('click', addTag);
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); addTag(); } });