ethanaobrien/EmulatorJS
1
0
Fork 0
mirror of https://github.com/EmulatorJS/EmulatorJS.git synced 2024-09-20 02:46:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix #735

Browse source
This commit is contained in:
Ethan O'Brien 2024-01-16 12:41:02 -06:00
parent fe4af9fde2
commit 3dfe8fca8c
2 changed files with 198 additions and 217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
data/emulator.css
View file

@ -301,23 +301,22 @@
.ejs_svg_rotate { .ejs_svg_rotate {
transform: rotate(90deg); transform: rotate(90deg);
} }
@media (max-width: 574px) { .ejs_small_screen .ejs_settings_parent::after {
.ejs_settings_parent::after {
right: 15px; right: 15px;
} }
.ejs_settings_center_right { .ejs_small_screen .ejs_settings_center_right {
right: -35% right: -35%
} }
.ejs_settings_center_left { .ejs_small_screen .ejs_settings_center_left {
right: -135% right: -135%
} }
.ejs_settings_center_right::after { .ejs_small_screen .ejs_settings_center_right::after {
right: 25%; right: 25%;
} }
.ejs_settings_center_left::after { .ejs_small_screen .ejs_settings_center_left::after {
left: 25%; left: 25%;
} }
.ejs_menu_bar { .ejs_small_screen .ejs_menu_bar {
transition: opacity .4s ease-in-out,transform .4s ease-in-out; transition: opacity .4s ease-in-out,transform .4s ease-in-out;
position: absolute; position: absolute;
transform: translate(-50%,0); transform: translate(-50%,0);
@ -331,13 +330,13 @@
z-index: 9999; z-index: 9999;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
} }
.ejs_menu_bar_hidden { .ejs_small_screen .ejs_menu_bar_hidden {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transform: translate(-50%, 100%); transform: translate(-50%, 100%);
} }
.ejs_menu_button { .ejs_small_screen .ejs_menu_button {
width: 135px; width: 135px;
margin: 0px; margin: 0px;
margin-left: 2px!important; margin-left: 2px!important;
@ -353,16 +352,16 @@
padding: 7px; padding: 7px;
position: relative; position: relative;
transition: all .3s ease; transition: all .3s ease;
} }
.ejs_menu_button:hover { .ejs_small_screen .ejs_menu_button:hover {
background: rgba(var(--ejs-primary-color),1); background: rgba(var(--ejs-primary-color),1);
color: #fff; color: #fff;
} }
.ejs_menu_button svg { .ejs_small_screen .ejs_menu_button svg {
float: left; float: left;
transition: transform .3s ease; transition: transform .3s ease;
} }
.ejs_menu_text { .ejs_small_screen .ejs_menu_text {
position: static; position: static;
color: #fff; color: #fff;
background: 0 0; background: 0 0;
@ -370,39 +369,38 @@
padding: 0; padding: 0;
transform: scale(.8)!important; transform: scale(.8)!important;
font-size: 12px; font-size: 12px;
}
.ejs_menu_bar_spacer {
display:none;
}
.ejs_volume_parent span {
display: none;
}
.ejs_volume_parent button {
width: 30px;
}
} }
@media (min-width: 575px) { .ejs_small_screen .ejs_menu_bar_spacer {
.ejs_menu_bar_hidden { display:none;
}
.ejs_small_screen .ejs_volume_parent span {
display: none;
}
.ejs_small_screen .ejs_volume_parent button {
width: 30px;
}
.ejs_big_screen .ejs_menu_bar_hidden {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transform: translateY(100%); transform: translateY(100%);
} }
.ejs_settings_parent { .ejs_big_screen .ejs_settings_parent {
right: -3px; right: -3px;
} }
.ejs_settings_parent::after { .ejs_big_screen .ejs_settings_parent::after {
right: 15px; right: 15px;
} }
.ejs_settings_text { .ejs_big_screen .ejs_settings_text {
display: none; display: none;
} }
.ejs_menu_bar_spacer { .ejs_big_screen .ejs_menu_bar_spacer {
flex:1; flex:1;
} }
.ejs_menu_button svg { .ejs_big_screen .ejs_menu_button svg {
transition: transform .3s ease; transition: transform .3s ease;
} }
.ejs_menu_button { .ejs_big_screen .ejs_menu_button {
width: auto; width: auto;
margin: auto; margin: auto;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
@ -418,24 +416,24 @@
padding: 7px; padding: 7px;
position: relative; position: relative;
transition: all .3s ease; transition: all .3s ease;
} }
.ejs_menu_button:hover { .ejs_big_screen .ejs_menu_button:hover {
background: rgba(var(--ejs-primary-color),1); background: rgba(var(--ejs-primary-color),1);
color: #fff; color: #fff;
} }
.ejs_menu_button:hover .ejs_menu_text { .ejs_big_screen .ejs_menu_button:hover .ejs_menu_text {
transform: translate(0,0) scale(1); transform: translate(0,0) scale(1);
opacity: 1; opacity: 1;
} }
.ejs_menu_text_right { .ejs_big_screen .ejs_menu_text_right {
right: 0; right: 0;
left: auto !important; left: auto !important;
} }
.ejs_menu_text { .ejs_big_screen .ejs_menu_text {
left: 0; left: 0;
background: rgba(255,255,255,0.9); background: rgba(255,255,255,0.9);
border-radius: 3px; border-radius: 3px;
@ -455,9 +453,9 @@
transition: transform .2s .1s ease,opacity .2s .1s ease; transition: transform .2s .1s ease,opacity .2s .1s ease;
white-space: nowrap; white-space: nowrap;
z-index: 2; z-index: 2;
} }
.ejs_menu_text::before { .ejs_big_screen .ejs_menu_text::before {
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid rgba(255,255,255,0.9); border-top: 4px solid rgba(255,255,255,0.9);
@ -469,13 +467,13 @@
transform: translateX(-50%); transform: translateX(-50%);
width: 0; width: 0;
z-index: 2; z-index: 2;
} }
.ejs_menu_text_right::before { .ejs_big_screen .ejs_menu_text_right::before {
left: auto !important; left: auto !important;
right: 16px; right: 16px;
transform: translateX(50%) !important; transform: translateX(50%) !important;
} }
.ejs_menu_bar { .ejs_big_screen .ejs_menu_bar {
padding: 15px 10px 10px; padding: 15px 10px 10px;
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7));
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
@ -491,9 +489,9 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
text-align: center; text-align: center;
}
} }
.ejs_menu_bar svg { .ejs_menu_bar svg {
display: block; display: block;
fill: currentColor; fill: currentColor;
@ -1169,15 +1167,11 @@
border: 0; border: 0;
} }
@media (max-width: 574px) { .ejs_small_screen .ejs_volume_parent input[type='range'] {
.ejs_volume_parent input[type='range'] {
width: 100%; width: 100%;
}
} }
@media (min-width: 575px) { .ejs_big_screen .ejs_volume_parent {
.ejs_volume_parent {
max-width: 110px; max-width: 110px;
}
} }
.ejs_volume_parent { .ejs_volume_parent {
align-items: center; align-items: center;
@ -1185,23 +1179,6 @@
flex: 1; flex: 1;
position: relative; position: relative;
} }
/*
@media (max-width: 574px) {
.ejs_volume_parent {
padding-right: 0px;
}
.ejs_volume_parent input[type='range'] {
display: none;
}
}
@media (min-width: 575px) {
.ejs_volume_parent {
padding-right: 15px;
}
.ejs_volume_parent input[type='range'] {
display: block;
}
}*/
.ejs_volume_parent { .ejs_volume_parent {
padding-right: 15px; padding-right: 15px;
} }

6
data/emulator.js
View file

@ -3619,9 +3619,13 @@ class EmulatorJS {
}, 250) }, 250)
} }
} }
const positionInfo = this.elements.parent.getBoundingClientRect();
this.game.parentElement.classList.toggle("ejs_small_screen", positionInfo.width <= 575);
//This wouldnt work using :not()... strange.
this.game.parentElement.classList.toggle("ejs_big_screen", positionInfo.width > 575);
if (!this.Module) return; if (!this.Module) return;
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
const positionInfo = this.elements.parent.getBoundingClientRect();
const width = positionInfo.width * dpr; const width = positionInfo.width * dpr;
const height = (positionInfo.height * dpr); const height = (positionInfo.height * dpr);
this.Module.setCanvasSize(width, height); this.Module.setCanvasSize(width, height);