From 399dbf2b418764d88d04469dae3aacb3983c50a4 Mon Sep 17 00:00:00 2001
From: amuthmann <amuthmann@pro-vision.de>
Date: Tue, 5 Nov 2019 23:50:46 +0100
Subject: [PATCH] Fixes #523: Add some style

---
 pwnagotchi/ui/web/static/css/style.css        |  1 +
 pwnagotchi/ui/web/static/js/viewportHeight.js | 17 +++++++++++++++++
 pwnagotchi/ui/web/templates/index.html        |  1 +
 3 files changed, 19 insertions(+)
 create mode 100644 pwnagotchi/ui/web/static/js/viewportHeight.js

diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css
index b4ce8542..f7237048 100644
--- a/pwnagotchi/ui/web/static/css/style.css
+++ b/pwnagotchi/ui/web/static/css/style.css
@@ -9,6 +9,7 @@ form {
     left: 0;
     width: 100vw;
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     display: flex;
     flex-direction: column;
 }
diff --git a/pwnagotchi/ui/web/static/js/viewportHeight.js b/pwnagotchi/ui/web/static/js/viewportHeight.js
new file mode 100644
index 00000000..ebdc4238
--- /dev/null
+++ b/pwnagotchi/ui/web/static/js/viewportHeight.js
@@ -0,0 +1,17 @@
+/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/*/
+
+var lastViewportHeight;
+
+function updateViewportSize() {
+  // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+  var vh = window.innerHeight * 0.01;
+  if (!lastViewportHeight || lastViewportHeight !== vh) {
+    // Then we set the value in the --vh custom property to the root of the document
+    document.documentElement.style.setProperty("--vh", vh + "px");
+    lastViewportHeight = vh;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  updateViewportSize();
+});
\ No newline at end of file
diff --git a/pwnagotchi/ui/web/templates/index.html b/pwnagotchi/ui/web/templates/index.html
index c8e70320..c03f550f 100644
--- a/pwnagotchi/ui/web/templates/index.html
+++ b/pwnagotchi/ui/web/templates/index.html
@@ -24,6 +24,7 @@
   </div>
 </div>
 
+<script type="text/javascript" src="/js/refresh.js"></script>
 <script type="text/javascript" src="/js/refresh.js"></script>
 
 </body>