diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css index 060a984e..86610653 100644 --- a/pwnagotchi/ui/web/static/css/style.css +++ b/pwnagotchi/ui/web/static/css/style.css @@ -1,42 +1,68 @@ -.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; + height: calc(var(--vh, 1vh) * 100); + 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: 50% 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%; -} \ No newline at end of file + top: 0; + left: 0; + width: 100%; +} 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 50ec1e25..cc4d87a9 100644 --- a/pwnagotchi/ui/web/templates/index.html +++ b/pwnagotchi/ui/web/templates/index.html @@ -1,29 +1,31 @@ - {{ title }} - + {{ title }} + -
- -
-
- +
+
+ +
+
- - + +
- - - + + +
+
+ - \ No newline at end of file +