scifijunkie/pwnagotchi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #535 from deveth0/deveth0-523-webui

Browse Source 
#523: Add some styling to webui
This commit is contained in:
evilsocket 2019-11-06 11:31:40 +01:00 committed by GitHub
commit 15fa7039e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 87 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
pwnagotchi/ui/web/static/css/style.css
View File

@ -1,24 +1,22 @@
.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%;
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 */
@ -30,8 +28,36 @@ img#ui {
-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 {

17
pwnagotchi/ui/web/static/js/viewportHeight.js Normal file
View File

@ -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();
});

16
pwnagotchi/ui/web/templates/index.html
View File

@ -4,26 +4,28 @@
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
</head>
<body>
<div class="full pixelated">
<img src="/ui" id="ui"/>
<br/>
<hr/>
<div class="content">
<div class="image-wrapper">
<img class="ui-image pixelated" src="/ui" id="ui"/>
</div>
<div class="buttons-wrapper">
<form class="action" method="POST" action="/shutdown"
onsubmit="return confirm('This will halt the unit, continue?');">
<input style="display:inline;" type="submit" class="block" value="Shutdown"/>
<input type="submit" class="button" value="Shutdown"/>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form>
<form class="action" method="POST" action="/restart"
onsubmit="return confirm('This will restart the service in {{ other_mode }} mode, continue?');">
<input style="display:inline;" type="submit" class="block" value="Restart in {{ other_mode }} mode"/>
<input type="submit" class="button" value="Restart in {{ other_mode }} mode"/>
<input type="hidden" name="mode" value="{{ other_mode }}"/>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form>
</div>
</div>
<script type="text/javascript" src="/js/refresh.js"></script>
<script type="text/javascript" src="/js/viewportHeight.js"></script>
</body>
</html>