JosLe/logic-gates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: horizontal toolbar layout + fix component button placement

Browse Source 
Redesign toolbar sections to use horizontal button rows instead of
vertical stacking. Fix component placement by attaching click handlers
directly to dynamically created buttons and passing correct gate object
shape to getComponentWidth/Height.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-20 03:06:23 +01:00
parent 268013d053
commit 53d600fcb0
4 changed files with 61 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
css/style.css
View File

@@ -78,7 +78,21 @@ body {
.gate-btn.output-btn { border-color: #ff8833; }
.gate-btn.output-btn:hover { border-color: #ffaa55; }
.separator { width: 1px; height: 24px; background: #2a2a3a; margin: 0 6px; }
.separator { width: 1px; height: 32px; background: #2a2a3a; margin: 0 6px; }
.create-component-btn {
padding: 4px 10px;
background: #1a1a2e;
border: 1px solid #9900ff;
border-radius: 6px;
color: #9900ff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
transition: all 0.15s;
user-select: none;
}
.create-component-btn:hover { background: #252540; border-color: #cc66ff; color: #cc66ff; }
.toolbar-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.action-btn {
@@ -102,49 +116,54 @@ body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
height: 56px;
justify-content: flex-start;
gap: 2px;
padding: 4px 0;
}
.section-label {
font-size: 8px;
color: #666;
color: #555;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 1px 6px;
height: 10px;
line-height: 10px;
padding: 0 2px;
line-height: 1;
}
.section-buttons {
display: flex;
gap: 3px;
align-items: center;
flex-wrap: nowrap;
}
.toolbar-section .gate-btn {
padding: 3px 8px;
font-size: 10px;
height: 20px;
display: flex;
align-items: center;
padding: 4px 10px;
font-size: 11px;
}
.toolbar-section #saved-components {
display: flex;
gap: 2px;
gap: 3px;
align-items: center;
}
.toolbar-section .component-btn {
padding: 4px 8px;
font-size: 10px;
padding: 4px 10px;
font-size: 11px;
background: #1a1a2e;
border: 1px solid #2a2a3a;
border-radius: 4px;
border-radius: 6px;
color: #9900ff;
cursor: pointer;
font-weight: 600;
transition: all 0.15s;
}
.toolbar-section .component-btn:hover {
border-color: #9900ff;
color: #cc66ff;
background: #252540;
}
/* ==================== Canvas ==================== */