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
This commit is contained in:
adroslice
parent
8759e9bafc
commit
332e0cbe5a
11 changed files with 242 additions and 148 deletions
|
|
@ -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)
|
||||
|
|
|
|||
9
static/style/color.css
Normal file
9
static/style/color.css
Normal 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
68
static/style/component.css
Normal 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
42
static/style/mlfe.css
Normal 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;
|
||||
}
|
||||
|
|
@ -1,74 +1,50 @@
|
|||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
}
|
||||
@import url("mlfe.css");
|
||||
@import url("color.css");
|
||||
@import url("component.css");
|
||||
|
||||
li {
|
||||
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;
|
||||
:root {
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.worker-list {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
body {
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.counter-image {
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
flex-grow: 200;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.worker table{
|
||||
border: 1px solid white;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 5px;
|
||||
.counter {
|
||||
flex-flow: row nowrap;
|
||||
align-items: end;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.worker td{
|
||||
border: 1px solid white;
|
||||
.workers {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.worker tr{
|
||||
border: 1px solid white;
|
||||
.workers > * {
|
||||
gap: 0.5rem;
|
||||
border: 1px solid var(--fg);
|
||||
}
|
||||
|
||||
.task-list table{
|
||||
border: 1px solid white;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 5px;
|
||||
.log > p {
|
||||
padding: 0.25rem 0;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.task-list tr{
|
||||
border: 1px solid white;
|
||||
.log > p:hover {
|
||||
background: var(--cl-hl);
|
||||
}
|
||||
|
||||
nav > :first-child {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
{{template "head"}}
|
||||
<h2>Libraries</h2>
|
||||
<div class="library-list">
|
||||
<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 }}';">
|
||||
|
|
@ -25,16 +24,15 @@
|
|||
</tr>
|
||||
{{end}}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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"}}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
@ -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"}}
|
||||
|
|
@ -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">
|
||||
</select>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
|
||||
<h2>Task Stats</h2>
|
||||
|
|
@ -35,7 +35,6 @@ Total: {{.Stats.TotalCount}}
|
|||
|
||||
|
||||
<h2>Tasks</h2>
|
||||
<div class="task-list">
|
||||
<table>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
|
|
@ -72,5 +71,4 @@ Total: {{.Stats.TotalCount}}
|
|||
</tr>
|
||||
{{end}}
|
||||
</table>
|
||||
</div>
|
||||
{{template "tail"}}
|
||||
Loading…
Add table
Reference in a new issue