From f952bcd2987a66e80ca882871cb67e5cf7f8aa9a Mon Sep 17 00:00:00 2001 From: amuthmann Date: Tue, 5 Nov 2019 23:17:36 +0100 Subject: [PATCH 1/4] Fixes #523: Add some style --- pwnagotchi/ui/web/static/css/style.css | 81 +++++++++++++++++--------- pwnagotchi/ui/web/templates/index.html | 25 ++++---- 2 files changed, 66 insertions(+), 40 deletions(-) diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css index 060a984e..b4ce8542 100644 --- a/pwnagotchi/ui/web/static/css/style.css +++ b/pwnagotchi/ui/web/static/css/style.css @@ -1,42 +1,67 @@ -.block { - -webkit-appearance: button; - -moz-appearance: button; - appearance: button; - - display: block; - cursor: pointer; - text-align: center; +form { + margin-block-end: 0; } -img#ui { - width:100%; -} -.full { +.content { position: absolute; - top:0; - left:0; - width:100%; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; } +/** + * make sure image is displayed without any blur + */ .pixelated { - image-rendering:optimizeSpeed; /* Legal fallback */ - image-rendering:-moz-crisp-edges; /* Firefox */ - image-rendering:-o-crisp-edges; /* Opera */ - image-rendering:-webkit-optimize-contrast; /* Safari */ - image-rendering:optimize-contrast; /* CSS3 Proposed */ - image-rendering:crisp-edges; /* CSS4 Proposed */ - image-rendering:pixelated; /* CSS4 Proposed */ - -ms-interpolation-mode:nearest-neighbor; /* IE8+ */ + image-rendering: optimizeSpeed; /* Legal fallback */ + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast; /* Safari */ + image-rendering: optimize-contrast; /* CSS3 Proposed */ + image-rendering: crisp-edges; /* CSS4 Proposed */ + image-rendering: pixelated; /* CSS4 Proposed */ + -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ } -form.action { - display:inline; +.image-wrapper { + flex: 1; + position: relative; +} + +.ui-image { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + max-width: 100vw; + height: 100%; + object-fit: contain; + object-position: 0 0; +} + +.buttons-wrapper { + flex-shrink: 0; + display: flex; + flex-wrap: wrap; + padding: 0 16px; +} + +.button { + border: 1px solid black; + border-radius: 4px; + font-size: 2em; + background: #f8b506; + margin: 16px; } div.status { position: absolute; - top:0; - left:0; - width:100%; + top: 0; + left: 0; + width: 100%; } \ No newline at end of file diff --git a/pwnagotchi/ui/web/templates/index.html b/pwnagotchi/ui/web/templates/index.html index 50ec1e25..c8e70320 100644 --- a/pwnagotchi/ui/web/templates/index.html +++ b/pwnagotchi/ui/web/templates/index.html @@ -1,26 +1,27 @@ - {{ title }} - + {{ title }} + -
- -
-
- +
+
+ +
+
- - + +
- - - + + +
+
From 399dbf2b418764d88d04469dae3aacb3983c50a4 Mon Sep 17 00:00:00 2001 From: amuthmann Date: Tue, 5 Nov 2019 23:50:46 +0100 Subject: [PATCH 2/4] 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 @@
+ From 337ebd6f9ff8f188245f777761b6d182cfd8faf5 Mon Sep 17 00:00:00 2001 From: Alex Muthmann Date: Wed, 6 Nov 2019 00:06:19 +0100 Subject: [PATCH 3/4] Add some style --- pwnagotchi/ui/web/static/css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css index f7237048..86610653 100644 --- a/pwnagotchi/ui/web/static/css/style.css +++ b/pwnagotchi/ui/web/static/css/style.css @@ -42,7 +42,7 @@ form { max-width: 100vw; height: 100%; object-fit: contain; - object-position: 0 0; + object-position: 50% 0; } .buttons-wrapper { @@ -65,4 +65,4 @@ div.status { top: 0; left: 0; width: 100%; -} \ No newline at end of file +} From f83c820b382416c948f40b1074c83ec4182c7e36 Mon Sep 17 00:00:00 2001 From: Alex Muthmann Date: Wed, 6 Nov 2019 11:28:23 +0100 Subject: [PATCH 4/4] Fix missing js --- pwnagotchi/ui/web/templates/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pwnagotchi/ui/web/templates/index.html b/pwnagotchi/ui/web/templates/index.html index c03f550f..cc4d87a9 100644 --- a/pwnagotchi/ui/web/templates/index.html +++ b/pwnagotchi/ui/web/templates/index.html @@ -25,7 +25,7 @@ - + - \ No newline at end of file +