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

fix: align calc menus with trigger width

Browse Source
This commit is contained in:
MatMoul
2026-05-16 03:41:25 +02:00
parent a37ed59b40
commit 6a7a60a9bc
2 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.css
+17 -9
View File
@@ -207,22 +207,30 @@ body {
.mode-menu { .mode-menu {
position: fixed; position: fixed;
z-index: 20; z-index: 20;
display: grid; display: flex;
gap: 6px; flex-direction: column;
padding: 10px; gap: 4px;
border-radius: 8px; padding: 6px;
background: rgba(6, 10, 16, 0.16); border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(16, 21, 30, 0.96);
box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(2px);
} }
.mode-menu-item { .mode-menu-item {
min-width: 120px; width: 100%;
min-width: 0;
padding: 6px 10px;
border-radius: 5px;
background: linear-gradient(180deg, var(--btnAltTop), var(--btnAltBottom)); background: linear-gradient(180deg, var(--btnAltTop), var(--btnAltBottom));
text-align: left;
font-weight: 700;
} }
.mode-menu-item.is-active { .mode-menu-item.is-active {
outline: 2px solid rgba(207, 224, 174, 0.7); outline: 1px solid rgba(207, 224, 174, 0.7);
outline-offset: 0;
} }
.key-escape { .key-escape {
samples/calc-02/index.js
+4 -6
View File
@@ -357,6 +357,7 @@ function toggleModeMenu() {
modeMenuEl = document.createElement('div'); modeMenuEl = document.createElement('div');
modeMenuEl.className = 'mode-menu'; modeMenuEl.className = 'mode-menu';
modeMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`; modeMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
modeMenuEl.style.minWidth = `${rect.width}px`;
modeOptions.forEach((mode) => { modeOptions.forEach((mode) => {
const button = document.createElement('button'); const button = document.createElement('button');
button.type = 'button'; button.type = 'button';
@@ -370,9 +371,7 @@ function toggleModeMenu() {
modeMenuEl.appendChild(button); modeMenuEl.appendChild(button);
}); });
document.body.appendChild(modeMenuEl); document.body.appendChild(modeMenuEl);
const menuRect = modeMenuEl.getBoundingClientRect(); modeMenuEl.style.left = `${rect.left + window.scrollX}px`;
const maxLeft = Math.max(8, window.innerWidth - menuRect.width - 8);
modeMenuEl.style.left = `${Math.max(8, Math.min(maxLeft, rect.left + window.scrollX))}px`;
} }
modeButton.addEventListener('click', (event) => { modeButton.addEventListener('click', (event) => {
@@ -451,6 +450,7 @@ function toggleConstMenu() {
constMenuEl = document.createElement('div'); constMenuEl = document.createElement('div');
constMenuEl.className = 'mode-menu'; constMenuEl.className = 'mode-menu';
constMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`; constMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
constMenuEl.style.minWidth = `${rect.width}px`;
const availableConstants = calc.listConstants(); const availableConstants = calc.listConstants();
const keys = [...constantOrder, ...Object.keys(availableConstants).filter((name) => !constantOrder.includes(name))]; const keys = [...constantOrder, ...Object.keys(availableConstants).filter((name) => !constantOrder.includes(name))];
keys.forEach((name) => { keys.forEach((name) => {
@@ -472,9 +472,7 @@ function toggleConstMenu() {
constMenuEl.appendChild(button); constMenuEl.appendChild(button);
}); });
document.body.appendChild(constMenuEl); document.body.appendChild(constMenuEl);
const menuRect = constMenuEl.getBoundingClientRect(); constMenuEl.style.left = `${rect.left + window.scrollX}px`;
const desiredLeft = rect.right + window.scrollX - menuRect.width;
constMenuEl.style.left = `${Math.max(8, desiredLeft)}px`;
} }
constButton.addEventListener('click', (event) => { constButton.addEventListener('click', (event) => {