speatzle/morffix
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

Reworked CSS

Browse source 
- Split into 4 files referenced by the first
- Using MLFE and page-wide color definitions
- Improved consistency and reduced markup complexity
- Hinted more user actions
- Improved visual parsability of tables and logs
- Improved visibility of counter units
- TODO:
  - Add text selection to important fields
  - Improve button placement
  - Reindent templates
This commit is contained in:
adroslice 2024-05-29 15:19:21 +02:00
parent 8759e9bafc
commit 332e0cbe5a
11 changed files with 242 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
server/index.go
View file

@ -56,7 +56,8 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
if err != nil { if err != nil {
size = 0 size = 0
} }
data.Counter = splitInt(size) // data.Counter = splitInt(size)
data.Counter = []int{0, 1, 2, 3, 4, 5, 6, 7, 8, 9}
buf := bytes.Buffer{} buf := bytes.Buffer{}
err = templates.ExecuteTemplate(&buf, constants.INDEX_TEMPLATE_NAME, data) err = templates.ExecuteTemplate(&buf, constants.INDEX_TEMPLATE_NAME, data)

9
static/style/color.css Normal file
View file

@ -0,0 +1,9 @@
:root {
--cl-bg: #111;
--cl-fg: #eee;
--cl-el: #333;
--cl-hl: #222;
background: var(--cl-bg);
color: var(--cl-fg);
}

68
static/style/component.css Normal file
View file

@ -0,0 +1,68 @@
/* Inputs */
input, select, :is(button, .button) {
background: var(--cl-el);
border: 1px solid var(--cl-fg);
padding: 0.125rem;
}
:is(button, .button, input[type=submit]) {
display: flex;
text-align: center;
text-decoration: none;
align-items: center;
}
:is(button, .button, input[type=submit]):hover {
background-color: var(--cl-hl);
cursor: pointer;
}
/* Forms */
:is(form, .form) {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
align-self: start;
}
:is(form, .form) > :is(p, label) {
grid-column: 1;
}
:is(form, .form) > :is(button, .button, input[type=submit]) {
grid-column: 1 / 3;
}
:is(form, .form) > :is(input[type=checkbox], :is(p, label)) {
place-self: center start;
}
/* Tables */
table {
border-collapse: collapse;
}
th, td {
background: var(--cl-el);
border: 1px solid var(--cl-fg);
padding: 0.25rem;
}
tr:hover > td {
background: var(--cl-hl);
}
tr:hover[onclick] > td {
cursor: pointer;
}
/* Navigation */
nav {
flex-flow: row nowrap;
background: var(--cl-el);
}
nav > :is(button, .button, input[type=submit]) {
border: none;
padding: 0.5rem;
}

42
static/style/mlfe.css Normal file
View file

@ -0,0 +1,42 @@
/* MLFE: Marginless FlexEverything (A CSS Reset for Layout) */
:root {
font-family: sans-serif;
line-height: 1;
user-select: none;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
user-select: inherit;
color: inherit;
overflow: hidden;
flex-shrink: 0;
font-family: inherit; /* + */
fonz-size: 1rem; /* + */
}
/* Change from normal: Body and label added as flex container */
div, ul, ol, nav, body, label {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
h1 { font-size: calc(1rem + calc(1rem / 1))}
h2 { font-size: calc(1rem + calc(1rem / 2))}
h3 { font-size: calc(1rem + calc(1rem / 3))}
h4 { font-size: calc(1rem + calc(1rem / 4))}
h5 { font-size: calc(1rem + calc(1rem / 5))}
h6 { font-size: calc(1rem + calc(1rem / 6))}
ul, ol {
gap: 0.5rem;
padding-left: 1rem;
}
/* Fix text getting cut off unpredictably */
h1, h2, h3, h4, h5, h6, pre, p, label, legend {
overflow: visible;
}

88
static/style/style.css
View file

@ -1,74 +1,50 @@
ul { @import url("mlfe.css");
list-style-type: none; @import url("color.css");
margin: 0; @import url("component.css");
padding: 0;
overflow: hidden;
background-color: #333;
}
li { :root {
float: left;
}
li a {
display: block;
color: white;
background-color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
* {
background-color: black;
color: white;
font-family: monospace; font-family: monospace;
font-size: 16px;
} }
body {
.counter { padding: 0.5rem;
display: flex; gap: 0.5rem;
}
.worker-list {
display: flex;
gap: 5px;
flex-wrap: wrap;
} }
.counter-image { .counter-image {
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: -moz-crisp-edges; image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges; image-rendering: crisp-edges;
flex-grow: 200; flex-grow: 1;
} }
.worker table{ .counter {
border: 1px solid white; flex-flow: row nowrap;
border-collapse: collapse; align-items: end;
border-spacing: 5px; font-size: 1.5rem;
font-weight: bold;
} }
.worker td{ .workers {
border: 1px solid white; flex-flow: row wrap;
} }
.worker tr{ .workers > * {
border: 1px solid white; gap: 0.5rem;
border: 1px solid var(--fg);
} }
.task-list table{ .log > p {
border: 1px solid white; padding: 0.25rem 0;
border-collapse: collapse; user-select: text;
border-spacing: 5px;
} }
.task-list tr{ .log > p:hover {
border: 1px solid white; background: var(--cl-hl);
}
nav > :first-child {
font-size: 2rem;
font-weight: bold;
} }

6
tmpl/index.tmpl
View file

@ -1,5 +1,5 @@
{{template "head"}} {{template "head"}}
<div id="wierd-flex" class="counter"> <div class="counter">
{{ $l := len .Counter }} {{ $l := len .Counter }}
{{range $i, $c := .Counter}} {{range $i, $c := .Counter}}
<img class="counter-image" alt="{{$c}}" src="/static/counter/{{$c}}.gif"> <img class="counter-image" alt="{{$c}}" src="/static/counter/{{$c}}.gif">
@ -16,9 +16,9 @@
{{end}} {{end}}
</div> </div>
<h2>Workers</h2> <h2>Workers</h2>
<div class="worker-list"> <div class="workers">
{{range $w := .Workers}} {{range $w := .Workers}}
<div class="worker"> <div>
<h4>{{ $w.Name }}</h4> <h4>{{ $w.Name }}</h4>
<table> <table>
<tr> <tr>

64
tmpl/libraries.tmpl
View file

@ -1,40 +1,38 @@
{{template "head"}} {{template "head"}}
<h2>Libraries</h2> <h2>Libraries</h2>
<div class="library-list"> <table>
<table> <tr>
<tr> <th>ID</th>
<th>ID</th> <th>Name</th>
<th>Name</th> <th>Path</th>
<th>Path</th> <th>Enabled</th>
<th>Enable</th> </tr>
</tr> {{range $l := .Libraries}}
{{range $l := .Libraries}} <tr onclick="window.location='/libraries/{{ $l.ID }}';">
<tr onclick="window.location='/libraries/{{ $l.ID }}';"> <td>
<td> {{ $l.ID }}
{{ $l.ID }} </td>
</td> <td>
<td> {{ $l.Name }}
{{ $l.Name }} </td>
</td> <td>
<td> {{ $l.Path }}
{{ $l.Path }} </td>
</td> <td>
<td> {{ $l.Enable }}
{{ $l.Enable }} </td>
</td> </tr>
</tr> {{end}}
{{end}} </table>
</table>
</div>
<h2>New Library</h2> <h2>New Library</h2>
<form method="POST"> <form method="POST">
<label>Name:</label><br /> <label>Name:</label>
<input type="text" name="name"><br /> <input type="text" name="name">
<label>Path:</label><br /> <label>Path:</label>
<input type="text" name="path"><br /> <input type="text" name="path">
<label>Enable:</label><br /> <label>Enable:</label>
<input type="checkbox" name="enable"><br /> <input type="checkbox" name="enable">
<input type="submit"> <input type="submit" value="Submit">
</form> </form>
{{template "tail"}} {{template "tail"}}

2
tmpl/library.tmpl
View file

@ -1,6 +1,6 @@
{{template "head"}} {{template "head"}}
<h2>Library {{.Library.Name}}</h2> <h2>Library {{.Library.Name}}</h2>
<p>Enabled {{.Library.Enable}} <p>{{if .Library.Enable}}Enabled{{else}}Disabled{{end}}</p>
<h2>Files</h2> <h2>Files</h2>
<form method="POST" action="/scan/{{.Library.ID}}"> <form method="POST" action="/scan/{{.Library.ID}}">
<input value="Scan" type="submit"> <input value="Scan" type="submit">

10
tmpl/navbar.tmpl
View file

@ -1,7 +1,7 @@
{{define "navbar"}} {{define "navbar"}}
<ul class="navbar"> <nav>
<li><a href="/">Morffix</a></li> <a class="button" href="/">Morffix</a>
<li><a href="/libraries">Libraries</a></li> <a class="button" href="/libraries">Libraries</a>
<li><a href="/tasks">Tasks</a></li> <a class="button" href="/tasks">Tasks</a>
</ul> </nav>
{{end}} {{end}}

6
tmpl/task.tmpl
View file

@ -1,9 +1,11 @@
{{template "head"}} {{template "head"}}
<h2>Task {{.ID}}</h2> <h2>Task {{.ID}}</h2>
<div class="task-log"> <div class="log">
{{range $t := .Log}} {{range $t := .Log}}
{{ $t }}<br/> <p>
{{ $t }}
</p>
{{end}} {{end}}
</div> </div>
{{template "tail"}} {{template "tail"}}

90
tmpl/tasks.tmpl
View file

@ -1,24 +1,24 @@
{{template "head"}} {{template "head"}}
<h2>New Tasks</h2> <h2>New Tasks</h2>
<form method="POST"> <form method="POST">
<label for="library">Library:</label><br /> <label for="library">Library:</label>
<select id="library" name="library"> <select id="library" name="library">
{{range $l := .Libraries}} {{range $l := .Libraries}}
<option value="{{$l.ID}}">{{$l.Name}}</option> <option value="{{$l.ID}}">{{$l.Name}}</option>
{{end}} {{end}}
</select><br /> </select>
<label for="health">Health</label><br /> <label for="health">Health</label>
<select id="health" name="health"> <select id="health" name="health">
<option value="-1">All</option> <option value="-1">All</option>
<option value="0">Unknown</option> <option value="0">Unknown</option>
<option value="1">Damaged</option> <option value="1">Damaged</option>
<option value="2">Healthy</option> <option value="2">Healthy</option>
</select> <br /> </select>
<label for="type">Type</label><br /> <label for="type">Type</label>
<select id="type" name="type"> <select id="type" name="type">
<option value="0">Health Check</option> <option value="0">Health Check</option>
</select> <br /> </select>
<input type="submit"> <input type="submit" value="Submit">
</form> </form>
<h2>Task Stats</h2> <h2>Task Stats</h2>
@ -35,42 +35,40 @@ Total: {{.Stats.TotalCount}}
<h2>Tasks</h2> <h2>Tasks</h2>
<div class="task-list"> <table>
<table> <tr>
<tr> <th>ID</th>
<th>ID</th> <th>Library</th>
<th>Library</th> <th>Worker</th>
<th>Worker</th> <th>Type</th>
<th>Type</th> <th>Status</th>
<th>Status</th> <th>File</th>
<th>File</th> <th>Updated At</th>
<th>Updated At</th> </tr>
</tr> {{range $t := .Tasks}}
{{range $t := .Tasks}} <tr onclick="window.location='/tasks/{{ $t.ID }}';">
<tr onclick="window.location='/tasks/{{ $t.ID }}';"> <td>
<td> {{ $t.ID }}
{{ $t.ID }} </td>
</td> <td>
<td> {{ $t.Library }}
{{ $t.Library }} </td>
</td> <td>
<td> {{ $t.Worker }}
{{ $t.Worker }} </td>
</td> <td>
<td> {{ $t.Type }}
{{ $t.Type }} </td>
</td> <td>
<td> {{ $t.Status }}
{{ $t.Status }} </td>
</td> <td>
<td> {{ $t.File }}
{{ $t.File }} </td>
</td> <td>
<td> {{ $t.UpdatedAt }}
{{ $t.UpdatedAt }} </td>
</td> </tr>
</tr> {{end}}
{{end}} </table>
</table>
</div>
{{template "tail"}} {{template "tail"}}