From cdf61c9d5798250862f87de937220ccdd91ec16b Mon Sep 17 00:00:00 2001 From: firebingo Date: Thu, 13 Sep 2018 20:30:27 -0700 Subject: [PATCH] Dumb html standard not assuming px thing. --- Css/main.css | 10 ++++++---- Js/Player.js | 4 ++-- Player.html | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/Css/main.css b/Css/main.css index 9a0653d..94c7144 100644 --- a/Css/main.css +++ b/Css/main.css @@ -57,7 +57,9 @@ to { transform: translate(0, -5px); } } -body { margin: 0; } +html { height: 100%; } + +body { margin: 0; height: 100%; } .flex-grow { flex-grow: 1; } @@ -67,7 +69,7 @@ body { margin: 0; } #app-container { position: relative; width: 1334px; height: 750px; display: flex; justify-content: center; align-items: center; } -#parent-container { display: flex; flex-direction: column; align-items: center; } +#parent-container { height: 100%; display: flex; flex-direction: column; align-items: center; } #text-container { color: white; position: absolute; margin: auto; height: 750px; width: 1334px; font-family: 'FOT-RodinNTLGPro'; } @@ -111,9 +113,9 @@ body { margin: 0; } #dialog-scroll img { height: 35px; } -#title-container { margin-bottom: 2px; } +#title-container { padding: 2px 0; } -#other-controls-container { display: flex; width: 550px; justify-content: center; align-items: center; z-index: 10; } +#other-controls-container { padding-bottom: 4px; display: flex; width: 550px; justify-content: center; align-items: center; z-index: 10; } #select-mission { min-width: 0; } diff --git a/Js/Player.js b/Js/Player.js index ebba14a..5f24332 100644 --- a/Js/Player.js +++ b/Js/Player.js @@ -1504,8 +1504,8 @@ class Player { //Sizes the canvas/pixi's renderer to the actual render resolution this.pixi.app.renderer.resize(res.width * window.devicePixelRatio, res.height * window.devicePixelRatio); //Css size overwrites the display size of the canvas - this.pixi.app.view.style.width = res.width; - this.pixi.app.view.style.height = res.height; + this.pixi.app.view.style.width = res.width + "px"; + this.pixi.app.view.style.height = res.height + "px"; //Transform the text container to be the right scale, browser handles all dpi stuff for html elements itself document.getElementById('text-container').style.cssText = `transform: scale(${newScale})`; } diff --git a/Player.html b/Player.html index 9fb4a98..32a0a3a 100644 --- a/Player.html +++ b/Player.html @@ -1,4 +1,4 @@ - +