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

fix(canvas): mobile toolbar uses collapse instead of FAB overlay 

Replace the floating action button toggle with the same collapse/expand
behavior as desktop. Toolbar sits as a compact icon column on the left,
panels open to the right, and corner tools move to bottom-right.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-16 20:30:20 -07:00
parent be81618b70
commit 05b8e2676a
1 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
website/canvas.html
View File

@ -1805,25 +1805,9 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
/* FAB toggle button */ /* Hide FAB — toolbar now uses collapse like desktop */
#mobile-menu { #mobile-menu {
display: flex; display: none;
position: fixed;
bottom: 24px;
right: 16px;
width: 56px;
height: 56px;
border: none;
border-radius: 50%;
background: #14b8a6;
color: white;
font-size: 28px;
align-items: center;
justify-content: center;
z-index: 1002;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
cursor: pointer;
touch-action: manipulation;
} }
/* Hide old mobile zoom — replaced by #canvas-corner-tools */ /* Hide old mobile zoom — replaced by #canvas-corner-tools */
@ -1831,37 +1815,39 @@
display: none; display: none;
} }
/* Hide desktop toolbar, show as column overlay when toggled */ /* Mobile toolbar: compact column on left, icons only, same as desktop */
#toolbar { #toolbar {
display: none;
position: fixed; position: fixed;
top: 72px; top: auto;
left: 8px; bottom: 60px; /* above bottom-toolbar row */
right: 8px; left: 6px;
flex-wrap: wrap; right: auto;
max-height: calc(100vh - 160px); flex-direction: column;
overflow-y: auto; flex-wrap: nowrap;
gap: 6px; align-items: center;
padding: 12px; gap: 2px;
border-radius: 16px; padding: 4px;
border-radius: 12px;
z-index: 1001; z-index: 1001;
max-height: calc(100vh - 140px);
overflow-y: auto;
overflow-x: visible;
scrollbar-width: none;
} }
#toolbar.mobile-open { #toolbar::-webkit-scrollbar { display: none; }
display: flex;
}
/* On mobile, icon grid — tap to open panel */ /* On mobile, icon-only buttons */
#toolbar .toolbar-group { #toolbar .toolbar-group {
width: auto; width: auto;
} }
#toolbar .toolbar-group-toggle { #toolbar .toolbar-group-toggle {
width: 48px; width: 40px;
height: 48px; height: 40px;
max-width: 48px; max-width: 40px;
padding: 0; padding: 0;
font-size: 20px; font-size: 18px;
overflow: hidden; overflow: hidden;
justify-content: center; justify-content: center;
} }
@ -1874,7 +1860,7 @@
/* Don't expand on hover on mobile */ /* Don't expand on hover on mobile */
#toolbar .toolbar-group:hover > .toolbar-group-toggle, #toolbar .toolbar-group:hover > .toolbar-group-toggle,
#toolbar .toolbar-group.open > .toolbar-group-toggle { #toolbar .toolbar-group.open > .toolbar-group-toggle {
max-width: 48px; max-width: 40px;
padding: 0; padding: 0;
justify-content: center; justify-content: center;
} }
@ -1883,12 +1869,27 @@
display: none !important; display: none !important;
} }
#toolbar > button { /* Show collapse button on mobile — same behavior as desktop */
width: 48px; #toolbar #toolbar-collapse {
height: 48px; display: flex;
width: 40px;
height: 32px;
padding: 0; padding: 0;
font-size: 20px; }
min-height: 48px;
/* Collapsed state on mobile */
#toolbar.collapsed {
padding: 4px;
bottom: 60px;
overflow: visible;
}
#toolbar > button:not(#toolbar-collapse) {
width: 40px;
height: 40px;
padding: 0;
font-size: 18px;
min-height: 40px;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
} }
@ -1897,11 +1898,6 @@
display: none; display: none;
} }
/* Hide collapse on mobile */
#toolbar #toolbar-collapse {
display: none;
}
#community-info { #community-info {
display: none; display: none;
} }
@ -1910,27 +1906,30 @@
max-width: calc(100vw - 32px); max-width: calc(100vw - 32px);
} }
/* Mobile: panel slides up from bottom as sheet */ /* Mobile: panel opens to the right of the toolbar */
#toolbar-panel { #toolbar-panel {
top: auto; top: auto;
bottom: 90px; bottom: 60px;
left: 8px; left: 56px;
right: 8px; right: auto;
border-radius: 16px; min-width: 180px;
border-radius: 12px;
max-height: 50vh; max-height: 50vh;
} }
#toolbar-panel-body button { #toolbar-panel-body button {
padding: 14px 16px; padding: 12px 14px;
font-size: 16px; font-size: 15px;
min-height: 48px; min-height: 44px;
} }
/* Bottom toolbar: compact on mobile */ /* Bottom toolbar: raised above corner tools row */
#bottom-toolbar { #bottom-toolbar {
bottom: 8px; bottom: 8px;
padding: 4px 6px; padding: 4px 6px;
gap: 1px; gap: 1px;
left: 56px; /* offset right of side toolbar */
transform: translateX(0);
} }
#bottom-toolbar .tool-btn { #bottom-toolbar .tool-btn {
@ -1942,17 +1941,18 @@
margin: 0 2px; margin: 0 2px;
} }
/* Corner tools: horizontal on mobile, 44px touch targets */ /* Corner tools: horizontal on mobile, tucked bottom-right */
#canvas-corner-tools { #canvas-corner-tools {
bottom: 8px; bottom: 8px;
left: 8px; left: auto;
right: 8px;
flex-direction: row; flex-direction: row;
padding: 4px 6px; padding: 4px 6px;
} }
#canvas-corner-tools .corner-btn { #canvas-corner-tools .corner-btn {
width: 44px; width: 40px;
height: 44px; height: 40px;
} }
#canvas-corner-tools .corner-sep { #canvas-corner-tools .corner-sep {
@ -6065,27 +6065,37 @@
updateCanvasTransform(); updateCanvasTransform();
}); });
// Mobile toolbar toggle // Mobile toolbar toggle — collapse behavior same as desktop
const mobileMenuBtn = document.getElementById("mobile-menu"); const mobileMenuBtn = document.getElementById("mobile-menu");
const toolbarEl = document.getElementById("toolbar"); const toolbarEl = document.getElementById("toolbar");
// FAB is hidden on mobile; toolbar uses collapse button like desktop.
// Keep FAB handler as fallback.
mobileMenuBtn.addEventListener("click", () => { mobileMenuBtn.addEventListener("click", () => {
const isOpen = toolbarEl.classList.toggle("mobile-open"); const isCollapsed = toolbarEl.classList.contains("collapsed");
mobileMenuBtn.textContent = isOpen ? "✕" : "✚"; if (isCollapsed) {
if (!isOpen && typeof closeToolbarPanel === "function") closeToolbarPanel(); toolbarEl.classList.remove("collapsed");
collapseBtn.innerHTML = minimizeSVG;
collapseBtn.title = "Minimize toolbar";
} else {
toolbarEl.classList.add("collapsed");
collapseBtn.innerHTML = wrenchSVG;
collapseBtn.title = "Expand toolbar";
}
}); });
// Auto-close toolbar after tapping a shape-creation button on mobile // Auto-collapse toolbar after tapping a shape-creation button on mobile
toolbarEl.addEventListener("click", (e) => { toolbarEl.addEventListener("click", (e) => {
if (window.innerWidth > 768) return; if (window.innerWidth > 768) return;
const btn = e.target.closest("button"); const btn = e.target.closest("button");
if (!btn) return; if (!btn) return;
// Keep open for connect, memory, group toggles, collapse, whiteboard tools
const keepOpen = ["toggle-theme", "toolbar-collapse"]; const keepOpen = ["toggle-theme", "toolbar-collapse"];
if (btn.classList.contains("toolbar-group-toggle")) return; if (btn.classList.contains("toolbar-group-toggle")) return;
if (!keepOpen.includes(btn.id)) { if (!keepOpen.includes(btn.id)) {
toolbarEl.classList.remove("mobile-open"); toolbarEl.classList.add("collapsed");
mobileMenuBtn.textContent = "✚"; collapseBtn.innerHTML = wrenchSVG;
collapseBtn.title = "Expand toolbar";
if (typeof closeToolbarPanel === "function") closeToolbarPanel();
} }
}); });