m/mtm-rpn-js
1
0
Fork 0
Code Issues Actions Activity

refactor(samples): simplify calc-01 topbar layout and remove debug labels

Browse Source
This commit is contained in:
MatMoul
2026-04-25 02:27:25 +02:00
parent 3d58309e0d
commit 3b7f35a00d
3 changed files with 40 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-01/index.css
+21 -38
View File
@@ -151,15 +151,6 @@ body {
.topbar { .topbar {
margin-top: 14px; 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); background: rgba(6, 10, 16, 0.18);
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px; border-radius: 16px;
@@ -167,38 +158,26 @@ body {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); 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 { .menu-cell {
position: relative; position: relative;
} }
.topbar-label { .topbar-spacer {
display: block; border-radius: 12px;
margin-bottom: 6px; background: rgba(255, 255, 255, 0.03);
font-size: 11px; border: 1px solid rgba(255, 255, 255, 0.04);
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);
} }
.menu-trigger { .menu-trigger {
width: 100%; width: 100%;
min-height: 38px; min-height: 50px;
} }
.popup-menu { .popup-menu {
@@ -240,11 +219,11 @@ body {
.action-cell > button { .action-cell > button {
width: 100%; width: 100%;
min-height: 50px;
} }
.topbar-status { .wide-action {
display: flex; min-width: 0;
align-items: center;
} }
select, select,
@@ -365,9 +344,13 @@ button:active {
} }
@media (max-width: 980px) { @media (max-width: 980px) {
.topbar { .topbar-group {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
.topbar-spacer {
display: none;
}
} }
@media (max-width: 860px) { @media (max-width: 860px) {
@@ -391,7 +374,7 @@ button:active {
align-items: flex-start; align-items: flex-start;
} }
.topbar { .topbar-group {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
samples/calc-01/index.html
+19 -28
View File
@@ -9,11 +9,6 @@
<body> <body>
<div class="wrap"> <div class="wrap">
<div class="calc"> <div class="calc">
<div class="brand">
<h1>HP48-style RPN</h1>
<small>powered by src/rpn-calculator.js</small>
</div>
<div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen"> <div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen">
<div class="screen-top"> <div class="screen-top">
<div>RPN stack</div> <div>RPN stack</div>
@@ -26,31 +21,28 @@
<input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1"> <input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
<div class="topbar"> <div class="topbar">
<div class="topbar-cell menu-cell" id="modeMenuWrap"> <div class="topbar-group">
<div class="topbar-label">mode</div> <div class="menu-cell" id="modeMenuWrap">
<button type="button" class="menu-trigger key-function" id="modeMenuButton" aria-haspopup="true" aria-expanded="false">deg</button> <button type="button" class="menu-trigger key-function" id="modeMenuButton" aria-haspopup="true" aria-expanded="false">mode</button>
<div class="popup-menu" id="modeMenu" hidden></div> <div class="popup-menu" id="modeMenu" hidden></div>
<select id="angleMode" class="hidden-select" aria-hidden="true" tabindex="-1"> <select id="angleMode" class="hidden-select" aria-hidden="true" tabindex="-1">
<option value="deg">Degrees</option> <option value="deg">Degrees</option>
<option value="rad">Radians</option> <option value="rad">Radians</option>
<option value="grad">Grads</option> <option value="grad">Grads</option>
</select> </select>
</div> </div>
<div class="topbar-cell menu-cell consts-cell" id="constsMenuWrap"> <div class="menu-cell" id="constsMenuWrap">
<div class="topbar-label">consts</div> <button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">consts</button>
<button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">consts</button> <div class="popup-menu popup-menu-compact" id="constsMenu" hidden></div>
<div class="popup-menu popup-menu-compact" id="constsMenu" hidden></div> </div>
</div>
<div class="topbar-status status"> <div class="topbar-spacer" aria-hidden="true"></div>
<div class="pill">inputValue: <span id="inputValueLabel"></span></div>
<div class="pill">isEditing: <span id="editingLabel"></span></div>
</div>
<div class="topbar-cell action-cell" id="deleteButton"></div> <div class="action-cell" id="deleteButton"></div>
<div class="topbar-cell action-cell" id="backspaceButton"></div> <div class="action-cell wide-action" id="backspaceButton"></div>
<div class="topbar-cell action-cell" id="escapeButton"></div> <div class="action-cell" id="escapeButton"></div>
</div>
</div> </div>
<div class="keyboard-layout"> <div class="keyboard-layout">
@@ -71,7 +63,6 @@
</div> </div>
<div id="error" class="error"></div> <div id="error" class="error"></div>
<div class="hint">Keyboard: digits, numpad, Enter, Backspace, Delete, Esc, ↑, ↓, →, +, -, *, /, %, ^, q, n, r, i, g, l, s, c, S, C, x, y, z, t</div>
</div> </div>
</div> </div>
samples/calc-01/index.js
-4
View File
@@ -5,8 +5,6 @@ const stackEl = document.getElementById('stack');
const displayEl = document.getElementById('display'); const displayEl = document.getElementById('display');
const errorEl = document.getElementById('error'); const errorEl = document.getElementById('error');
const inputValueLabel = document.getElementById('inputValueLabel');
const editingLabel = document.getElementById('editingLabel');
const modeLabel = document.getElementById('modeLabel'); const modeLabel = document.getElementById('modeLabel');
const angleMode = document.getElementById('angleMode'); const angleMode = document.getElementById('angleMode');
const modeMenuButton = document.getElementById('modeMenuButton'); const modeMenuButton = document.getElementById('modeMenuButton');
@@ -377,8 +375,6 @@ function render() {
} else { } else {
displayEl.textContent = 'READY'; displayEl.textContent = 'READY';
} }
inputValueLabel.textContent = calc.inputValue || '∅';
editingLabel.textContent = String(calc.isEditing);
modeLabel.textContent = calc.angleMode; modeLabel.textContent = calc.angleMode;
modeMenuButton.textContent = calc.angleMode; modeMenuButton.textContent = calc.angleMode;
angleMode.value = calc.angleMode; angleMode.value = calc.angleMode;