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

Compare commits

base: m/mtm-rpn-js:d8d05568229da43b3f1fa7f5d72152ba12f8a37b
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main
..
compare: m/mtm-rpn-js:2504716c64de188737bea10978d3f6936a3ae16f
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main

2 Commits
d8d0556822 .. 2504716c64

Author SHA1 Message Date
matmoul 2504716c64 fix: tighten calc stack display layout 
Reorder the stack cell grid so the copy button sits beside the label and reduce spacing to better align the value column.
 2026-05-16 02:04:47 +02:00
matmoul 6c8c032f7a fix: stabilize calculator display sizing 2026-05-16 02:02:45 +02:00
2 changed files with 19 additions and 28 deletions
Expand all files Collapse all files
samples/calc-02/index.css
+15 -24
View File
@@ -109,32 +109,37 @@ body {
color: var(--displayText); color: var(--displayText);
font-family: "Courier New", monospace; font-family: "Courier New", monospace;
overflow: hidden; overflow: hidden;
height: auto; box-sizing: border-box;
min-height: clamp(112px, 18vw, 124px); height: 138px;
max-height: none; min-height: 138px;
max-height: 138px;
margin-bottom: 0; margin-bottom: 0;
} }
.display-grid { .display-grid {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, auto));
align-content: start;
gap: 2px; gap: 2px;
} }
.stack-cell { .stack-cell {
display: grid; display: grid;
grid-template-columns: 2.2ch 1fr auto; grid-template-columns: 2.2ch auto minmax(0, 1fr);
align-items: center; align-items: center;
gap: 12px; gap: 8px;
font-size: clamp(18px, 3vw, 30px); font-size: 20px;
line-height: 1; line-height: 1;
min-height: 0; min-height: 0;
padding-block: 0; padding-block: 0;
} }
.stack-label { .stack-label {
text-align: right; text-align: right;
opacity: 0.78; opacity: 0.78;
@@ -147,8 +152,10 @@ body {
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: right; text-align: right;
justify-self: end; justify-self: end;
font-size: 20px;
} }
.display-buttons-panel { .display-buttons-panel {
grid-area: display-buttons; grid-area: display-buttons;
padding: 8px; padding: 8px;
@@ -330,7 +337,7 @@ button:active {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
color: rgba(31, 42, 18, 0.58); color: rgba(31, 42, 18, 0.58);
margin-left: 6px; margin-left: 0;
} }
.stack-cell:last-child { .stack-cell:last-child {
@@ -387,22 +394,6 @@ button:active {
padding-inline: 6px; padding-inline: 6px;
} }
@media (max-width: 700px) {
.key-enter {
padding-inline: 4px;
letter-spacing: 0.01em;
}
.display-button-symbol {
min-width: 1.28em;
font-size: 1.3em;
}
.display-buttons-grid > button {
padding: 6px 8px;
}
}
.hidden-input { .hidden-input {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
samples/calc-02/index.html
+4 -4
View File
@@ -14,10 +14,10 @@
<div class="status-bar" id="statusLine" aria-live="polite"></div> <div class="status-bar" id="statusLine" aria-live="polite"></div>
<div class="display-frame"> <div class="display-frame">
<div class="display-grid"> <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">T:</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><span id="stackT" class="stack-value"></span></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">Z:</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><span id="stackZ" class="stack-value"></span></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">Y:</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><span id="stackY" class="stack-value"></span></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="stack-cell"><span class="stack-label">X:</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><span id="stackX" class="stack-value"></span></div>
</div> </div>
</div> </div>
</div> </div>