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

refactor(calc-02): move display buttons into their own grid area

Browse Source
This commit is contained in:
MatMoul
2026-05-16 01:01:14 +02:00
parent 77fb671dcf
commit 256e9f2b33
3 changed files with 21 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.css
+11 -27
View File
@@ -113,9 +113,6 @@ body {
padding: 0; padding: 0;
} }
.display-buttons-panel {
margin-top: 0;
}
.display-grid { .display-grid {
height: 100%; height: 100%;
@@ -151,8 +148,15 @@ body {
} }
.display-buttons-panel { .display-buttons-panel {
width: 100%; grid-area: display-buttons;
padding: 8px; padding: 10px;
align-self: start;
min-height: 0;
padding-top: 10px;
padding-bottom: 8px;
}
.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); grid-template-rows: repeat(2, auto);
@@ -161,9 +165,6 @@ body {
align-items: stretch; align-items: stretch;
grid-auto-flow: row; grid-auto-flow: row;
grid-auto-rows: auto; grid-auto-rows: auto;
background: linear-gradient(180deg, #242a33, #1a1f27);
border-color: rgba(255, 255, 255, 0.04);
margin-top: 0;
} }
.display-button { .display-button {
@@ -178,10 +179,6 @@ body {
grid-column-start: 2; grid-column-start: 2;
} }
.display-buttons-panel > button {
width: 100%;
}
.mode-menu { .mode-menu {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
@@ -420,25 +417,16 @@ button:active {
height: auto; height: auto;
min-height: 100%; min-height: 100%;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: minmax(160px, auto) auto auto auto; grid-template-rows: minmax(0px, auto) auto auto auto;
row-gap: 6px; row-gap: 6px;
grid-template-areas: grid-template-areas:
"display" "display"
"display-buttons"
"keypad" "keypad"
"functions" "functions"
"trigo"; "trigo";
} }
.display-buttons-panel {
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 { .keypad-grid {
grid-template-rows: repeat(5, minmax(42px, 1fr)); grid-template-rows: repeat(5, minmax(42px, 1fr));
} }
@@ -485,8 +473,4 @@ button:active {
line-height: 1; line-height: 1;
} }
.display-buttons-panel {
gap: 8px;
}
} }
samples/calc-02/index.html
+9 -9
View File
@@ -21,16 +21,16 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="display-buttons-panel"> <div class="display-buttons-panel">
<button id="modeButton" class="display-button">Mode</button> <button id="modeButton" class="display-button">Mode</button>
<button id="pasteButton" class="display-button">⎘</button> <button id="pasteButton" class="display-button">⎘</button>
<button id="upButton" class="display-button">↑</button> <button id="upButton" class="display-button">↑</button>
<button id="constButton" class="display-button">π</button> <button id="constButton" class="display-button">π</button>
<button id="leftButton" class="display-button display-button-offset">←</button> <button id="leftButton" class="display-button display-button-offset">←</button>
<button id="downButton" class="display-button">↓</button> <button id="downButton" class="display-button">↓</button>
<button id="rightButton" class="display-button">→</button> <button id="rightButton" class="display-button">→</button>
</div>
</div> </div>
<div class="keypad-panel"> <div class="keypad-panel">
samples/calc-02/index.js
-1
View File
@@ -78,7 +78,6 @@ const trigoKeys = [
{ label: '', spacer: true }, { label: '', spacer: true },
]; ];
const isTouchDevice = window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window; const isTouchDevice = window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window;
function focusInput() { function focusInput() {