jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(canvas): position toolbar sub-menus beside toolbar instead of on top 

Panel now opens to the right of the vertical toolbar (desktop) or left
(mobile), aligned vertically with the clicked group.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-14 16:38:05 -04:00
parent 2e43b6aadc
commit dc5dfcccc8
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
website/canvas.html
View File

@ -6923,16 +6923,35 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
group.classList.add("open");
activeToolbarGroup = group;
// Position panel above the clicked toolbar group
// Position panel beside the clicked toolbar group
const tRect = toolbarEl.getBoundingClientRect();
const gRect = group.getBoundingClientRect();
toolbarPanel.style.left = gRect.left + "px";
toolbarPanel.style.bottom = (window.innerHeight - tRect.top + 6) + "px";
const isMobile = window.innerWidth <= 768;
if (isMobile) {
// Mobile: toolbar is on right, panel opens to the left
toolbarPanel.style.left = "";
toolbarPanel.style.right = (window.innerWidth - tRect.left + 6) + "px";
} else {
// Desktop: toolbar is on left, panel opens to the right
toolbarPanel.style.left = (tRect.right + 6) + "px";
toolbarPanel.style.right = "";
}
// Show panel first so we can measure its height
toolbarPanel.style.bottom = "auto";
toolbarPanel.style.top = "0";
toolbarPanel.classList.add("panel-open");
// Align panel top with clicked group, clamped to viewport
const panelH = toolbarPanel.offsetHeight || 200;
const maxTop = window.innerHeight - panelH - 8;
toolbarPanel.style.top = Math.max(8, Math.min(gRect.top, maxTop)) + "px";
}
function closeToolbarPanel() {
toolbarPanel.classList.remove("panel-open");
toolbarPanel.style.left = "";
toolbarPanel.style.right = "";
toolbarPanel.style.top = "";
toolbarPanel.style.bottom = "";
toolbarEl.querySelectorAll(".toolbar-group").forEach(g => g.classList.remove("open"));
activeToolbarGroup = null;
}