diff options
| author | Jan Tuomi <jan@jantuomi.fi> | 2025-02-11 12:12:37 +0200 |
|---|---|---|
| committer | Jan Tuomi <jan@jantuomi.fi> | 2025-02-11 12:13:00 +0200 |
| commit | e8f3a470ce693bef9303d3dd4c46523cdc691826 (patch) | |
| tree | d5d33eb96de070ccfa2b138295b623a8516cf7ad /browser/templates | |
| parent | cc07b3fdc4b8860a1ee1b25f09039ba3f13ee509 (diff) | |
Add structure, introduce progressive enhancement
Diffstat (limited to 'browser/templates')
| -rw-r--r-- | browser/templates/base.html.j2 | 21 | ||||
| -rw-r--r-- | browser/templates/frag_aside.html.j2 (renamed from browser/templates/aside.html.j2) | 4 | ||||
| -rw-r--r-- | browser/templates/frag_error.html.j2 | 10 | ||||
| -rw-r--r-- | browser/templates/frag_form_find.html.j2 (renamed from browser/templates/form_find.html.j2) | 3 | ||||
| -rw-r--r-- | browser/templates/frag_form_range.html.j2 (renamed from browser/templates/form_range.html.j2) | 3 | ||||
| -rw-r--r-- | browser/templates/page_error.html.j2 (renamed from browser/templates/error.html.j2) | 3 | ||||
| -rw-r--r-- | browser/templates/page_main.html.j2 (renamed from browser/templates/index.html.j2) | 10 |
7 files changed, 39 insertions, 15 deletions
diff --git a/browser/templates/base.html.j2 b/browser/templates/base.html.j2 index a8a6cf7..8b41a85 100644 --- a/browser/templates/base.html.j2 +++ b/browser/templates/base.html.j2 @@ -9,12 +9,27 @@ <title>Database browser</title> <meta name="description" content="Database browser for log_db"> {% endblock %} - - <!-- -- https://leanrada.com/htmz/ --> - <iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe> </head> <body> <h1><a href="/">Database browser</a></h1> {% block content %}{% endblock %} + + <!-- https://leanrada.com/htmz/ --> + <iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe> + <!-- Enable progressive enhancement for htmz --> + <script> + document.querySelectorAll("form[htmz]").forEach(function (element) { + const input = document.createElement("input"); + input.type = "hidden"; + input.name = "htmz"; + input.value = element.attributes.replace.value; + element.appendChild(input); + + const action = new URL(element.action); + action.hash = element.attributes.replace.value; + element.action = action.toString(); + element.target = "htmz"; + }); + </script> </body> </html> diff --git a/browser/templates/aside.html.j2 b/browser/templates/frag_aside.html.j2 index eb8c9cf..8366436 100644 --- a/browser/templates/aside.html.j2 +++ b/browser/templates/frag_aside.html.j2 @@ -1,5 +1,4 @@ -{% block aside %} -<aside> +<aside id="aside"> <h3>Read operations</h3> <ul> <li><a href="/find">Find</a></li> @@ -13,4 +12,3 @@ {% include selected_form %} </aside> -{% endblock %} diff --git a/browser/templates/frag_error.html.j2 b/browser/templates/frag_error.html.j2 new file mode 100644 index 0000000..f014f0a --- /dev/null +++ b/browser/templates/frag_error.html.j2 @@ -0,0 +1,10 @@ +{% if container %} +<{{ container }}> +{% endif %} + +<h2>Error</h2> +{{ error }} + +{% if container %} +</{{ container }}> +{% endif %} diff --git a/browser/templates/form_find.html.j2 b/browser/templates/frag_form_find.html.j2 index 54608b6..a8fe493 100644 --- a/browser/templates/form_find.html.j2 +++ b/browser/templates/frag_form_find.html.j2 @@ -1,6 +1,7 @@ -<form action="/find" method="post"> +<form action="/find" method="post" htmz replace=main> <label for="field">Field</label> <input type="text" name="field" id="field" required> <label for="values">Values</label> <input type="text" name="values" id="values" required> <button type="submit">Run query</button> +</form> diff --git a/browser/templates/form_range.html.j2 b/browser/templates/frag_form_range.html.j2 index 76eb4d2..b343b6d 100644 --- a/browser/templates/form_range.html.j2 +++ b/browser/templates/frag_form_range.html.j2 @@ -1,4 +1,4 @@ -<form action="/range" method="post"> +<form action="/range" method="post" htmz replace=main> <label for="field">Field</label> <input type="text" name="field" id="field" required> <label for="values">From...</label> @@ -6,3 +6,4 @@ <label for="values">...To</label> <input type="text" name="to" id="to" required> <button type="submit">Run query</button> +</form> diff --git a/browser/templates/error.html.j2 b/browser/templates/page_error.html.j2 index 2d0dc19..3233283 100644 --- a/browser/templates/error.html.j2 +++ b/browser/templates/page_error.html.j2 @@ -1,6 +1,5 @@ {% extends "base.html.j2" %} {% block content %} -<h2>Error</h2> -{{ error }} +{% include "frag_error.html.j2" %} {% endblock %} diff --git a/browser/templates/index.html.j2 b/browser/templates/page_main.html.j2 index 9713944..8ce4a13 100644 --- a/browser/templates/index.html.j2 +++ b/browser/templates/page_main.html.j2 @@ -1,10 +1,10 @@ {% extends "base.html.j2" %} {% block content %} -<main> - {% include "aside.html.j2" %} +<div id="container"> + {% include "frag_aside.html.j2" %} - <div class="results"> + <main id="main"> <table> <thead> <tr> @@ -23,6 +23,6 @@ {% endfor %} </tbody> </table> - </div> -</main> + </main> +</div> {% endblock %} |