rewritten after codex recommendations

2026-07-18 20:27:19 +02:00
parent f9dc885937
commit 399f539b4f
22 changed files with 1448 additions and 996 deletions
@@ -1,51 +1,78 @@
 {% extends "common.html" %}
-
-
+{% block title %}Your vault · Flowers{% endblock %}
+{% block menuoptions %}
+  <form action="{{ url_for('flower_vase.application') }}" method="post">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+    <input type="hidden" name="action" value="new">
+    <button class="button primary compact" type="submit">New entry</button>
+  </form>
+  <form action="{{ url_for('flower_vase.application') }}" method="post">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+    <input type="hidden" name="action" value="rehush">
+    <button class="button ghost compact" type="submit">Password</button>
+  </form>
+  <form action="{{ url_for('flower_vase.application') }}" method="post">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+    <input type="hidden" name="action" value="logout">
+    <button class="button ghost compact" type="submit">Sign out</button>
+  </form>
+{% endblock %}
 {% block content %}
+<section class="vault-header">
+  <div>
+    <p class="eyebrow">Active entries</p>
+    <h1>Your vault</h1>
+  </div>
+  <label class="search-field" for="search">
+    <span class="sr-only">Search entries</span>
+    <input id="search" type="search" placeholder="Search organization or login" value="{{ filter|default('') }}" autocomplete="off">
+  </label>
+</section>

-<div class="content-wrapper">
-    <div class="content">
-        <div class="pure-g">
-            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-5">
-
-            </div>
-            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
-                <table id="flowerlist" class="flowerlist pure-table pure-table-horizontal">
-                    {% for flower in flowers %}
-                    <tr class="flowerlist">
-                        <td class="flowerlist">
-                        <a href="javascript:DoSubmit('show', '{{flower.organization}}', '{{flower.dateCreated}}' , '')">
-                        {{ flower.organization }}, {{ flower.myID }}
-                        </a>
-                        </td>
-                        <td class="right"><span style="white-space: nowrap;">{{ flower.dateCreated[:10] }}</span></td>
-                    </tr>
-                    {% endfor %}
-                </table>
-
-            </div>
-            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-5">
-
-            </div>
-        </div>
-    </div>
-
+<div class="entry-list" id="entry-list">
+  {% for flower in flowers %}
+  <form class="entry-row" data-search="{{ flower.organization }} {{ flower.myID }}" action="{{ url_for('flower_vase.application') }}" method="post">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+    <input type="hidden" name="action" value="show">
+    <input type="hidden" name="organization" value="{{ flower.organization }}">
+    <input type="hidden" name="datetime" value="{{ flower.dateCreated }}">
+    <input type="hidden" name="filter" class="current-filter" value="{{ filter|default('') }}">
+    <button type="submit" class="entry-button">
+      <span class="entry-icon" aria-hidden="true">{{ flower.organization[:1]|upper }}</span>
+      <span class="entry-copy">
+        <strong>{{ flower.organization }}</strong>
+        <span>{{ flower.myID }}</span>
+      </span>
+      <time datetime="{{ flower.dateCreated }}">{{ flower.dateCreated[:10] }}</time>
+      <span class="chevron" aria-hidden="true">›</span>
+    </button>
+  </form>
+  {% else %}
+  <div class="empty-state">
+    <span aria-hidden="true">✣</span>
+    <h2>No active entries</h2>
+    <p>Create an entry to start your collection.</p>
+  </div>
+  {% endfor %}
 </div>
+<p class="empty-state filtered-empty" id="filtered-empty" hidden>No entries match that search.</p>

-<script language="javascript">
-
-var $rows = $('#flowerlist tr');
-$('#search').keyup(function() {
-    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
-
-    $rows.show().filter(function() {
-        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
-        return !~text.indexOf(val);
-    }).hide();
-});
-
-$('#search').keyup();
-
+<script>
+  const search = document.querySelector('#search');
+  const rows = [...document.querySelectorAll('.entry-row')];
+  const filteredEmpty = document.querySelector('#filtered-empty');
+  function filterRows() {
+    const query = search.value.trim().toLocaleLowerCase();
+    let visible = 0;
+    rows.forEach((row) => {
+      const match = row.dataset.search.toLocaleLowerCase().includes(query);
+      row.hidden = !match;
+      row.querySelector('.current-filter').value = search.value;
+      if (match) visible += 1;
+    });
+    filteredEmpty.hidden = visible !== 0 || rows.length === 0;
+  }
+  search.addEventListener('input', filterRows);
+  filterRows();
 </script>
-
-{% endblock content %}
+{% endblock %}