From 54797f9dd946ea8628ce0630d374829572cc84a4 Mon Sep 17 00:00:00 2001 From: MatMoul Date: Sat, 16 May 2026 01:16:47 +0200 Subject: [PATCH] refactor(samples/calc-02): simplify layout to portrait-only single column Remove the responsive two-column desktop arrangement and make the calculator stack vertically with a 4-column display button row that preserves alignment. Also align the display buttons with the shared base button styling. --- .memory/state.md | 4 +- samples/calc-02/index.css | 89 +++++--------------------------------- samples/calc-02/index.html | 14 +++--- samples/calc-02/index.js | 3 -- 4 files changed, 19 insertions(+), 91 deletions(-) diff --git a/.memory/state.md b/.memory/state.md index 630b991..d0f5098 100644 --- a/.memory/state.md +++ b/.memory/state.md @@ -1,9 +1,9 @@ # State - Core engine: `src/rpn-calculator.js` -- Active demo: `samples/calc-02/` responsive HP48GX layout with portrait/landscape support; display-adjacent button row stays in 4 columns +- Active demo: `samples/calc-02/` portrait-only HP48GX layout; display-adjacent button row stays in 4 columns and now shares the same base button styling as the function keys - Mode button shows the current angle mode only; selecting a mode uses a popup menu - Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants` - Config: `maxSize`, `base`, `angleMode`, `enabledCommands` - Commands: arithmetic, stack, trigonometry, constants `pi` and `e`; arithmetic now includes `root` for y-th roots -- Demo actions: keyboard focus is kept on the hidden input on desktop so typing keeps working; the keypad layout places Enter in the bottom-left, ± in the former Enter position, and Esc before Clear for safety; paste parses clipboard text as a number before pushing it to the stack; Ctrl+V is supported via the hidden input paste event; backspace is ignored when the stack is empty; operation errors are shown as an overlay bar on top of the calculator with a shorter timeout and darker red +- Demo actions: keyboard focus is kept on the hidden input on desktop so typing keeps working; the keypad layout places Enter in the bottom-left, ± in the former Enter position, and Esc before Clear for safety; paste parses clipboard text as a number before pushing it to the stack; Ctrl+V is supported via the hidden input paste event; backspace is ignored when the stack is empty; operation errors are shown as an overlay bar on top of the calculator with a shorter timeout and darker red; the display button row uses a 4-column grid with a spacer cell to preserve alignment - Exports: browser `window.RpnCalculator`, CommonJS `module.exports` diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css index 9509098..140084f 100644 --- a/samples/calc-02/index.css +++ b/samples/calc-02/index.css @@ -51,23 +51,23 @@ body { .calculator { width: 100%; - height: 100%; + height: auto; + min-height: 100%; display: grid; padding: 8px; border-radius: 8px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--edge); box-shadow: 0 26px 70px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); - grid-template-columns: 1.3fr 0.9fr; - grid-template-rows: minmax(0, 0.62fr) min-content minmax(180px, 1fr) minmax(180px, 1fr); - align-content: start; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto auto auto; + row-gap: 6px; grid-template-areas: - "display functions" - "display functions" - "keypad functions" - "keypad trigo"; - row-gap: 0; - column-gap: clamp(10px, 1.4vw, 18px); + "display" + "display-buttons" + "keypad" + "functions" + "trigo"; } .display-block, @@ -113,7 +113,6 @@ body { padding: 0; } - .display-grid { height: 100%; display: grid; @@ -188,7 +187,6 @@ body { border-radius: 8px; background: rgba(18, 24, 33, 0.98); border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); } @@ -368,7 +366,6 @@ button:active { outline-offset: 2px; } - .key-default { background: linear-gradient(180deg, var(--btnTop), var(--btnBottom)); color: #eef2f7; @@ -403,70 +400,4 @@ button:active { pointer-events: none; } -@media (orientation: portrait), (max-width: 860px) { - .calculator { - width: 100%; - height: auto; - min-height: 100%; - grid-template-columns: 1fr; - grid-template-rows: minmax(0px, auto) auto auto auto; - row-gap: 6px; - grid-template-areas: - "display" - "display-buttons" - "keypad" - "functions" - "trigo"; - } - .display-buttons-grid { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .keypad-grid { - grid-template-rows: repeat(5, minmax(42px, 1fr)); - } - - .functions-grid, - .trigo-grid { - grid-auto-rows: minmax(0, auto); - grid-template-rows: repeat(2, minmax(0, 1fr)); - } -} - -@media (max-width: 520px) { - .app-shell { - padding: 0; - } - - .calculator { - width: 100%; - min-height: 100%; - border-radius: 8px; - padding: 8px; - gap: 12px; - } - - .display-panel { - padding: 8px; - padding-bottom: 8px; - } - - .stack-cell { - font-size: clamp(16px, 5.2vw, 22px); - gap: 8px; - } - - .stack-copy-button { - padding: 4px; - min-width: 24px; - } - - button { - border-radius: 8px; - padding: 10px 8px; - font-size: 13px; - line-height: 1; - } - -} diff --git a/samples/calc-02/index.html b/samples/calc-02/index.html index 658338c..4c94b79 100644 --- a/samples/calc-02/index.html +++ b/samples/calc-02/index.html @@ -25,13 +25,13 @@
- - - - - - - + + + + + + +
diff --git a/samples/calc-02/index.js b/samples/calc-02/index.js index 8d76bfd..0ed5d41 100644 --- a/samples/calc-02/index.js +++ b/samples/calc-02/index.js @@ -228,7 +228,6 @@ function execute(name) { } else if (calc.isValidIndex(0)) { calc.remove(0); } - } else if (name === 'swap') { pushEditingValueIfNeeded(); if (calc.isValidIndex(1)) { @@ -489,12 +488,10 @@ downButton.addEventListener('click', () => { } }); - rightButton.addEventListener('click', () => { execute('swap'); }); - window.addEventListener('keydown', handleKeyboard, { capture: true }); window.addEventListener('load', focusInput); window.addEventListener('pageshow', focusInput);