Reworked CSS

- 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

server/index.go

@@ -56,7 +56,8 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
 	if err != nil {
 		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{}
 	err = templates.ExecuteTemplate(&buf, constants.INDEX_TEMPLATE_NAME, data)

static/style/color.css

@@ -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); 
+}

static/style/component.css

@@ -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;
+}

static/style/mlfe.css

@@ -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;
+}

static/style/style.css

@@ -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-size: 16px;
 }
 
-
+body {
-.counter {
+  padding: 0.5rem;
-    display: flex;
+  gap: 0.5rem;
-}
-
-.worker-list {
-    display: flex;
-    gap: 5px;
-    flex-wrap: wrap;
 }
 
 .counter-image {
   image-rendering: pixelated;
   image-rendering: -moz-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;
 }

tmpl/index.tmpl

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

tmpl/libraries.tmpl

@@ -1,12 +1,11 @@
 {{template "head"}}
 <h2>Libraries</h2>
-<div class="library-list">
+<table>
-    <table>
     <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Path</th>
-            <th>Enable</th>
+        <th>Enabled</th>
     </tr>
     {{range $l := .Libraries}}
     <tr onclick="window.location='/libraries/{{ $l.ID }}';">
@@ -24,17 +23,16 @@
         </td>
     </tr>
     {{end}}
-    </table>
+</table>
-</div>
 
 <h2>New Library</h2>
 <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>
 {{template "tail"}}

tmpl/library.tmpl

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

tmpl/navbar.tmpl

@@ -1,7 +1,7 @@
 {{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}}

tmpl/task.tmpl

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

tmpl/tasks.tmpl

@@ -1,24 +1,24 @@
 {{template "head"}}
 <h2>New Tasks</h2>
 <form method="POST">
-    <label for="library">Library:</label><br />
+    <label for="library">Library:</label>
     <select id="library" name="library">
         {{range $l := .Libraries}}
         <option value="{{$l.ID}}">{{$l.Name}}</option>
         {{end}}
-    </select><br />
+    </select>
-    <label for="health">Health</label><br />
+    <label for="health">Health</label>
     <select id="health" name="health">
         <option value="-1">All</option>
         <option value="0">Unknown</option>
         <option value="1">Damaged</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">
     <option value="0">Health Check</option>
-    </select> <br />
+    </select>
-    <input type="submit">
+    <input type="submit" value="Submit">
 </form>
 
 <h2>Task Stats</h2>
@@ -35,8 +35,7 @@ Total: {{.Stats.TotalCount}}
 
 
 <h2>Tasks</h2>
-<div class="task-list">
+<table>
-    <table>
     <tr>
         <th>ID</th>
         <th>Library</th>
@@ -71,6 +70,5 @@ Total: {{.Stats.TotalCount}}
         </td>
     </tr>
     {{end}}
-    </table>
+</table>
-</div>
 {{template "tail"}}