fix gui positioning with navbar (fixes for mobile)

fix PrismarineJS#302
zardoy · Sep 18, 2023 · b19cab6 · b19cab6
1 parent 9428290
commit b19cab6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 15 deletions.
diff --git a/src/menus/components/health_bar.js b/src/menus/components/health_bar.js
@@ -14,7 +14,7 @@ class HealthBar extends LitElement {
   static get styles () {
     return css`
       .health {
-        position: absolute;
+        position: fixed;
         display: flex;
         flex-direction: row;
         left: calc(50% - 91px);

diff --git a/src/menus/components/hotbar.js b/src/menus/components/hotbar.js
@@ -10,7 +10,7 @@ class Hotbar extends LitElement {
   static get styles () {
     return css`
       .hotbar {
-        position: absolute;
+        position: fixed;
         bottom: ${unsafeCSS(isProbablyIphone() ? '40px' : '0')};
         left: 50%;
         transform: translate(-50%);

diff --git a/src/menus/hud.js b/src/menus/hud.js
@@ -17,12 +17,12 @@ class Hud extends LitElement {
   static get styles () {
     return css`
       :host {
-        position: absolute;
+        position: fixed;
         top: 0;
         left: 0;
         z-index: -2;
         width: 100%;
-        height: 100%;
+        height: 100vh;
         touch-action: none;
       }
 
@@ -31,15 +31,15 @@ class Hud extends LitElement {
         height: 16px;
         background: url('${unsafeCSS(guiIcons1_17_1)}');
         background-size: 256px;
-        position: absolute;
+        position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         z-index: 2;
       }
 
       #xp-label {
-        position: absolute;
+        position: fixed;
         top: -8px;
         left: 50%;
         transform: translate(-50%);
@@ -51,7 +51,7 @@ class Hud extends LitElement {
       }
 
       #xp-bar-bg {
-        position: absolute;
+        position: fixed;
         left: 50%;
         bottom: 24px;
         transform: translate(-50%);
@@ -73,7 +73,7 @@ class Hud extends LitElement {
       .mobile-top-btns {
         display: none;
         flex-direction: row;
-        position: absolute;
+        position: fixed;
         top: 0;
         left: 50%;
         transform: translate(-50%);
@@ -319,17 +319,17 @@ class Hud extends LitElement {
   render () {
     return html`
       <div class="mobile-top-btns" id="mobile-top">
-        <button class="debug-btn" @click=${(e) => {
+        <button class="debug-btn" @pointerdown=${(e) => {
         window.dispatchEvent(new MouseEvent('mousedown', { button: 1, }))
       }}>Select</button>
-        <button class="debug-btn" @click=${(e) => {
+        <button class="debug-btn" @pointerdown=${(e) => {
         this.shadowRoot.getElementById('debug-overlay').showOverlay = !this.shadowRoot.getElementById('debug-overlay').showOverlay
       }}>F3</button>
-        <button class="chat-btn" @click=${(e) => {
+        <button class="chat-btn" @pointerdown=${(e) => {
         e.stopPropagation()
         this.shadowRoot.querySelector('#chat').enableChat()
       }}></button>
-        <button class="pause-btn" @click=${(e) => {
+        <button class="pause-btn" @pointerdown=${(e) => {
         e.stopPropagation()
         showModal(document.getElementById('pause-screen'))
       }}></button>

diff --git a/src/menus/play_screen.js b/src/menus/play_screen.js
@@ -17,7 +17,7 @@ class PlayScreen extends LitElement {
       }
 
       .edit-boxes {
-        position: absolute;
+        position: fixed;
         top: 59px;
         left: 50%;
         display: flex;

diff --git a/src/styles.css b/src/styles.css
@@ -64,7 +64,7 @@ body {
 }
 
 canvas {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
 	height: 100%;
@@ -75,7 +75,7 @@ canvas {
 }
 
 #ui-root {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   transform-origin: top left;