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

fix(calc-02): tighten calculator layout and panel styling

Browse Source 
Wrap the display and control buttons in a shared display block so the
stack and button panels align as a single unit. Reduce corner radii and
adjust gaps/padding across the calculator to better fit the updated
portrait and desktop layouts.
This commit is contained in:
MatMoul
2026-05-15 22:35:19 +02:00
parent 432523c23f
commit 4e8155b5f0
2 changed files with 63 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.css
+44 -18
View File
@@ -53,9 +53,8 @@ body {
width: min(100vw - 24px, 1120px);
height: min(100vh - 24px, 900px);
display: grid;
gap: clamp(10px, 1.4vw, 18px);
padding: clamp(12px, 1.8vw, 18px);
border-radius: 28px;
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);
@@ -64,28 +63,39 @@ body {
align-content: start;
grid-template-areas:
"display functions"
"buttons functions"
"display functions"
"keypad functions"
"keypad trigo";
row-gap: 0;
column-gap: clamp(10px, 1.4vw, 18px);
}
.display-block,
.display-panel,
.display-buttons-panel,
.keypad-panel,
.functions-panel,
.trigo-panel,
.status-line {
border-radius: 18px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(6, 10, 16, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.display-panel {
.display-block {
grid-area: display;
display: grid;
gap: 0;
align-self: start;
justify-items: stretch;
grid-template-rows: auto auto;
row-gap: 0;
}
.display-panel {
position: relative;
width: 100%;
padding: clamp(12px, 1.5vw, 16px);
padding-bottom: clamp(4px, 0.6vw, 8px);
background: linear-gradient(180deg, var(--display), var(--display2));
@@ -95,10 +105,18 @@ body {
height: auto;
min-height: clamp(112px, 18vw, 124px);
max-height: none;
align-self: start;
margin-bottom: 0;
}
.display-frame {
margin: 0;
padding: 0;
}
.display-buttons-panel {
margin-top: 0;
}
.display-grid {
height: 100%;
display: grid;
@@ -131,7 +149,7 @@ body {
}
.display-buttons-panel {
grid-area: buttons;
width: 100%;
padding: 8px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -168,9 +186,10 @@ body {
display: grid;
gap: 6px;
padding: 10px;
border-radius: 14px;
background: rgba(18, 24, 33, 0.98);
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);
}
@@ -207,6 +226,7 @@ body {
align-self: start;
min-height: 0;
padding-top: 10px;
padding-bottom: 8px;
}
.trigo-panel {
@@ -215,6 +235,7 @@ body {
align-self: start;
min-height: 0;
padding-top: 10px;
padding-bottom: 8px;
}
.status-bar {
@@ -276,8 +297,9 @@ body {
button {
border: 1px solid rgba(14, 18, 25, 0.85);
border-radius: 12px;
border-radius: 8px;
padding: 10px 8px;
font: inherit;
font-weight: 700;
color: var(--btnText);
@@ -396,10 +418,10 @@ button:active {
height: auto;
min-height: calc(100vh - 16px);
grid-template-columns: 1fr;
grid-template-rows: minmax(160px, auto) auto minmax(220px, auto) auto auto;
grid-template-rows: minmax(160px, auto) auto auto auto;
row-gap: 6px;
grid-template-areas:
"display"
"buttons"
"keypad"
"functions"
"trigo";
@@ -409,6 +431,10 @@ button:active {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, auto);
margin-top: 0;
margin-bottom: 0;
padding-top: 4px;
padding-bottom: 4px;
align-content: start;
}
.keypad-grid {
@@ -417,7 +443,7 @@ button:active {
.functions-grid,
.trigo-grid {
grid-auto-rows: minmax(0, 1fr);
grid-auto-rows: minmax(0, auto);
grid-template-rows: repeat(2, minmax(0, 1fr));
}
}
@@ -430,9 +456,9 @@ button:active {
.calculator {
width: 100%;
min-height: calc(100vh - 16px);
border-radius: 20px;
border-radius: 8px;
padding: 10px;
gap: 10px;
gap: 12px;
}
.display-panel {
@@ -451,7 +477,7 @@ button:active {
}
button {
border-radius: 10px;
border-radius: 8px;
padding: 8px 6px;
font-size: 13px;
line-height: 1;
samples/calc-02/index.html
+19 -17
View File
@@ -9,26 +9,28 @@
<body>
<main class="app-shell">
<section class="calculator calculator-portrait" aria-label="HP48GX style RPN calculator">
<div class="display-panel">
<div class="status-bar" id="statusLine" aria-live="polite"></div>
<div class="display-frame">
<div class="display-grid">
<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
<div class="stack-cell"><span class="stack-label">Z:</span><span id="stackZ" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
<div class="stack-cell"><span class="stack-label">Y:</span><span id="stackY" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
<div class="stack-cell"><span class="stack-label">X:</span><span id="stackX" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
<div class="display-block">
<div class="display-panel">
<div class="status-bar" id="statusLine" aria-live="polite"></div>
<div class="display-frame">
<div class="display-grid">
<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
<div class="stack-cell"><span class="stack-label">Z:</span><span id="stackZ" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
<div class="stack-cell"><span class="stack-label">Y:</span><span id="stackY" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
<div class="stack-cell"><span class="stack-label">X:</span><span id="stackX" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
</div>
</div>
</div>
</div>
<div class="display-buttons-panel">
<button id="modeButton" class="display-button">Mode</button>
<button id="pasteButton" class="display-button">⎘</button>
<button id="upButton" class="display-button">↑</button>
<button id="constButton" class="display-button">π</button>
<button id="leftButton" class="display-button display-button-offset">←</button>
<button id="downButton" class="display-button">↓</button>
<button id="rightButton" class="display-button">→</button>
<div class="display-buttons-panel">
<button id="modeButton" class="display-button">Mode</button>
<button id="pasteButton" class="display-button">⎘</button>
<button id="upButton" class="display-button">↑</button>
<button id="constButton" class="display-button">π</button>
<button id="leftButton" class="display-button display-button-offset">←</button>
<button id="downButton" class="display-button">↓</button>
<button id="rightButton" class="display-button">→</button>
</div>
</div>
<div class="keypad-panel">