Fix settings menu on mobile positioning

This commit is contained in:
Ethan O'Brien 2024-01-24 00:44:21 -06:00
parent 00cfa38bdb
commit 806623af69

View file

@ -1620,8 +1620,6 @@ class EmulatorJS {
return both ? [button, svg, text] : button; return both ? [button, svg, text] : button;
} }
//todo. Center text on not restart button
const restartButton = addButton("Restart", '<svg viewBox="0 0 512 512"><path d="M496 48V192c0 17.69-14.31 32-32 32H320c-17.69 0-32-14.31-32-32s14.31-32 32-32h63.39c-29.97-39.7-77.25-63.78-127.6-63.78C167.7 96.22 96 167.9 96 256s71.69 159.8 159.8 159.8c34.88 0 68.03-11.03 95.88-31.94c14.22-10.53 34.22-7.75 44.81 6.375c10.59 14.16 7.75 34.22-6.375 44.81c-39.03 29.28-85.36 44.86-134.2 44.86C132.5 479.9 32 379.4 32 256s100.5-223.9 223.9-223.9c69.15 0 134 32.47 176.1 86.12V48c0-17.69 14.31-32 32-32S496 30.31 496 48z"/></svg>', () => { const restartButton = addButton("Restart", '<svg viewBox="0 0 512 512"><path d="M496 48V192c0 17.69-14.31 32-32 32H320c-17.69 0-32-14.31-32-32s14.31-32 32-32h63.39c-29.97-39.7-77.25-63.78-127.6-63.78C167.7 96.22 96 167.9 96 256s71.69 159.8 159.8 159.8c34.88 0 68.03-11.03 95.88-31.94c14.22-10.53 34.22-7.75 44.81 6.375c10.59 14.16 7.75 34.22-6.375 44.81c-39.03 29.28-85.36 44.86-134.2 44.86C132.5 479.9 32 379.4 32 256s100.5-223.9 223.9-223.9c69.15 0 134 32.47 176.1 86.12V48c0-17.69 14.31-32 32-32S496 30.31 496 48z"/></svg>', () => {
if (this.isNetplay && this.netplay.owner) { if (this.isNetplay && this.netplay.owner) {
this.gameManager.saveSaveFiles(); this.gameManager.saveSaveFiles();
@ -3846,17 +3844,19 @@ class EmulatorJS {
this.settingsMenu.style.display = ""; this.settingsMenu.style.display = "";
needChange = true; needChange = true;
} }
const x = this.settingsMenu.parentElement.getBoundingClientRect().x;
let height = this.elements.parent.getBoundingClientRect().height; let height = this.elements.parent.getBoundingClientRect().height;
let width = this.elements.parent.getBoundingClientRect().width; let w2 = this.settingParent.parentElement.getBoundingClientRect().width;
let settingsX = this.settingParent.getBoundingClientRect().x;
if (w2 > window.innerWidth) settingsX += (w2 - window.innerWidth);
const onTheRight = settingsX > (w2-15)/2;
if (height > 375) height = 375; if (height > 375) height = 375;
home.style['max-height'] = (height - 95) + "px"; home.style['max-height'] = (height - 95) + "px";
nested.style['max-height'] = (height - 95) + "px"; nested.style['max-height'] = (height - 95) + "px";
for (let i=0; i<menus.length; i++) { for (let i=0; i<menus.length; i++) {
menus[i].style['max-height'] = (height - 95) + "px"; menus[i].style['max-height'] = (height - 95) + "px";
} }
this.settingsMenu.classList.toggle("ejs_settings_center_left", (x < width/2) && (width < 575)); this.settingsMenu.classList.toggle("ejs_settings_center_left", !onTheRight);
this.settingsMenu.classList.toggle("ejs_settings_center_right", (x >= width/2) && (width < 575)); this.settingsMenu.classList.toggle("ejs_settings_center_right", onTheRight);
if (needChange) { if (needChange) {
this.settingsMenu.style.display = "none"; this.settingsMenu.style.display = "none";
this.settingsMenu.style.opacity = ""; this.settingsMenu.style.opacity = "";