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

35
webui/index.tmpl
View File

@ -6,9 +6,19 @@
<body> <body>
<main> <main>
{{.Menu}} <input type='checkbox' id='menu-toggle'/>
<div class='content'> <label id='menu-label' for='menu-toggle'>Menu</label>
<div class='page' id='/tunnels'> <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'> <div class='list'>
{{range $domain, $tunnel:= .Tunnels}} {{range $domain, $tunnel:= .Tunnels}}
<div class='list-item'> <div class='list-item'>
@ -34,8 +44,18 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<div class='page' id='/tokens'> <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'> <div class='list'>
{{range $token, $tokenData := .Tokens}} {{range $token, $tokenData := .Tokens}}
<div class='list-item'> <div class='list-item'>
@ -59,8 +79,18 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<div class='page' id='/users'> <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'> <div class='list'>
{{range $username, $user := .Users}} {{range $username, $user := .Users}}
<div class='list-item'> <div class='list-item'>
@ -81,6 +111,7 @@
</form> </form>
</div> </div>
</div> </div>
</div>
</div> </div>
</main> </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 { :root {
--main-color: #555555;
--background-color: #fff;
--hover-color: #ddd; --hover-color: #ddd;
} }
@ -43,18 +45,16 @@ main {
.menu-item:hover { .menu-item:hover {
background: var(--hover-color); background: var(--hover-color);
} }
.menu-item:link, .menu-item:visited { .menu-item:any-link {
color: #000; color: #000;
} }
#menu-toggle { #menu-toggle {
display: none; display: none;
} }
#menu-toggle:checked ~ .page .menu {
#menu-toggle:checked ~ .menu {
display: flex; display: flex;
} }
#menu-toggle:checked ~ #menu-label { #menu-toggle:checked ~ #menu-label {
color: #fff; color: #fff;
background: #000; background: #000;
@ -120,10 +120,16 @@ main {
.page { .page {
display: none; display: none;
flex-direction: column;
} }
.content *:target { main *:target {
display: block; display: flex;
}
.active-tab.menu-item:any-link {
color: #fff;
background: #000;
} }
@ -143,6 +149,10 @@ main {
position: static; position: static;
} }
.page {
flex-direction: row;
}
.content { .content {
width: 900px; width: 900px;
} }