diff --git a/ui_handler.go b/ui_handler.go index de1c17a..d2d82d2 100644 --- a/ui_handler.go +++ b/ui_handler.go @@ -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) diff --git a/webui/index.tmpl b/webui/index.tmpl index 2e43c72..4f07dd1 100644 --- a/webui/index.tmpl +++ b/webui/index.tmpl @@ -6,79 +6,110 @@
- {{.Menu}} -
+ + +
-
- {{range $domain, $tunnel:= .Tunnels}} -
-
- {{$domain}}:{{$tunnel.TunnelPort}} -> {{$tunnel.ClientName}}:{{$tunnel.ClientPort}} -
- - - -
+
+ Tunnels + Tokens + {{if .IsAdmin}} + Users {{end}} + Logout
- -
-
- - - - - - - -
+
+
+ {{range $domain, $tunnel:= .Tunnels}} +
+
+ {{$domain}}:{{$tunnel.TunnelPort}} -> {{$tunnel.ClientName}}:{{$tunnel.ClientPort}} +
+ + + +
+ {{end}} +
+ +
+
+ + + + + + + +
+
-
- {{range $token, $tokenData := .Tokens}} -
- {{$token}} ({{$tokenData.Owner}}) - - - -
+
+ Tunnels + Tokens + {{if .IsAdmin}} + Users {{end}} + Logout
+
+
+ {{range $token, $tokenData := .Tokens}} +
+ {{$token}} ({{$tokenData.Owner}}) + + + +
+ {{end}} +
-
-
- - - -
+
+
+ + + +
+
-
- {{range $username, $user := .Users}} -
- {{$username}} - - - -
+
+ Tunnels + Tokens + {{if .IsAdmin}} + Users {{end}} + Logout
-
-
- - - - - -
+
+
+ {{range $username, $user := .Users}} +
+ {{$username}} + + + +
+ {{end}} +
+
+
+ + + + + +
+
diff --git a/webui/menu.tmpl b/webui/menu.tmpl deleted file mode 100644 index aa1e464..0000000 --- a/webui/menu.tmpl +++ /dev/null @@ -1,10 +0,0 @@ - - -
- Tunnels - Tokens - {{if .IsAdmin}} - Users - {{end}} - Logout -
diff --git a/webui/styles.css b/webui/styles.css index d3cdcbe..49ddda1 100644 --- a/webui/styles.css +++ b/webui/styles.css @@ -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; }