laterite-admin 0.2.0

Laterite CMF admin surface: the Axum router, session middleware, and login shell
Documentation 
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
72
73
74

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{{ shell.brand }}{% endblock %}</title>
  <link rel="icon" type="image/svg+xml" href="/admin/assets/mark.svg">
  <link rel="stylesheet" href="/admin/assets/laterite.css">
  <script>
    (function(){try{var m=localStorage.getItem('lat-mode')||'auto';var d=m==='dark'||(m==='auto'&&matchMedia('(prefers-color-scheme:dark)').matches);document.documentElement.setAttribute('data-theme',d?'dark':'light');}catch(e){}})();
    function latModeGlyph(m){return m==='light'?'☀':m==='dark'?'☾':'◐';}
    function latCycleMode(){var o=localStorage.getItem('lat-mode')||'auto';var n=o==='light'?'dark':o==='dark'?'auto':'light';localStorage.setItem('lat-mode',n);var d=n==='dark'||(n==='auto'&&matchMedia('(prefers-color-scheme:dark)').matches);document.documentElement.setAttribute('data-theme',d?'dark':'light');var e=document.getElementById('lat-mode-ico');if(e)e.textContent=latModeGlyph(n);}
    function latToggleMenu(){var m=document.getElementById('lat-menu');if(m)m.classList.toggle('is-open');}
  </script>
</head>
<body class="lat-app">
  <header class="lat-topnav">
    <button class="lat-topnav__burger" type="button" onclick="latToggleMenu()" aria-label="Menu">&#9776;</button>
    <a class="lat-topnav__brand" href="/admin">
      <img src="/admin/assets/mark.png" alt="">
      <span class="lat-topnav__wordmark">{{ shell.brand }}</span>
    </a>
    <nav class="lat-topnav__nav">
      {% for item in shell.nav %}<a class="lat-topnav__section{% if item.active %} is-active{% endif %}" href="{{ item.path }}"{% if item.active %} aria-current="page"{% endif %}>{% if !item.icon.is_empty() %}<span class="lat-topnav__ico">{{ item.icon|safe }}</span>{% endif %}<span>{{ item.label }}</span></a>{% endfor %}
    </nav>
    <div class="lat-topnav__spacer"></div>
    <div class="lat-topnav__right">
      <button class="lat-modebtn" type="button" onclick="latCycleMode()" title="Colour mode" aria-label="Colour mode"><span id="lat-mode-ico">◐</span></button>
      <details class="lat-usermenu">
        <summary class="lat-avatar" title="{{ shell.full_name }}">{{ shell.initial }}</summary>
        <div class="lat-usermenu__panel">
          <div class="lat-usermenu__name">{{ shell.full_name }}</div>
          <a class="lat-usermenu__item" href="/admin/preferences">Preferences</a>
          <form method="post" action="/admin/logout"><button class="lat-usermenu__item" type="submit">Sign out</button></form>
          <a class="lat-usermenu__poweredby" href="https://laterite.rs" target="_blank" rel="noopener noreferrer"><img src="/admin/assets/mark.png" alt="" width="14" height="14">Powered by Laterite</a>
        </div>
      </details>
    </div>
  </header>
  <div class="lat-drawer" id="lat-menu">
    <div class="lat-drawer__backdrop" onclick="latToggleMenu()"></div>
    <nav class="lat-drawer__panel">
      <div class="lat-drawer__brand"><img src="/admin/assets/mark.png" alt=""><span>{{ shell.brand }}</span></div>
      {% for item in shell.nav %}<a class="lat-drawer__item{% if item.active %} is-active{% endif %}" href="{{ item.path }}"{% if item.active %} aria-current="page"{% endif %}>{{ item.label }}</a>{% endfor %}
    </nav>
  </div>
  <div class="lat-body">
    {% if !shell.sidebar.is_empty() %}
    <aside class="lat-sidebar">
      {% for group in shell.sidebar %}
      <details class="lat-sidebar__group" open>
        <summary class="lat-sidebar__grouphead"><span>{{ group.name }}</span><span class="lat-sidebar__chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span></summary>
        {% for item in group.items %}
        <a class="lat-sidebar__item{% if item.active %} is-active{% endif %}" href="{{ item.path }}">
          <span class="lat-sidebar__icon">{{ item.icon|safe }}</span>
          <span class="lat-sidebar__text">
            <span class="lat-sidebar__title">{{ item.label }}</span>
            {% if !item.description.is_empty() %}<span class="lat-sidebar__desc">{{ item.description }}</span>{% endif %}
          </span>
        </a>
        {% endfor %}
      </details>
      {% endfor %}
    </aside>
    {% endif %}
    <main class="lat-main">
      <div class="lat-page">
        {% block content %}{% endblock %}
      </div>
    </main>
  </div>
  <script>(function(){var m=localStorage.getItem('lat-mode')||'auto';var e=document.getElementById('lat-mode-ico');if(e)e.textContent=latModeGlyph(m);})();</script>
</body>
</html>