meleki/gott
1
0 Fork 0
Code Activity

style: Card-Dropdown öffnet nach links unten statt rechts

Browse Source 
- Position: unterhalb des Trigger-Buttons
- Rechte Kante des Dropdowns an rechter Kante des Buttons ausgerichtet
- Fallback: nach oben wenn unten kein Platz
This commit is contained in:
Meleki committed 2026-03-03 09:29:58 +01:00
1 parent e2927893f7
commit a32de29d25
1 file changed
+28 -40
Download Patch File Download Diff File Expand all files Collapse all files
wwwroot/js/pages/dashboard.js
+28 -40
View File
@@ -78,27 +78,21 @@ registerPage('dashboard', {
menuTrigger.addEventListener('click', (e) => {
e.stopPropagation();
closeAllCardMenus();
// Position fixed dropdown to the right of trigger
// Position fixed dropdown below trigger, aligned to the left
const rect = menuTrigger.getBoundingClientRect();
menuDropdown.style.top = `${rect.top}px`;
menuDropdown.style.left = `${rect.right + 4}px`;
menuDropdown.hidden = !menuDropdown.hidden;
// Adjust if off-screen
if (!menuDropdown.hidden) {
const dropRect = menuDropdown.getBoundingClientRect();
// If off-screen right, flip to left side
if (dropRect.right > window.innerWidth) {
menuDropdown.style.left = `${rect.left - dropRect.width - 4}px`;
}
// If off-screen bottom, align to bottom of viewport
if (dropRect.bottom > window.innerHeight) {
menuDropdown.style.top = `${window.innerHeight - dropRect.height - 8}px`;
}
// Safety: if off-screen left after flip
const finalRect = menuDropdown.getBoundingClientRect();
if (finalRect.left < 0) {
menuDropdown.style.left = '8px';
}
menuDropdown.hidden = false;
const dropRect = menuDropdown.getBoundingClientRect();
// Position: below trigger, right edge aligned with trigger's right edge
menuDropdown.style.top = `${rect.bottom + 4}px`;
menuDropdown.style.left = `${rect.right - dropRect.width}px`;
// Adjust if off-screen bottom
if (rect.bottom + 4 + dropRect.height > window.innerHeight) {
menuDropdown.style.top = `${rect.top - dropRect.height - 4}px`;
}
// Safety: if off-screen left
const finalRect = menuDropdown.getBoundingClientRect();
if (finalRect.left < 0) {
menuDropdown.style.left = '8px';
}
});
chatBtn.addEventListener('click', (e) => {
@@ -230,27 +224,21 @@ registerPage('dashboard', {
menuTrigger.addEventListener('click', (e) => {
e.stopPropagation();
closeAllCardMenus();
// Position fixed dropdown to the right of trigger
// Position fixed dropdown below trigger, aligned to the left
const rect = menuTrigger.getBoundingClientRect();
menuDropdown.style.top = `${rect.top}px`;
menuDropdown.style.left = `${rect.right + 4}px`;
menuDropdown.hidden = !menuDropdown.hidden;
// Adjust if off-screen
if (!menuDropdown.hidden) {
const dropRect = menuDropdown.getBoundingClientRect();
// If off-screen right, flip to left side
if (dropRect.right > window.innerWidth) {
menuDropdown.style.left = `${rect.left - dropRect.width - 4}px`;
}
// If off-screen bottom, align to bottom of viewport
if (dropRect.bottom > window.innerHeight) {
menuDropdown.style.top = `${window.innerHeight - dropRect.height - 8}px`;
}
// Safety: if off-screen left after flip
const finalRect = menuDropdown.getBoundingClientRect();
if (finalRect.left < 0) {
menuDropdown.style.left = '8px';
}
menuDropdown.hidden = false;
const dropRect = menuDropdown.getBoundingClientRect();
// Position: below trigger, right edge aligned with trigger's right edge
menuDropdown.style.top = `${rect.bottom + 4}px`;
menuDropdown.style.left = `${rect.right - dropRect.width}px`;
// Adjust if off-screen bottom
if (rect.bottom + 4 + dropRect.height > window.innerHeight) {
menuDropdown.style.top = `${rect.top - dropRect.height - 4}px`;
}
// Safety: if off-screen left
const finalRect = menuDropdown.getBoundingClientRect();
if (finalRect.left < 0) {
menuDropdown.style.left = '8px';
}
});
menuDropdown.querySelector('[data-action="files"]').addEventListener('click', (e) => {