adyxax/tfstated
1
0
Fork 0
Code Issues 37 Pull requests Releases Packages Activity Actions

chore(webui): switch to a homegrown css

Browse source
This commit is contained in:
Julien Dessaux 2025-03-30 23:53:17 +02:00
parent 26c5f9c5c7
commit 2da9d222b6
Signed by: adyxax
GPG key ID: F92E51B86E07177E
10 changed files with 566 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
pkg/webui/html/accounts.html
View file

@ -1,6 +1,5 @@
{{ define "main" }} {{ define "main" }}
<main class="responsive" id="main"> <div>
<div>
<div class="tabs"> <div class="tabs">
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>User Accounts</a> <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> <a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New User Account</a>
@ -57,6 +56,5 @@
</fieldset> </fieldset>
</form> </form>
</div> </div>
</div> </div>
</main>
{{ end }} {{ end }}

81
pkg/webui/html/base.html
View file

@ -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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -39,26 +5,47 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/static/favicon.svg"> <link rel="icon" href="/static/favicon.svg">
<link href="/static/main.css" rel="stylesheet"> <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> <title>TFSTATED - {{ .Page.Title }}</title>
</head> </head>
<body class="{{ if .Page.LightMode }}light{{ else }}dark{{ end }}"> <body class="{{ if .Page.LightMode }}light-theme{{ else }}black-theme{{ end }}">
<nav class="left drawer l">{{ template "nav" . }}</nav>
<nav class="left m">{{ template "nav" . }}</nav>
<nav class="bottom s">{{ template "nav" . }}</nav>
<header> <header>
<nav> <h6>TFSTATED</h6>
{{ if ne .Page.Precedent "" }} </header>
<a href="{{ .Page.Precedent }}" class="button circle chip"> <div id="main">
<i>arrow_back</i> <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> </a>
{{ end }} {{ end }}
<h5 class="max center-align">{{ .Page.Title }}</h5> <hr>
</nav> <a href="/logout">
</header> <i class="material-symbols-outlined">logout</i>
<span>Logout</span>
</a>
{{ end }}
</aside>
<main>
{{ template "main" . }} {{ template "main" . }}
</main>
</div>
<footer> <footer>
</footer> </footer>
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.js"></script>
</body> </body>
</html> </html>

2
pkg/webui/html/error.html
View file

@ -1,6 +1,4 @@
{{ define "main" }} {{ define "main" }}
<main class="responsive">
<h5>{{ .Status }} - {{ .StatusText }}</h5> <h5>{{ .Status }} - {{ .StatusText }}</h5>
<p>{{ .Err }}</p> <p>{{ .Err }}</p>
</main>
{{ end }} {{ end }}

6
pkg/webui/html/login.html
View file

@ -1,6 +1,5 @@
{{ define "main" }} {{ define "main" }}
<main class="responsive"> <form action="/login" method="post">
<form action="/login" method="post">
<fieldset> <fieldset>
<div class="field border label{{ if .Forbidden }} invalid{{ end }}"> <div class="field border label{{ if .Forbidden }} invalid{{ end }}">
<input autofocus <input autofocus
@ -22,6 +21,5 @@
</div> </div>
<button class="small-round" type="submit" value="login">Login</button> <button class="small-round" type="submit" value="login">Login</button>
</fieldset> </fieldset>
</form> </form>
</main>
{{ end }} {{ end }}

4
pkg/webui/html/logout.html
View file

@ -1,5 +1,3 @@
{{ define "main" }} {{ define "main" }}
<main class="responsive"> <h5>Logout successful</h5>
<h5>Logout successful</h5>
</main>
{{ end }} {{ end }}

6
pkg/webui/html/settings.html
View file

@ -1,6 +1,5 @@
{{ define "main" }} {{ define "main" }}
<main class="responsive"> <form action="/settings" method="post">
<form action="/settings" method="post">
<fieldset> <fieldset>
<div class="field middle-align"> <div class="field middle-align">
<nav> <nav>
@ -20,6 +19,5 @@
</div> </div>
<button class="small-round" type="submit" value="login">Save</button> <button class="small-round" type="submit" value="login">Save</button>
</fieldset> </fieldset>
</form> </form>
</main>
{{ end }} {{ end }}

6
pkg/webui/html/states.html
View file

@ -1,6 +1,5 @@
{{ define "main" }} {{ define "main" }}
<main class="responsive" id="main"> <div>
<div>
<div class="tabs"> <div class="tabs">
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>States</a> <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> <a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New State</a>
@ -66,6 +65,5 @@
</fieldset> </fieldset>
</form> </form>
</div> </div>
</div> </div>
</main>
{{ end }} {{ end }}

10
pkg/webui/html/statesId.html
View file

@ -1,6 +1,5 @@
{{ define "main" }} {{ define "main" }}
<main class="responsive" id="main"> <p>
<p>
Locked: Locked:
{{ if eq .State.Lock nil }}no{{ else }} {{ if eq .State.Lock nil }}no{{ else }}
<span>yes</span> <span>yes</span>
@ -9,8 +8,8 @@
<p>{{ .State.Lock }}</p> <p>{{ .State.Lock }}</p>
</div> </div>
{{ end }} {{ end }}
</p> </p>
<table class="clickable-rows no-space"> <table class="clickable-rows no-space">
<thead> <thead>
<tr> <tr>
<th>By</th> <th>By</th>
@ -25,6 +24,5 @@
</tr> </tr>
{{ end }} {{ end }}
</tbody> </tbody>
</table> </table>
</main>
{{ end }} {{ end }}

10
pkg/webui/html/versions.html
View file

@ -1,11 +1,10 @@
{{ define "main" }} {{ define "main" }}
<main class="responsive" id="main"> <p>
<p>
Created by Created by
<a href="/accounts/{{ .Account.Id }}" class="link underline">{{ .Account.Username }}</a> <a href="/accounts/{{ .Account.Id }}" class="link underline">{{ .Account.Username }}</a>
at {{ .Version.Created }} at {{ .Version.Created }}
</p> </p>
<div> <div>
<div class="tabs"> <div class="tabs">
<a data-ui="#explorer" class="active">Explorer</a> <a data-ui="#explorer" class="active">Explorer</a>
<a data-ui="#raw">Raw</a> <a data-ui="#raw">Raw</a>
@ -18,6 +17,5 @@
<div id="raw" class="page padding"> <div id="raw" class="page padding">
<pre><code id="raw-state">{{ .VersionData }}</code></pre> <pre><code id="raw-state">{{ .VersionData }}</code></pre>
</div> </div>
</div> </div>
</main>
{{ end }} {{ end }}

319
pkg/webui/static/main.css
View file

@ -1,3 +1,318 @@
:root {
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
--standard-border-radius: 5px;
}
.black-theme {
--bg-0: #181818;
--bg-1: #252525;
--bg-2: #3b3b3b;
--dim: #777777;
--fg-0: #b9b9b9;
--fg-1: #dedede;
--red: #ed4a46;
--green: #70b433;
--yellow: #dbb32d;
--blue: #368aeb;
--magenta: #eb6eb7;
--cyan: #3fc5b7;
--orange: #e67f43;
--violet: #a580e2;
--br_red: #ff5e56;
--br_green: #83c746;
--br_yellow: #efc541;
--br_blue: #4f9cfe;
--br_magenta: #ff81ca;
--br_cyan: #56d8c9;
--br_orange: #fa9153;
--br_violet: #b891f5;
}
.light-theme {
--bg-0: #fbf3db;
--bg-1: #ece3cc;
--bg-2: #d5cdb6;
--dim: #909995;
--fg-0: #53676d;
--fg-1: #3a4d53;
--red: #d2212d;
--green: #489100;
--yellow: #ad8900;
--blue: #0072d4;
--magenta: #ca4898;
--cyan: #009c8f;
--orange: #c25d1e;
--violet: #8762c6;
--br_red: #cc1729;
--br_green: #428b00;
--br_yellow: #a78300;
--br_blue: #006dce;
--br_magenta: #c44392;
--br_cyan: #00978a;
--br_orange: #bc5819;
--br_violet: #825dc0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
*, *::before, *::after {
box-sizing: border-box;
}
textarea,
select,
input,
progress {
width: fit-content;
}
html {
font-family: var(--sans-font);
scroll-behavior: smooth;
}
body {
background-color: var(--bg-0);
color: var(--fg-0);
display: flex;
flex-direction: column;
font-feature-settings: "kern" 1;
font-kerning: normal;
font-size: 16px;
margin: 0;
}
header {
background-color: var(--bg-0);
margin-left: auto;
margin-right: auto;
text-align: center;
width: 960px;
}
#main {
display: flex;
flex-direction: row;
gap: 8px;
margin-left: auto;
margin-right: auto;
padding: 8px 0px;
}
#main aside {
align-items: stretch;
display: flex;
flex-direction: column;
margin-left: auto;
max-width: 176px;
min-width: 176px;
}
#main aside a {
align-items: center;
background-color: var(--bg-1);
border-radius: 16px;
display: inline-flex;
font-size: 16px;
gap: 8px;
margin: 4px 2px;
padding: 4px 16px;
text-align: center;
text-decoration: none;
}
#main aside a.active {
background-color: var(--bg-2);
}
main {
background-color: var(--bg-1);
margin-right: auto;
overflow-wrap: anywhere;
scrollbar-gutter: stable both-edges;
max-width: 776px;
min-width: 776px;
}
h1, h2, h3, h4, h5, h6 {
font-family: open, serif;
font-weight: 700;
line-height: 1.2em;
}
h1 {
font-size: 33px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 19px;
}
h6 {
font-size: 16px;
}
h1:not(:first-child) {
margin-top: 28px;
}
h2:not(:first-child) {
margin-top: 24px;
}
h3:not(:first-child) {
margin-top: 21px;
}
h4:not(:first-child) {
margin-top: 19px;
}
h5:not(:first-child) {
margin-top: 16px;
}
h6:not(:first-child) {
margin-top: 14px;
}
h1:not(:last-child) {
margin-bottom: 21px;
}
h2:not(:last-child) {
margin-bottom: 19px;
}
h3:not(:last-child) {
margin-bottom: 16px;
}
h4:not(:last-child) {
margin-bottom: 14px;
}
h5:not(:last-child) {
margin-bottom: 13px;
}
h6:not(:last-child) {
margin-bottom: 12px;
}
aside:not(:first-child) {
margin-top: 12px;
}
p {
text-align: justify;
hyphens: auto;
text-justify: inter-character;
}
p:not(:last-child) {
margin-bottom: 8px;
}
pre,code {
background-color: var(--bg-0);
color: var(--fg-0);
font-family: monospace;
margin: 0;
overflow-x: scroll;
}
ul {
padding-left: 32px;
}
ul li {
margin-bottom: 4px;
}
.fullwidth {
width: 100%;
}
img[src*='#center'] {
display: block;
margin: auto;
}
a {
color: var(--yellow);
}
a:visited {
color: var(--orange);
}
h1, a:hover {
color: var(--red);
text-wrap: balance;
}
h2, h3, h4, h5, h6 {
color: var(--green);
text-wrap: balance;
}
footer {
background-color: var(--bg-0);
margin-left: auto;
margin-right: auto;
padding: 10px;
}
footer p {
color: var(--green);
text-align: center;
}
footer a {
color: var(--green);
}
@media only screen and (640px <= width < 960px) { /*864*/
header {
width: calc(100vw - 16px);
}
#main {
/* These 16px account for the vertical scrollbar */
max-width: calc(100vw - 16px);
min-width: calc(100vw - 16px);
}
#main aside {
align-items: center;
max-width: 64px;
min-width: 64px;
}
#main aside a span {
display: none;
}
main {
max-width: calc(100vw - 16px - 64px);
min-width: calc(100vw - 16px - 64px);
}
}
@media only screen and (width < 640px) {
header {
width: calc(100vw - 16px);
}
#main {
display: block;
max-width: auto;
min-width: auto;
}
main {
max-width: calc(100vw - 16px);
min-width: calc(100vw - 16px);
}
#main aside {
bottom: 0;
flex-direction: row;
position: fixed;
max-width: calc(100vw - 16px);
min-width: calc(100vw - 16px);
overflow: scroll;
}
#main aside a {
display: flex;
flex-direction: column;
}
}
table tbody a { table tbody a {
display: block; display: block;
text-decoration: none; text-decoration: none;
@ -6,3 +321,7 @@ table tbody a {
.clickable-rows tbody tr:hover a { .clickable-rows tbody tr:hover a {
background-color: var(--secondary-container); background-color: var(--secondary-container);
} }
.material-icons {
font-size: 16px;
}