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

Compare commits

base: m/mtm-rpn-js:main
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main
..
compare: m/mtm-rpn-js:c69380d057062c674ded4e92bf04feda76960775
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main

7 Commits
main .. c69380d057

Author SHA1 Message Date
matmoul c69380d057 refactor(samples): reorder calculator keypad keys 2026-05-16 21:58:51 +02:00
matmoul c11a75d7f7 fix: bust calc sample stylesheet cache 2026-05-16 21:52:05 +02:00
matmoul 813fae1b61 refactor(calc-02): simplify calculator layout structure 
Move the display and button panels into a single wrapper and rely on
viewport-height sizing with hidden page overflow to keep the calculator
contained. Also trim redundant panel-specific layout rules and styling.
 2026-05-16 21:41:47 +02:00
matmoul 208db58fe7 fix: make calc-02 panels stretch and scroll within container 2026-05-16 20:24:43 +02:00
matmoul ea6401a006 fix: constrain calculator width on calc-02 sample 2026-05-16 20:17:19 +02:00
matmoul ea61ec17d5 fix: remove portrait class from calc-02 calculator shell 2026-05-16 19:44:09 +02:00
matmoul a4bbffe65b feat: replace calculator enter key label with symbol 2026-05-16 18:41:03 +02:00
3 changed files with 44 additions and 46 deletions
Expand all files Collapse all files
samples/calc-02/index.css
+18 -22
View File
@@ -32,6 +32,7 @@
html, body { html, body {
margin: 0; margin: 0;
min-height: 100%; min-height: 100%;
overflow-y: hidden;
} }
body { body {
@@ -51,25 +52,23 @@ body {
.calculator { .calculator {
width: 100%; width: 100%;
height: auto; max-width: 460px;
display: grid; height: 100vh;
max-height: 100vh;
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;
background: var(--panel); background: var(--panel);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
grid-template-columns: 1fr; justify-content: stretch;
grid-template-rows: auto auto auto auto auto; align-content: start;
row-gap: 6px; overflow-y: auto;
grid-template-areas: scrollbar-width: thin;
"display" scrollbar-color: rgba(46, 105, 135, 1);
"display-buttons"
"keypad"
"functions"
"trigo";
} }
.display-block, .display-block,
.display-panel, .display-panel,
.display-buttons-panel,
.keypad-panel, .keypad-panel,
.functions-panel, .functions-panel,
.trigo-panel { .trigo-panel {
@@ -79,15 +78,7 @@ body {
box-shadow: none; box-shadow: none;
} }
.display-buttons-panel {
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(6, 10, 16, 0.16);
box-shadow: none;
}
.display-block { .display-block {
grid-area: display;
display: grid; display: grid;
gap: 0; gap: 0;
align-self: start; align-self: start;
@@ -146,9 +137,7 @@ body {
font-size: 20px; font-size: 20px;
} }
.display-buttons-panel { .display-buttons-panel {
grid-area: display-buttons;
padding: 8px; padding: 8px;
align-self: start;
min-height: 0; min-height: 0;
} }
@@ -231,10 +220,17 @@ body {
.functions-panel, .functions-panel,
.trigo-panel { .trigo-panel {
padding: 8px; padding: 8px;
align-self: start;
min-height: 0; min-height: 0;
} }
.calculator > .display-block,
.calculator > .display-buttons-panel,
.calculator > .keypad-panel,
.calculator > .functions-panel,
.calculator > .trigo-panel {
justify-self: stretch;
}
.status-bar { .status-bar {
position: absolute; position: absolute;
top: 0; top: 0;
samples/calc-02/index.html
+4 -2
View File
@@ -4,11 +4,12 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>HP48GX RPN Calculator</title> <title>HP48GX RPN Calculator</title>
<link rel="stylesheet" href="./index.css"> <link rel="stylesheet" href="./index.css?ver=1">
</head> </head>
<body> <body>
<main class="app-shell"> <main class="app-shell">
<section class="calculator calculator-portrait" aria-label="HP48GX style RPN calculator"> <section class="calculator" aria-label="HP48GX style RPN calculator">
<div>
<div class="display-block"> <div class="display-block">
<div class="display-panel"> <div class="display-panel">
<div class="status-bar" id="statusLine" aria-live="polite"></div> <div class="status-bar" id="statusLine" aria-live="polite"></div>
@@ -35,6 +36,7 @@
<button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button> <button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
</div> </div>
</div> </div>
</div>
<div class="keypad-panel"> <div class="keypad-panel">
<div class="keypad-grid" id="keypadGrid"></div> <div class="keypad-grid" id="keypadGrid"></div>
samples/calc-02/index.js
+2 -2
View File
@@ -30,10 +30,10 @@ const calculatorEl = document.querySelector('.calculator');
const statusLine = document.getElementById('statusLine'); const statusLine = document.getElementById('statusLine');
const keypadKeys = [ const keypadKeys = [
{ label: 'ENTER', action: 'enter', className: 'key-enter' },
{ label: '⎋', action: 'escape', className: 'key-escape' },
{ label: 'C', action: 'clear', className: 'key-danger' }, { label: 'C', action: 'clear', className: 'key-danger' },
{ label: '⌫', action: 'backspace', className: 'key-danger' }, { label: '⌫', action: 'backspace', className: 'key-danger' },
{ label: '⎋', action: 'escape', className: 'key-escape' },
{ label: '⏎', action: 'enter', className: 'key-enter' },
{ label: '7', input: '7', className: 'key-default' }, { label: '7', input: '7', className: 'key-default' },
{ label: '8', input: '8', className: 'key-default' }, { label: '8', input: '8', className: 'key-default' },
{ label: '9', input: '9', className: 'key-default' }, { label: '9', input: '9', className: 'key-default' },