~alcinnz/bureaucromancy

bureaucromancy/tpl/base.html -rw-r--r-- 2.3 KiB
f80f12fd — Adrian Cochrane Clarify how to run, release 0.1.0.2 11 months ago 
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
  <title>{{form.method}} {{form.action}}</title>
  <meta charset=utf-8 />
  <style>
    body { background: black; color: #eee; font: medium sans-serif; }
    h1 { text-align: center }
    aside { width: 20%; border-right: thin solid #eee; }
    dt { font-weight: bold; border-top: thin dashed #999; }
    dt a { color: inherit }
    .checked { color: lightgreen }
    .readonly { font-style: italic }
    .disabled { text-decoration: line-through }
    .selected { border-right: thick solid green }
    :link { color: white }

    input, select, textarea { display: none; }

    main { display: flex; flex-direction: row; }
    section { padding: 20px }

    nav { column-count: 4 } /* FIXME: Screen width issues? */
    nav dl { margin: 0 }
    dt, dd { break-inside: avoid }

    table td:not([colspan]) { width: 25% }
    table td { text-align: center }

    .error { color: red; }
  </style>
</head>
<body>
  <h1><strong>{{form.method}}</strong> <em>{{form.action}}</em></h1>
  <main>
  {% set selected=input.index %}
  <aside><dl>{% for input in inputs %}
    <dt class="{% if input.checked %}checked{% endif %} {% if input.index == selected %}selected{% endif %}">
      {% if input.checked %}&check;{% endif %}
      {% if input.type == 'password' && input.value != '' %}&check;{% endif %}
      {% if input.disabled %}{{ input.label }}
      {% else %}<a href="/{{input.index}}/{{Q}}" title="{{input.title}}">{{ input.label }}</a>
      {% endif %}</dt>
    {% if input.error %}<dd class="error">⚠️ {{ input.error }}</dd>{% endif %}
    {% if input.type != 'password' %}
      <dd class="{% if input.readonly %}readonly{% endif %}"
          {% if input.inputType == "color" %}style="background-color: {{ input.value }}"{% endif %}>
        {{ input.value }}
      </dd>
    {% endif %}
  {% endfor %}</dl></aside>

  {% block main %}
    {% if input.list %}<aside><dl>{% for grp in input.list %}
      <dt>{{ grp.label }}</dt>
      {% for opt in grp.opts %}
        {% if opt.disabled %}<dd>{{ opt.label }}</dd>
        {% else %}<dd>
          <a href="={{ opt.value|xURI }}{{Q}}" title="{{ opt.value }}">
            {{ opt.label }}</a>
        </dd>{% endif %}
      {% endfor %}
    {% endfor %}</dl></aside>{% endif %}

    {% block control %}<section>
      {{ input.description }}
    </section>{% endblock %}
  {% endblock %}
  </main>
</body>
</html>