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

Compare commits

base: m/mtm-rpn-js:ea61ec17d5420f7c91409eb7701e9355801a103a
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main
...
compare: m/mtm-rpn-js:813fae1b61eb8483a393f97837beccb24d16a8ee
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main

3 Commits
ea61ec17d5 ... 813fae1b61

Author SHA1 Message Date
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
2 changed files with 40 additions and 42 deletions
Expand all files Collapse all files
samples/calc-02/index.css
+18 -22
View File
@@ -32,6 +32,7 @@
html, body {
margin: 0;
min-height: 100%;
overflow-y: hidden;
}
body {
@@ -51,25 +52,23 @@ body {
.calculator {
width: 100%;
height: auto;
display: grid;
max-width: 460px;
height: 100vh;
max-height: 100vh;
padding: 8px;
border-radius: 8px;
background: var(--panel);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
row-gap: 6px;
grid-template-areas:
"display"
"display-buttons"
"keypad"
"functions"
"trigo";
justify-content: stretch;
align-content: start;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(46, 105, 135, 1);
}
.display-block,
.display-panel,
.display-buttons-panel,
.keypad-panel,
.functions-panel,
.trigo-panel {
@@ -79,15 +78,7 @@ body {
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 {
grid-area: display;
display: grid;
gap: 0;
align-self: start;
@@ -146,9 +137,7 @@ body {
font-size: 20px;
}
.display-buttons-panel {
grid-area: display-buttons;
padding: 8px;
align-self: start;
min-height: 0;
}
@@ -231,10 +220,17 @@ body {
.functions-panel,
.trigo-panel {
padding: 8px;
align-self: start;
min-height: 0;
}
.calculator > .display-block,
.calculator > .display-buttons-panel,
.calculator > .keypad-panel,
.calculator > .functions-panel,
.calculator > .trigo-panel {
justify-self: stretch;
}
.status-bar {
position: absolute;
top: 0;
samples/calc-02/index.html
+2
View File
@@ -9,6 +9,7 @@
<body>
<main class="app-shell">
<section class="calculator" aria-label="HP48GX style RPN calculator">
<div>
<div class="display-block">
<div class="display-panel">
<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>
</div>
</div>
</div>
<div class="keypad-panel">
<div class="keypad-grid" id="keypadGrid"></div>