Locutus/locutus
2
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix window height for mobile devices

Browse Source
This commit is contained in:
Lorenz Stechauner
2022-08-28 11:24:13 +02:00
parent c90de1a895
commit 753ecec0b6
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/main.ts
View File

@ -2,6 +2,13 @@
import * as Locutus from "locutus"; import * as Locutus from "locutus";
function resize() {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
}
resize();
window.addEventListener("resize", resize);
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
// Remove <noscript> tags // Remove <noscript> tags
for (const noscript of document.getElementsByTagName("noscript")) { for (const noscript of document.getElementsByTagName("noscript")) {

14
www/res/styles/styles.css
View File

@ -1,5 +1,5 @@
* { html {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
--bg-win: rgba(192, 192, 192, 0.25); --bg-win: rgba(192, 192, 192, 0.25);
--bg: rgba(224, 224, 224, 0.5); --bg: rgba(224, 224, 224, 0.5);
@ -10,14 +10,14 @@
noscript { noscript {
display: block; display: block;
text-align: center; text-align: center;
margin: 20vh auto 1em auto; margin: calc(var(--vh, 1vh) * 20) auto 1em auto;
max-width: 650px; max-width: 650px;
padding: 2em !important; padding: 2em !important;
} }
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100);
background-image: url("/res/images/background.jpg"); background-image: url("/res/images/background.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -28,12 +28,12 @@ div#wrapper {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 1em; padding: 1em;
height: calc(100vh - var(--footer-height)); height: calc(var(--vh, 1vh) * 100 - var(--footer-height));
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
div#wrapper { div#wrapper {
height: 100vh; height: calc(var(--vh, 1vh) * 100);
} }
} }
@ -74,7 +74,7 @@ div#windows > * {
div.window-login, div.window-login,
div.window-welcome { div.window-welcome {
max-width: 650px; max-width: 650px;
margin: calc(max(25vh, 8em) - 8em) auto 1em auto; margin: calc(max(var(--vh, 1vh) * 25, 8em) - 8em) auto 1em auto;
} }
div.window-login h1, div.window-login h1,
@ -99,7 +99,7 @@ footer {
footer { footer {
flex-direction: column; flex-direction: column;
} }
* { html {
--footer-height: 4em; --footer-height: 4em;
} }
} }