~alcinnz/bureaucromancy

ref: e55c9337f843c909832f29be8222c428fd8a8505 bureaucromancy/tpl/base.html -rw-r--r-- 2.1 KiB
e55c9337 — Adrian Cochrane Draft date editting UI & accessors. 1 year, 1 month ago
                                                                                
703b3073 Adrian Cochrane
c1e09d4a Adrian Cochrane
703b3073 Adrian Cochrane
b77ee394 Adrian Cochrane
703b3073 Adrian Cochrane
9014ee29 Adrian Cochrane
703b3073 Adrian Cochrane
b77ee394 Adrian Cochrane
c1e09d4a Adrian Cochrane
703b3073 Adrian Cochrane
e85207d2 Adrian Cochrane
703b3073 Adrian Cochrane
b77ee394 Adrian Cochrane
703b3073 Adrian Cochrane
e85207d2 Adrian Cochrane
703b3073 Adrian Cochrane
b77ee394 Adrian Cochrane
50d1a28d Adrian Cochrane
b77ee394 Adrian Cochrane
703b3073 Adrian Cochrane
b77ee394 Adrian Cochrane
703b3073 Adrian Cochrane
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
<!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 }
  </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.type != 'password' %}
      <dd class="{% if input.readonly %}readonly{% 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>