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

Highlight selected page

Browse Source 
Needed to change HTML architecture to inline multiple independent
copies of the menu. There might be a cleaner way to do this, but
it will work for now.
This commit is contained in:
Anders Pitman 2020-10-15 13:01:15 -06:00
parent 102bb152de
commit 7df93c0821
4 changed files with 106 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui_handler.go
View File

@ -28,6 +28,7 @@ type IndexData struct {
Tunnels map[string]Tunnel
Tokens map[string]TokenData
Users map[string]User
IsAdmin bool
}
type TunnelsData struct {
@ -217,6 +218,7 @@ func (h *WebUiHandler) handleWebUiRequest(w http.ResponseWriter, r *http.Request
Tunnels: h.api.GetTunnels(tokenData),
Tokens: tokens,
Users: users,
IsAdmin: user.IsAdmin,
}
tmpl.Execute(w, indexData)

35
webui/index.tmpl
View File

@ -6,9 +6,19 @@
<body>
<main>
{{.Menu}}
<div class='content'>
<input type='checkbox' id='menu-toggle'/>
<label id='menu-label' for='menu-toggle'>Menu</label>
<div class='page' id='/tunnels'>
<div class='menu'>
<a class='menu-item active-tab' href='/#/tunnels'>Tunnels</a>
<a class='menu-item' href='/#/tokens'>Tokens</a>
{{if .IsAdmin}}
<a class='menu-item' href='/#/users'>Users</a>
{{end}}
<a class='menu-item' href='/confirm-logout'>Logout</a>
</div>
<div class='content'>
<div class='list'>
{{range $domain, $tunnel:= .Tunnels}}
<div class='list-item'>
@ -34,8 +44,18 @@
</form>
</div>
</div>
</div>
<div class='page' id='/tokens'>
<div class='menu'>
<a class='menu-item' href='/#/tunnels'>Tunnels</a>
<a class='menu-item active-tab' href='/#/tokens'>Tokens</a>
{{if .IsAdmin}}
<a class='menu-item' href='/#/users'>Users</a>
{{end}}
<a class='menu-item' href='/confirm-logout'>Logout</a>
</div>
<div class='content'>
<div class='list'>
{{range $token, $tokenData := .Tokens}}
<div class='list-item'>
@ -59,8 +79,18 @@
</form>
</div>
</div>
</div>
<div class='page' id='/users'>
<div class='menu'>
<a class='menu-item' href='/#/tunnels'>Tunnels</a>
<a class='menu-item' href='/#/tokens'>Tokens</a>
{{if .IsAdmin}}
<a class='menu-item' href='/#/users'>Users</a>
{{end}}
<a class='menu-item' href='/confirm-logout'>Logout</a>
</div>
<div class='content'>
<div class='list'>
{{range $username, $user := .Users}}
<div class='list-item'>
@ -81,6 +111,7 @@
</form>
</div>
</div>
</div>
</div>
</main>

10
webui/menu.tmpl
View File

@ -1,10 +0,0 @@
<input type='checkbox' id='menu-toggle'/>
<label id='menu-label' for='menu-toggle'>Menu</label>
<div class='menu'>
<a class='menu-item' href='/#/tunnels'>Tunnels</a>
<a class='menu-item' href='/#/tokens'>Tokens</a>
{{if .IsAdmin}}
<a class='menu-item' href='/#/users'>Users</a>
{{end}}
<a class='menu-item' href='/confirm-logout'>Logout</a>
</div>

22
webui/styles.css
View File

@ -1,4 +1,6 @@
:root {
--main-color: #555555;
--background-color: #fff;
--hover-color: #ddd;
}
@ -43,18 +45,16 @@ main {
.menu-item:hover {
background: var(--hover-color);
}
.menu-item:link, .menu-item:visited {
.menu-item:any-link {
color: #000;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked ~ .menu {
#menu-toggle:checked ~ .page .menu {
display: flex;
}
#menu-toggle:checked ~ #menu-label {
color: #fff;
background: #000;
@ -120,10 +120,16 @@ main {
.page {
display: none;
flex-direction: column;
}
.content *:target {
display: block;
main *:target {
display: flex;
}
.active-tab.menu-item:any-link {
color: #fff;
background: #000;
}
@ -143,6 +149,10 @@ main {
position: static;
}
.page {
flex-direction: row;
}
.content {
width: 900px;
}