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

Merge branch 'dev'
CI/CD / deploy (push) Successful in 2m15s Details

This commit is contained in:
Jeff Emmett 2026-04-10 23:21:44 -04:00
parent ad218e72ad c2c0dadebe
commit d78b7fdb14
1 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
website/canvas.html
View File

@ -43,10 +43,8 @@
#toolbar { #toolbar {
position: fixed; position: fixed;
top: auto;
bottom: 16px; bottom: 16px;
left: auto; left: calc(50% + 280px);
right: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -58,6 +56,7 @@
z-index: 1000; z-index: 1000;
max-height: calc(100vh - 130px); max-height: calc(100vh - 130px);
overflow: visible; overflow: visible;
/* left is refined by JS to sit right of #bottom-toolbar */
} }
/* Dropdown group container */ /* Dropdown group container */
@ -214,13 +213,10 @@
padding: 16px; text-align: center; color: rgba(255,255,255,0.4); font-size: 13px; padding: 16px; text-align: center; color: rgba(255,255,255,0.4); font-size: 13px;
} }
/* Popout panel — renders group tools to the left of toolbar */ /* Popout panel — renders group tools above the toolbar */
#toolbar-panel { #toolbar-panel {
position: fixed; position: fixed;
top: auto;
bottom: 60px; bottom: 60px;
left: auto !important;
right: 56px;
min-width: 180px; min-width: 180px;
max-height: calc(100vh - 130px); max-height: calc(100vh - 130px);
background: var(--rs-toolbar-panel-bg); background: var(--rs-toolbar-panel-bg);
@ -229,6 +225,7 @@
z-index: 1001; z-index: 1001;
display: none; display: none;
flex-direction: column; flex-direction: column;
/* left is set by JS to align with #toolbar */
} }
#toolbar-panel.panel-open { #toolbar-panel.panel-open {
@ -1669,9 +1666,10 @@
display: none; display: none;
} }
/* Mobile toolbar: tighter spacing, scrollable */ /* Mobile toolbar: tighter spacing, scrollable, pinned to right edge */
#toolbar { #toolbar {
bottom: 8px; bottom: 8px;
left: auto !important;
right: 6px; right: 6px;
align-items: center; align-items: center;
gap: 2px; gap: 2px;
@ -6881,8 +6879,11 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
group.classList.add("open"); group.classList.add("open");
activeToolbarGroup = group; activeToolbarGroup = group;
// Position panel to the left of toolbar (no overlap) // Position panel above the clicked toolbar group
// CSS handles positioning via right: 56px; left: auto !important const tRect = toolbarEl.getBoundingClientRect();
const gRect = group.getBoundingClientRect();
toolbarPanel.style.left = gRect.left + "px";
toolbarPanel.style.bottom = (window.innerHeight - tRect.top + 6) + "px";
toolbarPanel.classList.add("panel-open"); toolbarPanel.classList.add("panel-open");
} }
@ -6927,6 +6928,18 @@ Use real coordinates, YYYY-MM-DD dates, ISO currency codes. Ask clarifying quest
collapseBtn.innerHTML = wrenchSVG; collapseBtn.innerHTML = wrenchSVG;
collapseBtn.title = "Expand toolbar"; collapseBtn.title = "Expand toolbar";
// Position #toolbar to the right of #bottom-toolbar
const bottomBarEl = document.getElementById("bottom-toolbar");
function positionToolbar() {
if (!bottomBarEl || !toolbarEl) return;
const btRect = bottomBarEl.getBoundingClientRect();
toolbarEl.style.left = (btRect.right + 6) + "px";
}
positionToolbar();
window.addEventListener("resize", positionToolbar);
// Re-position after fonts/layout settle
requestAnimationFrame(positionToolbar);
// Mobile zoom controls (separate from toolbar) // Mobile zoom controls (separate from toolbar)
document.getElementById("mz-in").addEventListener("click", () => { document.getElementById("mz-in").addEventListener("click", () => {
scale = Math.min(scale * 1.1, maxScale); scale = Math.min(scale * 1.1, maxScale);