Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Webstar:c987aefb72b43f242e388132d85ede6ce0ca3f79
Branches Tags
Webstar:main
Webstar:claude/2
Webstar:v0.1.0
..
compare: Webstar:9f02d350c574760803715914c3b480cb9f7e497d
Branches Tags
Webstar:main
Webstar:claude/2
Webstar:v0.1.0

No commits in common. "c987aefb72b43f242e388132d85ede6ce0ca3f79" and "9f02d350c574760803715914c3b480cb9f7e497d" have entirely different histories.
c987aefb72 ... 9f02d350c5

3 changed files with 7 additions and 20 deletions
Show Stats Expand all files Collapse all files

4
containers/libreportal/frontend/css/forms.css
View File

@ -884,7 +884,7 @@ select.form-control:focus {
animation: customSelectIn 0.12s ease-out; animation: customSelectIn 0.12s ease-out;
} }
.custom-select-popup.flip-up { .custom-select.flip-up .custom-select-popup {
transform-origin: bottom center; transform-origin: bottom center;
} }
@ -893,7 +893,7 @@ select.form-control:focus {
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
.custom-select-popup.flip-up { .custom-select.flip-up .custom-select-popup {
animation-name: customSelectInUp; animation-name: customSelectInUp;
} }

2
containers/libreportal/frontend/css/topbar.css
View File

@ -252,6 +252,6 @@
line-height: 1.2; line-height: 1.2;
} }
.custom-select-popup-topbar { .topbar-controls .custom-select-popup {
min-width: 140px; min-width: 140px;
} }

21
containers/libreportal/frontend/js/system/custom-select.js
View File

@ -56,19 +56,10 @@
this.popup.className = 'custom-select-popup'; this.popup.className = 'custom-select-popup';
this.popup.setAttribute('role', 'listbox'); this.popup.setAttribute('role', 'listbox');
this.popup.hidden = true; this.popup.hidden = true;
// The popup is portaled to <body> on open (below), escaping .topbar-controls,
// so carry the topbar's wider-popup styling via a class instead.
if (this.select.closest('.topbar-controls')) {
this.popup.classList.add('custom-select-popup-topbar');
}
// Move the native select inside the wrapper so it stays in the form. The // Move the native select inside the wrapper so it stays in the form.
// popup is deliberately NOT added here — it's portaled to <body> on
// open() so no ancestor's transform (e.g. a card's :hover translateY,
// which becomes the containing block for position:fixed) can throw off
// its placement or clip it. See open()/close().
this.select.parentNode.insertBefore(this.wrapper, this.select); this.select.parentNode.insertBefore(this.wrapper, this.select);
this.wrapper.append(this.select, this.button); this.wrapper.append(this.select, this.button, this.popup);
this.select.classList.add('custom-select-native'); this.select.classList.add('custom-select-native');
// Forward width-related layout from the native select to the wrapper. // Forward width-related layout from the native select to the wrapper.
if (this.select.style.maxWidth) { if (this.select.style.maxWidth) {
@ -114,9 +105,6 @@
document.querySelectorAll('.custom-select.is-open').forEach(w => { document.querySelectorAll('.custom-select.is-open').forEach(w => {
if (w !== this.wrapper) w.dispatchEvent(new CustomEvent('custom-select:close')); if (w !== this.wrapper) w.dispatchEvent(new CustomEvent('custom-select:close'));
}); });
// Portal into <body> so position:fixed is relative to the viewport,
// immune to any transformed/overflow ancestor.
document.body.appendChild(this.popup);
this.popup.hidden = false; this.popup.hidden = false;
this.button.setAttribute('aria-expanded', 'true'); this.button.setAttribute('aria-expanded', 'true');
this.wrapper.classList.add('is-open'); this.wrapper.classList.add('is-open');
@ -136,7 +124,6 @@
close() { close() {
if (this.popup.hidden) return; if (this.popup.hidden) return;
this.popup.hidden = true; this.popup.hidden = true;
this.popup.remove(); // detach from <body> so popups don't accumulate
this.button.setAttribute('aria-expanded', 'false'); this.button.setAttribute('aria-expanded', 'false');
this.wrapper.classList.remove('is-open'); this.wrapper.classList.remove('is-open');
this.clearFocused(); this.clearFocused();
@ -154,7 +141,7 @@
const spaceBelow = window.innerHeight - rect.bottom; const spaceBelow = window.innerHeight - rect.bottom;
const popupMax = 280; const popupMax = 280;
const flipUp = spaceBelow < 200 && rect.top > popupMax; const flipUp = spaceBelow < 200 && rect.top > popupMax;
this.popup.classList.toggle('flip-up', flipUp); this.wrapper.classList.toggle('flip-up', flipUp);
this.popup.style.left = `${rect.left}px`; this.popup.style.left = `${rect.left}px`;
this.popup.style.width = `${rect.width}px`; this.popup.style.width = `${rect.width}px`;
@ -235,7 +222,7 @@
}; };
this._outsideClick = (e) => { this._outsideClick = (e) => {
if (!this.wrapper.contains(e.target) && !this.popup.contains(e.target)) this.close(); if (!this.wrapper.contains(e.target)) this.close();
}; };
this._reposition = () => this.positionPopup(); this._reposition = () => this.positionPopup();