IntenseWebs/boringproxy
3
0
Fork 0
mirror of https://github.com/boringproxy/boringproxy.git synced 2025-02-25 18:55:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Clean up UI a ton

Browse Source
This commit is contained in:
Anders Pitman 2020-10-19 12:25:04 -06:00
parent 84e00161bd
commit 80d7f2115b
5 changed files with 77 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
todo.md
View File

@ -7,4 +7,4 @@
* Wrapping labels in buttons and adding a bit of CSS seems to do the trick.
* Eh buttons aren't actually doing anything apparently (when hit by
keyboard).
* Set Cache-Control Max-Age
* See if WebSockets tunnel correctly

9
webui/confirm.tmpl
View File

@ -2,11 +2,19 @@
<html>
<head>
{{.Head}}
<style>
.dialog {
display: block;
}
</style>
</head>
<body>
<main>
<div class='dialog'>
<a href="{{.CancelUrl}}" class='dialog__overlay'></a>
<div class='dialog__content'>
<p>
{{.Message}}
</p>
@ -19,6 +27,7 @@
</a>
</div>
</div>
</div>
</main>
</body>
</html>

8
webui/index.tmpl
View File

@ -33,11 +33,11 @@
</div>
<input autocomplete='off' type='checkbox' id='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}'>
<div class='confirm-dialog'>
<label for='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}' class='confirm-dialog__overlay'></label>
<div class='dialog'>
<label for='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}' class='dialog__overlay'></label>
<div class='confirm-dialog__content'>
<p class='confirm-dialog__text'>
<div class='dialog__content'>
<p class='dialog__text'>
Are you sure you want to delete {{$domain}}?
</p>
<div class='button-row'>

11
webui/login.tmpl
View File

@ -2,13 +2,22 @@
<html>
<head>
{{.Head}}
<style>
.dialog {
display: block;
}
</style>
</head>
<body>
<form class='dialog' action="/login" method="GET">
<div class='dialog'>
<div class='dialog__overlay'></div>
<form class='dialog__content' action="/login" method="GET">
<label for="token">Token:</label>
<input type="password" id="token" name="access_token">
<button class='button green-button' type="submit">Login</button>
</form>
</div>
</body>
</html>

58
webui/styles.css
View File

@ -2,28 +2,41 @@
--main-color: #555555;
--background-color: #fff;
--hover-color: #ddd;
--menu-label-height: 60px;
}
* {
box-sizing: border-box;
}
html {
}
body {
font-family: Helvetica;
display: flex;
justify-content: center;
margin: 0;
}
main {
max-width: 900px;
width: 100%;
}
#menu-label {
position: fixed;
z-index: 1000;
width: 100vw;
height: var(--menu-label-height);
line-height: var(--menu-label-height);
color: var(--background-color);
background: var(--main-color);
font-size: 18px;
font-weight: bold;
display: block;
/*width: 100%;*/
border: 2px solid var(--main-color);
/*border: 2px solid var(--main-color);*/
cursor: pointer;
padding: .7em;
padding: 0 .7em;
user-select: none;
}
#menu-label:hover {
@ -33,9 +46,11 @@ main {
}
.menu {
position: fixed;
z-index: 1000;
top: var(--menu-label-height);
display: none;
flex-direction: column;
position: absolute;
background: #fff;
border: 1px solid var(--main-color);
/*min-width: 256px;*/
@ -105,13 +120,6 @@ main {
justify-content: center;
}
.dialog {
margin: 20px;
padding: 20px;
font-size: 18px;
border: 1px solid black;
}
.list {
display: flex;
flex-direction: column;
@ -121,6 +129,8 @@ main {
padding: 5px;
border-bottom: 1px solid var(--main-color);
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
justify-content: space-between;
align-items: center;
}
@ -130,6 +140,12 @@ main {
.tunnel-adder {
padding: 5px;
display: flex;
}
.token-adder {
padding: 5px;
display: flex;
}
.token {
@ -137,6 +153,7 @@ main {
}
.page {
margin-top: var(--menu-label-height);
display: none;
flex-direction: column;
}
@ -150,10 +167,10 @@ main *:target {
display: flex;
}
.confirm-dialog {
.dialog {
display: none;
}
.confirm-dialog__overlay {
.dialog__overlay {
position: fixed;
top: 0;
left: 0;
@ -162,7 +179,7 @@ main *:target {
background-color: rgba(0, 0, 0, .5);
z-index: 1000;
}
.confirm-dialog__content {
.dialog__content {
position: fixed;
top: 50%;
left: 50%;
@ -177,7 +194,7 @@ main *:target {
#toggle-tunnel-delete-dialog-{{$tunnel.CssId}} {
display: none;
}
#toggle-tunnel-delete-dialog-{{$tunnel.CssId}}:checked + .confirm-dialog {
#toggle-tunnel-delete-dialog-{{$tunnel.CssId}}:checked + .dialog {
display: block;
}
@ -189,16 +206,17 @@ main *:target {
left: -999em;
background: url("/delete-tunnel?domain={{$domain}}");
}
#toggle-tunnel-hide-deleted-{{$tunnel.CssId}}:checked ~ .confirm-dialog {
#toggle-tunnel-hide-deleted-{{$tunnel.CssId}}:checked ~ .dialog {
display: none;
}
{{end}}
@media (min-width: 900px) {
@media (min-width: 640px) {
main {
display: flex;
justify-content: flex-start;
width: 900px;
}
#menu-label {
@ -211,10 +229,12 @@ main *:target {
}
.page {
margin-top: auto;
flex-direction: row;
width: 100%;
}
.content {
width: 900px;
width: 100%;
}
}