chore(webui): switch to a homegrown css
This commit is contained in:
parent
26c5f9c5c7
commit
2da9d222b6
GPG key ID:
F92E51B86E07177E
10 changed files with 566 additions and 276 deletions
|
|
@ -1,62 +1,60 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive" id="main">
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>User Accounts</a>
|
||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New User Account</a>
|
||||
</div>
|
||||
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Created</th>
|
||||
<th>Last Login</th>
|
||||
<th>Is Admin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Accounts }}
|
||||
<tr>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .Username }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .Created }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .LastLogin }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .IsAdmin }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
|
||||
<form action="/accounts" enctype="multipart/form-data" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if or .UsernameDuplicate .UsernameInvalid }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
type="text"
|
||||
value="{{ .Username }}">
|
||||
<label for="username">Username</label>
|
||||
{{ if .UsernameDuplicate }}
|
||||
<span class="error">This username already exist</span>
|
||||
{{ else if .UsernameInvalid }}
|
||||
<span class="error">Invalid username</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="field label">
|
||||
<label>
|
||||
<input {{ if .IsAdmin }} checked{{ end }}
|
||||
name="is-admin"
|
||||
type="checkbox"
|
||||
value="{{ .IsAdmin }}" />
|
||||
<span>Is Admin</span>
|
||||
</label>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="submit">Create User Account</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>User Accounts</a>
|
||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New User Account</a>
|
||||
</div>
|
||||
</main>
|
||||
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Created</th>
|
||||
<th>Last Login</th>
|
||||
<th>Is Admin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Accounts }}
|
||||
<tr>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .Username }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .Created }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .LastLogin }}</a></td>
|
||||
<td><a href="/accounts/{{ .Id }}">{{ .IsAdmin }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
|
||||
<form action="/accounts" enctype="multipart/form-data" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if or .UsernameDuplicate .UsernameInvalid }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
type="text"
|
||||
value="{{ .Username }}">
|
||||
<label for="username">Username</label>
|
||||
{{ if .UsernameDuplicate }}
|
||||
<span class="error">This username already exist</span>
|
||||
{{ else if .UsernameInvalid }}
|
||||
<span class="error">Invalid username</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="field label">
|
||||
<label>
|
||||
<input {{ if .IsAdmin }} checked{{ end }}
|
||||
name="is-admin"
|
||||
type="checkbox"
|
||||
value="{{ .IsAdmin }}" />
|
||||
<span>Is Admin</span>
|
||||
</label>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="submit">Create User Account</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,3 @@
|
|||
{{ define "nav" }}
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/">
|
||||
<h6>TFSTATED</h6>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
{{ if eq .Page.Section "login" }}
|
||||
<a href="/login" class="active">
|
||||
<i>login</i>
|
||||
<span>Login</span>
|
||||
</a>
|
||||
{{ else }}
|
||||
<a href="/states"{{ if eq .Page.Section "states" }} class="fill"{{ end}}>
|
||||
<i>home_storage</i>
|
||||
<span>States</span>
|
||||
</a>
|
||||
<a href="/settings"{{ if eq .Page.Section "settings" }} class="fill"{{ end}}>
|
||||
<i>settings</i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
{{ if .Page.IsAdmin }}
|
||||
<a href="/accounts"{{ if eq .Page.Section "accounts" }} class="fill"{{ end}}>
|
||||
<i>person</i>
|
||||
<span>User Accounts</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
<a href="/logout">
|
||||
<i>logout</i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -39,26 +5,47 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="/static/favicon.svg">
|
||||
<link href="/static/main.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
||||
<title>TFSTATED - {{ .Page.Title }}</title>
|
||||
</head>
|
||||
<body class="{{ if .Page.LightMode }}light{{ else }}dark{{ end }}">
|
||||
<nav class="left drawer l">{{ template "nav" . }}</nav>
|
||||
<nav class="left m">{{ template "nav" . }}</nav>
|
||||
<nav class="bottom s">{{ template "nav" . }}</nav>
|
||||
<body class="{{ if .Page.LightMode }}light-theme{{ else }}black-theme{{ end }}">
|
||||
<header>
|
||||
<nav>
|
||||
{{ if ne .Page.Precedent "" }}
|
||||
<a href="{{ .Page.Precedent }}" class="button circle chip">
|
||||
<i>arrow_back</i>
|
||||
</a>
|
||||
{{ end }}
|
||||
<h5 class="max center-align">{{ .Page.Title }}</h5>
|
||||
</nav>
|
||||
<h6>TFSTATED</h6>
|
||||
</header>
|
||||
{{ template "main" . }}
|
||||
<div id="main">
|
||||
<aside>
|
||||
{{ if eq .Page.Section "login" }}
|
||||
<a href="/login" class="active">
|
||||
<i class="material-symbols-outlined">login</i>
|
||||
<span>Login</span>
|
||||
</a>
|
||||
{{ else }}
|
||||
<a href="/states"{{ if eq .Page.Section "states" }} class="active"{{ end}}>
|
||||
<i class="material-symbols-outlined">home_storage</i>
|
||||
<span>States</span>
|
||||
</a>
|
||||
<a href="/settings"{{ if eq .Page.Section "settings" }} class="active"{{ end}}>
|
||||
<i class="material-symbols-outlined">settings</i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
{{ if .Page.IsAdmin }}
|
||||
<a href="/accounts"{{ if eq .Page.Section "accounts" }} class="active"{{ end}}>
|
||||
<i class="material-symbols-outlined">person</i>
|
||||
<span>User Accounts</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
<hr>
|
||||
<a href="/logout">
|
||||
<i class="material-symbols-outlined">logout</i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</aside>
|
||||
<main>
|
||||
{{ template "main" . }}
|
||||
</main>
|
||||
</div>
|
||||
<footer>
|
||||
</footer>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive">
|
||||
<h5>{{ .Status }} - {{ .StatusText }}</h5>
|
||||
<p>{{ .Err }}</p>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,25 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive">
|
||||
<form action="/login" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if .Forbidden }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
value="{{ .Username }}"
|
||||
required>
|
||||
<label for="username">Username</label>
|
||||
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
|
||||
</div>
|
||||
<div class="field border label{{ if .Forbidden }} invalid{{ end}}">
|
||||
<input id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required>
|
||||
<label for="password">Password</label>
|
||||
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="login">Login</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
<form action="/login" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if .Forbidden }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
value="{{ .Username }}"
|
||||
required>
|
||||
<label for="username">Username</label>
|
||||
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
|
||||
</div>
|
||||
<div class="field border label{{ if .Forbidden }} invalid{{ end}}">
|
||||
<input id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required>
|
||||
<label for="password">Password</label>
|
||||
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="login">Login</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive">
|
||||
<h5>Logout successful</h5>
|
||||
</main>
|
||||
<h5>Logout successful</h5>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive">
|
||||
<form action="/settings" method="post">
|
||||
<fieldset>
|
||||
<div class="field middle-align">
|
||||
<nav>
|
||||
<div class="max">
|
||||
<h6>Dark Mode</h6>
|
||||
</div>
|
||||
<label class="switch icon">
|
||||
<input {{ if not .Settings.LightMode }} checked{{ end }}
|
||||
name="dark-mode"
|
||||
type="checkbox"
|
||||
value="1" />
|
||||
<span>
|
||||
<i>dark_mode</i>
|
||||
</span>
|
||||
</label>
|
||||
</nav>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="login">Save</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
<form action="/settings" method="post">
|
||||
<fieldset>
|
||||
<div class="field middle-align">
|
||||
<nav>
|
||||
<div class="max">
|
||||
<h6>Dark Mode</h6>
|
||||
</div>
|
||||
<label class="switch icon">
|
||||
<input {{ if not .Settings.LightMode }} checked{{ end }}
|
||||
name="dark-mode"
|
||||
type="checkbox"
|
||||
value="1" />
|
||||
<span>
|
||||
<i>dark_mode</i>
|
||||
</span>
|
||||
</label>
|
||||
</nav>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="login">Save</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,69 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive" id="main">
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>States</a>
|
||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New State</a>
|
||||
</div>
|
||||
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Path</th>
|
||||
<th>Updated</th>
|
||||
<th>Locked</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .States }}
|
||||
<tr>
|
||||
<td><a href="/states/{{ .Id }}">{{ .Path }}</a></td>
|
||||
<td><a href="/states/{{ .Id }}">{{ .Updated }}</a></td>
|
||||
<td>
|
||||
<a href="/states/{{ .Id }}">
|
||||
{{ if eq .Lock nil }}no{{ else }}
|
||||
<span>yes</span>
|
||||
<div class="tooltip left max">
|
||||
<b>Lock</b>
|
||||
<p>{{ .Lock }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
|
||||
<form action="/states" enctype="multipart/form-data" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if .PathError }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="path"
|
||||
name="path"
|
||||
required
|
||||
type="text"
|
||||
value="{{ .Path }}">
|
||||
<label for="path">Path</label>
|
||||
{{ if .PathDuplicate }}
|
||||
<span class="error">This path already exist</span>
|
||||
{{ else if .PathError }}
|
||||
<span class="error">Invalid path</span>
|
||||
{{ else }}
|
||||
<span class="helper">Valid URL path beginning with a /</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="field label border">
|
||||
<input name="file"
|
||||
required
|
||||
type="file">
|
||||
<input type="text">
|
||||
<label>File</label>
|
||||
<span class="helper">JSON state file</span>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="submit">New</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>States</a>
|
||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New State</a>
|
||||
</div>
|
||||
</main>
|
||||
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Path</th>
|
||||
<th>Updated</th>
|
||||
<th>Locked</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .States }}
|
||||
<tr>
|
||||
<td><a href="/states/{{ .Id }}">{{ .Path }}</a></td>
|
||||
<td><a href="/states/{{ .Id }}">{{ .Updated }}</a></td>
|
||||
<td>
|
||||
<a href="/states/{{ .Id }}">
|
||||
{{ if eq .Lock nil }}no{{ else }}
|
||||
<span>yes</span>
|
||||
<div class="tooltip left max">
|
||||
<b>Lock</b>
|
||||
<p>{{ .Lock }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
|
||||
<form action="/states" enctype="multipart/form-data" method="post">
|
||||
<fieldset>
|
||||
<div class="field border label{{ if .PathError }} invalid{{ end }}">
|
||||
<input autofocus
|
||||
id="path"
|
||||
name="path"
|
||||
required
|
||||
type="text"
|
||||
value="{{ .Path }}">
|
||||
<label for="path">Path</label>
|
||||
{{ if .PathDuplicate }}
|
||||
<span class="error">This path already exist</span>
|
||||
{{ else if .PathError }}
|
||||
<span class="error">Invalid path</span>
|
||||
{{ else }}
|
||||
<span class="helper">Valid URL path beginning with a /</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="field label border">
|
||||
<input name="file"
|
||||
required
|
||||
type="file">
|
||||
<input type="text">
|
||||
<label>File</label>
|
||||
<span class="helper">JSON state file</span>
|
||||
</div>
|
||||
<button class="small-round" type="submit" value="submit">New</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,28 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive" id="main">
|
||||
<p>
|
||||
Locked:
|
||||
{{ if eq .State.Lock nil }}no{{ else }}
|
||||
<span>yes</span>
|
||||
<div class="tooltip left max">
|
||||
<b>Lock</b>
|
||||
<p>{{ .State.Lock }}</p>
|
||||
</div>
|
||||
<p>
|
||||
Locked:
|
||||
{{ if eq .State.Lock nil }}no{{ else }}
|
||||
<span>yes</span>
|
||||
<div class="tooltip left max">
|
||||
<b>Lock</b>
|
||||
<p>{{ .State.Lock }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
</p>
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>By</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Versions }}
|
||||
<tr>
|
||||
<td><a href="/versions/{{ .Id }}">{{ index $.Usernames .AccountId.String }}</a></td>
|
||||
<td><a href="/versions/{{ .Id }}">{{ .Created }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</p>
|
||||
<table class="clickable-rows no-space">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>By</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Versions }}
|
||||
<tr>
|
||||
<td><a href="/versions/{{ .Id }}">{{ index $.Usernames .AccountId.String }}</a></td>
|
||||
<td><a href="/versions/{{ .Id }}">{{ .Created }}</a></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
{{ define "main" }}
|
||||
<main class="responsive" id="main">
|
||||
<p>
|
||||
Created by
|
||||
<a href="/accounts/{{ .Account.Id }}" class="link underline">{{ .Account.Username }}</a>
|
||||
at {{ .Version.Created }}
|
||||
</p>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer" class="active">Explorer</a>
|
||||
<a data-ui="#raw">Raw</a>
|
||||
</div>
|
||||
<div id="explorer" class="page padding active">
|
||||
<article class="border medium no-padding center-align middle-align">
|
||||
<progress class="circle large"></progress>
|
||||
</article>
|
||||
</div>
|
||||
<div id="raw" class="page padding">
|
||||
<pre><code id="raw-state">{{ .VersionData }}</code></pre>
|
||||
</div>
|
||||
<p>
|
||||
Created by
|
||||
<a href="/accounts/{{ .Account.Id }}" class="link underline">{{ .Account.Username }}</a>
|
||||
at {{ .Version.Created }}
|
||||
</p>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<a data-ui="#explorer" class="active">Explorer</a>
|
||||
<a data-ui="#raw">Raw</a>
|
||||
</div>
|
||||
</main>
|
||||
<div id="explorer" class="page padding active">
|
||||
<article class="border medium no-padding center-align middle-align">
|
||||
<progress class="circle large"></progress>
|
||||
</article>
|
||||
</div>
|
||||
<div id="raw" class="page padding">
|
||||
<pre><code id="raw-state">{{ .VersionData }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue