Improve templating

6 files changed, 43 insertions, 15 deletions

diff --git a/browser/static/htmp.js b/browser/static/htmp.js
index 36deae2..62956a4 100644
--- a/browser/static/htmp.js
+++ b/browser/static/htmp.js
@@ -39,13 +39,3 @@ document.querySelectorAll("form[htmp]").forEach(function (el) {
   el.action = action.toString();
   el.target = "htmp";
 });
-
-document.querySelectorAll("a[htmp]").forEach(function (el) {
-  const re = el.attributes.replace.value;
-
-  const href = new URL(el.href);
-  href.hash = re;
-  href.searchParams.set("htmp", re);
-  el.target = "htmp";
-  el.href = href.toString();
-});
diff --git a/browser/static/styles.css b/browser/static/styles.css
index 0faa49f..82bed74 100644
--- a/browser/static/styles.css
+++ b/browser/static/styles.css
@@ -78,6 +78,16 @@ input[type="submit"] {
     margin-top: 20px;
 }
 
+button.link,
+input[type="submit"].link {
+    background: none;
+    color: var(--blue);
+    padding: 0;
+    margin: 0;
+    text-decoration: underline;
+    font-family: "Inclusive Sans";
+}
+
 button.red,
 input[type="submit"].red {
     background-color: var(--red);
diff --git a/browser/templates/frag_aside.html.j2 b/browser/templates/frag_aside.html.j2
index 7ec10ad..6c5658f 100644
--- a/browser/templates/frag_aside.html.j2
+++ b/browser/templates/frag_aside.html.j2
@@ -1,13 +1,26 @@
+{#
+Params
+    selected_form   Form fragment to include
+#}
+
 <aside id="aside">
     <h3>Read operations</h3>
     <ul>
-        <li><a href="/find" htmp replace=form_query>Find</a></li>
-        <li><a href="/range" htmp replace=form_query>Range</a></li>
+        {% with href="/find", text="Find" %}
+            <li>{% include "frag_aside_link.html.j2" %}</li>
+        {% endwith %}
+        {% with href="/range", text="Range" %}
+            <li>{% include "frag_aside_link.html.j2" %}</li>
+        {% endwith %}
     </ul>
     <h3>Write operations</h3>
     <ul>
-        <li><a href="/upsert">Upsert</a></li>
-        <li><a href="/delete">Delete</a></li>
+        {% with href="/upsert", text="Upsert" %}
+            <li>{% include "frag_aside_link.html.j2" %}</li>
+        {% endwith %}
+        {% with href="/delete", text="Delete" %}
+            <li>{% include "frag_aside_link.html.j2" %}</li>
+        {% endwith %}
     </ul>
 
     {% include selected_form %}
diff --git a/browser/templates/frag_aside_link.html.j2 b/browser/templates/frag_aside_link.html.j2
new file mode 100644
index 0000000..9cd6041
--- /dev/null
+++ b/browser/templates/frag_aside_link.html.j2
@@ -0,0 +1,9 @@
+{#
+Params
+    text    Text to render in the link
+    href    URL to link to
+#}
+
+<form method="GET" action="{{ href }}" htmp replace=form_query>
+    <button class="link" type="submit">{{ text }}</button>
+</form>
diff --git a/browser/templates/frag_error.html.j2 b/browser/templates/frag_error.html.j2
index 092642f..c5034cd 100644
--- a/browser/templates/frag_error.html.j2
+++ b/browser/templates/frag_error.html.j2
@@ -1,3 +1,9 @@
+{#
+Params
+    error       Error message to display
+    container   (optional) id for a div to wrap the error message in
+#}
+
 {% if container %}
 <div id="{{ container }}">
 {% endif %}
diff --git a/browser/templates/frag_form_find.html.j2 b/browser/templates/frag_form_find.html.j2
index cadd44b..f527b45 100644
--- a/browser/templates/frag_form_find.html.j2
+++ b/browser/templates/frag_form_find.html.j2
@@ -1,4 +1,4 @@
-<form id="form_query" action="/find" method="post" htmp replace=results>
+<form id="form_query" action="/find" method="get" htmp replace=results>
     <label for="field">Field</label>
     <input type="text" name="field" id="field" required>
     <label for="values">Values (one per line)</label>