diff --git a/samples/calc-01/index.css b/samples/calc-01/index.css index 6ae0d54..e64cee4 100644 --- a/samples/calc-01/index.css +++ b/samples/calc-01/index.css @@ -151,15 +151,6 @@ body { .topbar { margin-top: 14px; - display: grid; - grid-template-columns: minmax(120px, 148px) minmax(132px, 160px) 1fr minmax(72px, 88px) minmax(108px, 128px) minmax(72px, 88px); - gap: 10px; - align-items: stretch; -} - -.topbar-cell, -.topbar-status { - min-height: 70px; background: rgba(6, 10, 16, 0.18); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; @@ -167,38 +158,26 @@ body { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } +.topbar-group { + display: grid; + grid-template-columns: minmax(110px, 132px) minmax(110px, 132px) 1fr minmax(72px, 88px) minmax(108px, 128px) minmax(72px, 88px); + gap: 10px; + align-items: stretch; +} + .menu-cell { position: relative; } -.topbar-label { - display: block; - margin-bottom: 6px; - font-size: 11px; - color: #d9e1ec; - text-transform: uppercase; - letter-spacing: 0.12em; -} - -.status { - display: flex; - flex-wrap: wrap; - gap: 8px; - color: #edf2fa; - font-size: 12px; - align-content: center; -} - -.pill { - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 999px; - padding: 6px 10px; - background: rgba(255, 255, 255, 0.06); +.topbar-spacer { + border-radius: 12px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.04); } .menu-trigger { width: 100%; - min-height: 38px; + min-height: 50px; } .popup-menu { @@ -240,11 +219,11 @@ body { .action-cell > button { width: 100%; + min-height: 50px; } -.topbar-status { - display: flex; - align-items: center; +.wide-action { + min-width: 0; } select, @@ -365,9 +344,13 @@ button:active { } @media (max-width: 980px) { - .topbar { + .topbar-group { grid-template-columns: repeat(3, minmax(0, 1fr)); } + + .topbar-spacer { + display: none; + } } @media (max-width: 860px) { @@ -391,7 +374,7 @@ button:active { align-items: flex-start; } - .topbar { + .topbar-group { grid-template-columns: 1fr; } diff --git a/samples/calc-01/index.html b/samples/calc-01/index.html index 9d97d91..2f522f5 100644 --- a/samples/calc-01/index.html +++ b/samples/calc-01/index.html @@ -9,11 +9,6 @@
-
-

HP48-style RPN

- powered by src/rpn-calculator.js -
-
RPN stack
@@ -26,31 +21,28 @@
- +
+ - + -
-
inputValue:
-
isEditing:
-
+ -
-
-
+
+
+
+
@@ -71,7 +63,6 @@
-
Keyboard: digits, numpad, Enter, Backspace, Delete, Esc, ↑, ↓, →, +, -, *, /, %, ^, q, n, r, i, g, l, s, c, S, C, x, y, z, t
diff --git a/samples/calc-01/index.js b/samples/calc-01/index.js index 2ae15ed..9073412 100644 --- a/samples/calc-01/index.js +++ b/samples/calc-01/index.js @@ -5,8 +5,6 @@ const stackEl = document.getElementById('stack'); const displayEl = document.getElementById('display'); const errorEl = document.getElementById('error'); -const inputValueLabel = document.getElementById('inputValueLabel'); -const editingLabel = document.getElementById('editingLabel'); const modeLabel = document.getElementById('modeLabel'); const angleMode = document.getElementById('angleMode'); const modeMenuButton = document.getElementById('modeMenuButton'); @@ -377,8 +375,6 @@ function render() { } else { displayEl.textContent = 'READY'; } - inputValueLabel.textContent = calc.inputValue || '∅'; - editingLabel.textContent = String(calc.isEditing); modeLabel.textContent = calc.angleMode; modeMenuButton.textContent = calc.angleMode; angleMode.value = calc.angleMode;