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

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,40 +1,38 @@
 {{template "head"}}
 <h2>Libraries</h2>
-<div class="library-list">
-    <table>
-        <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Path</th>
-            <th>Enable</th>
-        </tr>
-        {{range $l := .Libraries}}
-        <tr onclick="window.location='/libraries/{{ $l.ID }}';">
-            <td>
-                {{ $l.ID }}
-            </td>
-            <td>
-                {{ $l.Name }}
-            </td>
-            <td>
-                {{ $l.Path }}
-            </td>
-            <td>
-                {{ $l.Enable }}
-            </td>
-        </tr>
-        {{end}}
-    </table>
-</div>
+<table>
+    <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Path</th>
+        <th>Enabled</th>
+    </tr>
+    {{range $l := .Libraries}}
+    <tr onclick="window.location='/libraries/{{ $l.ID }}';">
+        <td>
+            {{ $l.ID }}
+        </td>
+        <td>
+            {{ $l.Name }}
+        </td>
+        <td>
+            {{ $l.Path }}
+        </td>
+        <td>
+            {{ $l.Enable }}
+        </td>
+    </tr>
+    {{end}}
+</table>
 
 <h2>New Library</h2>
 <form method="POST">
-    <label>Name:</label><br />
-    <input type="text" name="name"><br />
-    <label>Path:</label><br />
-    <input type="text" name="path"><br />
-    <label>Enable:</label><br />
-    <input type="checkbox" name="enable"><br />
-    <input type="submit">
+    <label>Name:</label>
+    <input type="text" name="name">
+    <label>Path:</label>
+    <input type="text" name="path">
+    <label>Enable:</label>
+    <input type="checkbox" name="enable">
+    <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">
-  <li><a href="/">Morffix</a></li>
-  <li><a href="/libraries">Libraries</a></li>
-  <li><a href="/tasks">Tasks</a></li>
-</ul>
+<nav>
+  <a class="button" href="/">Morffix</a>
+  <a class="button" href="/libraries">Libraries</a>
+  <a class="button" href="/tasks">Tasks</a>
+</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 />
-    <label for="health">Health</label><br />
+    </select>
+    <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 />
-    <label for="type">Type</label><br />
+    </select>
+    <label for="type">Type</label>
     <select id="type" name="type">
-        <option value="0">Health Check</option>
-    </select> <br />
-    <input type="submit">
+    <option value="0">Health Check</option>
+    </select>
+    <input type="submit" value="Submit">
 </form>
 
 <h2>Task Stats</h2>
@@ -35,42 +35,40 @@ Total: {{.Stats.TotalCount}}
 
 
 <h2>Tasks</h2>
-<div class="task-list">
-    <table>
-        <tr>
-            <th>ID</th>
-            <th>Library</th>
-            <th>Worker</th>
-            <th>Type</th>
-            <th>Status</th>
-            <th>File</th>
-            <th>Updated At</th>
-        </tr>
-        {{range $t := .Tasks}}
-        <tr onclick="window.location='/tasks/{{ $t.ID }}';">
-            <td>
-                {{ $t.ID }}
-            </td>
-            <td>
-                {{ $t.Library }}
-            </td>
-            <td>
-                {{ $t.Worker }}
-            </td>
-            <td>
-                {{ $t.Type }}
-            </td>
-            <td>
-                {{ $t.Status }}
-            </td>
-            <td>
-                {{ $t.File }}
-            </td>
-            <td>
-                {{ $t.UpdatedAt }}
-            </td>
-        </tr>
-        {{end}}
-    </table>
-</div>
+<table>
+    <tr>
+        <th>ID</th>
+        <th>Library</th>
+        <th>Worker</th>
+        <th>Type</th>
+        <th>Status</th>
+        <th>File</th>
+        <th>Updated At</th>
+    </tr>
+    {{range $t := .Tasks}}
+    <tr onclick="window.location='/tasks/{{ $t.ID }}';">
+        <td>
+            {{ $t.ID }}
+        </td>
+        <td>
+            {{ $t.Library }}
+        </td>
+        <td>
+            {{ $t.Worker }}
+        </td>
+        <td>
+            {{ $t.Type }}
+        </td>
+        <td>
+            {{ $t.Status }}
+        </td>
+        <td>
+            {{ $t.File }}
+        </td>
+        <td>
+            {{ $t.UpdatedAt }}
+        </td>
+    </tr>
+    {{end}}
+</table>
 {{template "tail"}}