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. * 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 * Eh buttons aren't actually doing anything apparently (when hit by
keyboard). keyboard).
* Set Cache-Control Max-Age * See if WebSockets tunnel correctly

9
webui/confirm.tmpl
View File

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

8
webui/index.tmpl
View File

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

11
webui/login.tmpl
View File

@ -2,13 +2,22 @@
<html> <html>
<head> <head>
{{.Head}} {{.Head}}
<style>
.dialog {
display: block;
}
</style>
</head> </head>
<body> <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> <label for="token">Token:</label>
<input type="password" id="token" name="access_token"> <input type="password" id="token" name="access_token">
<button class='button green-button' type="submit">Login</button> <button class='button green-button' type="submit">Login</button>
</form> </form>
</div>
</body> </body>
</html> </html>

58
webui/styles.css
View File

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