You've already forked computing-box
feat(v2-alpha): add collapsible toolbox and refine binary simulator layout
- Introduce collapsible right-hand toolbox for the binary simulator - Pin toolbox to the right edge with responsive fallback on smaller screens - Rework tools and bit-width controls into a shared side layout - Adjust control sizing, spacing, and visual hierarchy for clarity Notes: - Toolbox collapse is functional but requires refinement - Tools and Bit Width should be merged into a single module/card - Collapsed state does not yet fully hide the panel or re-centre content Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
@@ -7,13 +7,14 @@
|
||||
--accent-dim: rgba(51,255,122,.15);
|
||||
--line: rgba(255,255,255,.12);
|
||||
|
||||
--danger: #e24444;
|
||||
--danger-dim: rgba(226,68,68,.22);
|
||||
--success: #2fd66b;
|
||||
--success-dim: rgba(47,214,107,.22);
|
||||
/* right column sizing */
|
||||
--sideW: 720px;
|
||||
--sidePad: 24px;
|
||||
|
||||
/* header offset (tweak if your header is taller/shorter) */
|
||||
--sideTop: 92px;
|
||||
}
|
||||
|
||||
/* -------- Fonts -------- */
|
||||
@font-face{
|
||||
font-family: "DSEG7ClassicRegular";
|
||||
src:
|
||||
@@ -41,15 +42,17 @@ body{
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Leave enough room for the fixed right panel */
|
||||
.wrap{
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px 60px;
|
||||
padding-right: calc(var(--sideW) + (var(--sidePad) * 2));
|
||||
}
|
||||
|
||||
.topGrid{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 340px;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px;
|
||||
align-items:start;
|
||||
}
|
||||
@@ -68,7 +71,6 @@ body{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Anything that is a number uses DSEG7 */
|
||||
.num{
|
||||
font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-weight: 400;
|
||||
@@ -76,18 +78,20 @@ body{
|
||||
text-shadow: 0 0 18px var(--accent-dim);
|
||||
}
|
||||
|
||||
/* 25% smaller */
|
||||
.denaryValue{
|
||||
font-size: 70px;
|
||||
font-size: 53px;
|
||||
line-height: 1.0;
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
|
||||
/* 25% smaller + slightly wider spacing */
|
||||
.binaryValue{
|
||||
font-size: 52px;
|
||||
letter-spacing: .12em;
|
||||
font-size: 39px;
|
||||
letter-spacing: calc(.12em + 2px);
|
||||
line-height: 1.0;
|
||||
margin: 6px 0 14px;
|
||||
white-space: pre;
|
||||
white-space: pre; /* preserve spaces */
|
||||
}
|
||||
|
||||
.controlsStack{
|
||||
@@ -128,12 +132,45 @@ body{
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* -------------------------
|
||||
RIGHT COLUMN: pinned + collapsible
|
||||
------------------------- */
|
||||
.panelCol{
|
||||
position: fixed;
|
||||
right: var(--sidePad);
|
||||
top: var(--sideTop);
|
||||
width: var(--sideW);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap: 14px;
|
||||
z-index: 50;
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
/* collapse leaves a small handle visible */
|
||||
.panelCol.isCollapsed{
|
||||
transform: translateX(calc(100% - 52px));
|
||||
}
|
||||
|
||||
.panelToggle{
|
||||
position: absolute;
|
||||
left: -52px;
|
||||
top: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255,255,255,.14);
|
||||
background: rgba(255,255,255,.06);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-family: "SevenSegment", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* cards */
|
||||
.card{
|
||||
background: var(--panel2);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
@@ -168,10 +205,9 @@ body{
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
font-family: "SevenSegment", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Switch */
|
||||
/* Shared toggle switch */
|
||||
.switch{
|
||||
position: relative;
|
||||
width: 56px;
|
||||
@@ -212,19 +248,23 @@ body{
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* Tools layout */
|
||||
.toolRow{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
/* Tools + Bit Width side-by-side */
|
||||
.sideRow{
|
||||
display:flex;
|
||||
gap: 14px;
|
||||
}
|
||||
.toolRow2{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
.sideRow .card{
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
/* Tools layout: arrows row + reset/random row */
|
||||
.toolRow, .toolRow2{
|
||||
display:flex;
|
||||
gap: 10px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
/* Reset/Random = 50% current width (explicit) */
|
||||
.toolBtn{
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
@@ -236,23 +276,26 @@ body{
|
||||
font-family: "SevenSegment", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Narrower arrow buttons (only the arrow pair) */
|
||||
.toolSpin{
|
||||
/* Reset/Random smaller */
|
||||
.toolBtn.toolHalf{
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/* Arrows half of that */
|
||||
.toolBtn.toolQuarter{
|
||||
width: 60px;
|
||||
font-size: 22px;
|
||||
height: 48px;
|
||||
max-width: 120px; /* narrower */
|
||||
justify-self: start;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Down = red, Up = green */
|
||||
#btnDec{
|
||||
background: var(--danger-dim);
|
||||
border-color: rgba(226,68,68,.45);
|
||||
/* colour arrows */
|
||||
.toolBtn.toolUp{
|
||||
background: rgba(51,255,122,.18);
|
||||
border-color: rgba(51,255,122,.45);
|
||||
}
|
||||
#btnInc{
|
||||
background: var(--success-dim);
|
||||
border-color: rgba(47,214,107,.45);
|
||||
.toolBtn.toolDown{
|
||||
background: rgba(255,80,80,.18);
|
||||
border-color: rgba(255,80,80,.45);
|
||||
}
|
||||
|
||||
/* Bit width control */
|
||||
@@ -291,7 +334,6 @@ body{
|
||||
font-weight:800;
|
||||
letter-spacing:.18em;
|
||||
text-transform:uppercase;
|
||||
font-family: "SevenSegment", system-ui, sans-serif;
|
||||
}
|
||||
.bitInput{
|
||||
width:86px;
|
||||
@@ -333,38 +375,22 @@ body{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/* Bulb (emoji only — no circle, no ::before so it won't duplicate) */
|
||||
/* Bulb: no circle here (JS controls the emoji), but keep sizing if used */
|
||||
.bulb{
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
opacity: .45;
|
||||
filter: grayscale(1);
|
||||
text-shadow: none;
|
||||
opacity: .55;
|
||||
font-size: 33px; /* 25% larger from 26px */
|
||||
}
|
||||
|
||||
/* IMPORTANT: remove the pseudo-element that was causing the 2nd bulb */
|
||||
.bulb::before{
|
||||
content: none;
|
||||
}
|
||||
|
||||
.bulb.on{
|
||||
opacity: 1;
|
||||
filter: grayscale(0);
|
||||
text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
|
||||
}
|
||||
|
||||
/* Bit value numbers use DSEG7 */
|
||||
.bitVal{
|
||||
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
|
||||
font-size: 28px;
|
||||
@@ -374,13 +400,22 @@ body{
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
/* responsive: stop pinning on small screens */
|
||||
@media (max-width: 980px){
|
||||
.topGrid{ grid-template-columns: 1fr; }
|
||||
.denaryValue{ font-size: 62px; }
|
||||
.binaryValue{ font-size: 46px; }
|
||||
.panelCol{
|
||||
position: static;
|
||||
width: auto;
|
||||
transform: none !important;
|
||||
}
|
||||
.panelToggle{ display:none; }
|
||||
.wrap{
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px){
|
||||
.btn{ min-width: 150px; }
|
||||
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
|
||||
.toolBtn.toolHalf{ width: 100px; }
|
||||
.toolBtn.toolQuarter{ width: 52px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user