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

fix: move toolbar collapse toggle to bottom as subtle pill 

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-27 14:36:27 -08:00
parent f8bd09dbac
commit 683df43b95
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
website/canvas.html
View File

@ -136,19 +136,25 @@
color: white; color: white;
} }
/* Collapse/expand toggle */ /* Collapse/expand toggle — small pill at bottom of toolbar */
#toolbar-collapse { #toolbar-collapse {
padding: 7px 8px !important; padding: 4px 0 !important;
background: transparent !important; background: transparent !important;
font-size: 16px !important; font-size: 11px !important;
line-height: 1; line-height: 1;
opacity: 0.6; opacity: 0.4;
transition: opacity 0.2s; transition: opacity 0.2s;
text-align: center;
letter-spacing: 2px;
color: #94a3b8;
order: 999; /* always last */
margin-top: auto;
} }
#toolbar-collapse:hover { #toolbar-collapse:hover {
opacity: 1; opacity: 1;
background: #f1f5f9 !important; background: #f1f5f9 !important;
color: #0f172a;
} }
#toolbar.collapsed .toolbar-group, #toolbar.collapsed .toolbar-group,
@ -162,6 +168,12 @@
overflow: visible; overflow: visible;
} }
#toolbar.collapsed #toolbar-collapse {
opacity: 0.7;
font-size: 14px !important;
padding: 4px 6px !important;
}
#community-info { #community-info {
position: fixed; position: fixed;
top: 72px; top: 72px;
@ -607,8 +619,6 @@
</div> </div>
<div id="toolbar"> <div id="toolbar">
<button id="toolbar-collapse" title="Minimize toolbar">▲</button>
<div class="toolbar-group"> <div class="toolbar-group">
<button class="toolbar-group-toggle">✏️ Draw</button> <button class="toolbar-group-toggle">✏️ Draw</button>
<div class="toolbar-dropdown"> <div class="toolbar-dropdown">
@ -732,6 +742,8 @@
<button id="reset-view" title="Reset View">⟳ Reset View</button> <button id="reset-view" title="Reset View">⟳ Reset View</button>
</div> </div>
</div> </div>
<button id="toolbar-collapse" title="Minimize toolbar">···</button>
</div> </div>
<div id="memory-panel"> <div id="memory-panel">
@ -2202,7 +2214,7 @@
const collapseBtn = document.getElementById("toolbar-collapse"); const collapseBtn = document.getElementById("toolbar-collapse");
collapseBtn.addEventListener("click", () => { collapseBtn.addEventListener("click", () => {
const isCollapsed = toolbarEl.classList.toggle("collapsed"); const isCollapsed = toolbarEl.classList.toggle("collapsed");
collapseBtn.textContent = isCollapsed ? "▼" : "▲"; collapseBtn.textContent = isCollapsed ? "▶" : "···";
collapseBtn.title = isCollapsed ? "Expand toolbar" : "Minimize toolbar"; collapseBtn.title = isCollapsed ? "Expand toolbar" : "Minimize toolbar";
}); });