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

fix(calc-02): align display buttons in a grid

Browse Source 
Wrap the display controls in a dedicated grid container, add a spacer for the missing cell, and simplify the button styling so the layout stays consistent across sizes.
This commit is contained in:
MatMoul
2026-05-16 01:08:11 +02:00
parent 256e9f2b33
commit 75bf6d69df
2 changed files with 22 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.css
+12 -16
View File
@@ -159,26 +159,26 @@ body {
.display-buttons-grid { .display-buttons-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, auto);
gap: 8px; gap: 8px;
align-content: start; align-content: start;
align-items: stretch; align-items: stretch;
grid-auto-flow: row;
grid-auto-rows: auto;
} }
.display-button { .display-button {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 rgba(0, 0, 0, 0.34); background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
background-clip: padding-box; color: #eef2f7;
background: linear-gradient(180deg, #3a414c, #252b34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
color: #e8edf3;
border-color: rgba(255, 255, 255, 0.05);
} }
.display-button-offset { .display-button-offset {
grid-column-start: 2; grid-column-start: 2;
} }
.display-button-spacer {
opacity: 0;
pointer-events: none;
}
.mode-menu { .mode-menu {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
@@ -206,14 +206,6 @@ body {
color: #eef2f7; color: #eef2f7;
} }
.display-button:nth-child(6) {
background: linear-gradient(180deg, #343b46, #20262e);
}
.display-button:nth-child(7) {
background: linear-gradient(180deg, #343b46, #20262e);
}
.keypad-panel { .keypad-panel {
grid-area: keypad; grid-area: keypad;
padding: 10px; padding: 10px;
@@ -427,6 +419,10 @@ button:active {
"trigo"; "trigo";
} }
.display-buttons-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.keypad-grid { .keypad-grid {
grid-template-rows: repeat(5, minmax(42px, 1fr)); grid-template-rows: repeat(5, minmax(42px, 1fr));
} }
samples/calc-02/index.html
+10 -7
View File
@@ -24,13 +24,16 @@
</div> </div>
<div class="display-buttons-panel"> <div class="display-buttons-panel">
<button id="modeButton" class="display-button">Mode</button> <div class="display-buttons-grid">
<button id="pasteButton" class="display-button">⎘</button> <button id="modeButton" class="display-button key-default">Mode</button>
<button id="upButton" class="display-button">↑</button> <button id="pasteButton" class="display-button key-default">⎘</button>
<button id="constButton" class="display-button">π</button> <button id="upButton" class="display-button key-default">↑</button>
<button id="leftButton" class="display-button display-button-offset">←</button> <button id="constButton" class="display-button key-default">π</button>
<button id="downButton" class="display-button">↓</button> <button id="leftButton" class="display-button key-default display-button-offset">←</button>
<button id="rightButton" class="display-button">→</button> <button id="downButton" class="display-button key-default">↓</button>
<button id="rightButton" class="display-button key-default">→</button>
<div class="display-button-spacer"></div>
</div>
</div> </div>
<div class="keypad-panel"> <div class="keypad-panel">