Cleanup audit page somewhat

11 months ago · cb5616c81f
parent d219c136c0
commit cb5616c81f
3 changed files with 48 additions and 39 deletions
--- a/templates/history.html
+++ b/templates/history.html
@ -1,63 +1,63 @@
 {% extends "main.html" %} {% block title %} Audit Log {% endblock %} {% block
 content %}

-<h1>Audit Log (Coming soon)</h1>
+<h1 class="mb-4 text-4xl font-extrabold uppercase">Audit Log (Coming soon)</h1>

-<section class="container mb-4">
+<section class="mb-4">
  <form
    action="/history"
    hx-get="/history"
    hx-trigger="change"
    hx-target="#items"
  >
-    <div class="row">
-      <div class="col-sm-2">
-        <label for="start-date" class="form-label">Start Date</label>
+    <div class="flex between">
+      <div class="px-2">
+        <label for="start-date" class="block">Start Date</label>
        <input
          type="date"
          id="start-date"
          name="start-date"
          value="{{ start_date }}"
-          class="form-control"
+          class="block"
        />
      </div>
-      <div class="col-sm-2">
-        <label for="start-time" class="form-label">Start Time</label>
+      <div class="px-2">
+        <label for="start-time" class="block">Start Time</label>
        <input
          type="time"
          id="start-time"
          name="start-time"
          value="{{ start_time }}"
-          class="form-control"
+          class="block"
        />
-        <small class="form-text">Timezone {{ time_zone }}</small>
+        <small class="block text-sm">Timezone {{ time_zone }}</small>
      </div>
-      <div class="col-sm-2">
-        <label for="end-date" class="form-label">End Date</label>
+      <div class="px-2">
+        <label for="end-date" class="block">End Date</label>
        <input
          type="date"
          id="end-date"
          name="end-date"
          value="{{ end_date }}"
-          class="form-control"
+          class="block"
        />
      </div>
-      <div class="col-sm-2">
+      <div class="px-2">
        <label for="end-time" class="form-label">End Time</label>
        <input
          type="time"
          id="end-time"
          name="end-time"
          value="{{ end_time }}"
-          class="form-control"
+          class="block"
        />
-        <small class="form-text">Timezone {{ time_zone }}</small>
+        <small class="text-sm block">Timezone {{ time_zone }}</small>
      </div>
    </div>
  </form>
 </section>

-<section id="items" class="container">
+<section id="items" class="mb-4">
  {% include "history_item_fragment.html" %}
 </section>

--- a/templates/history_item_fragment.html
+++ b/templates/history_item_fragment.html
@ -1,20 +1,29 @@
-<div class="card">
-  <ul class="list-group list-group-flush">
+<table class="table-auto">
+  <thead>
+    <tr class="mb-2">
+      <th>Date</th>
+      <th>Item</th>
+      <th>User</th>
+      <th>Desc</th>
+    </tr>
+  </thead>
+  <tbody>
  {% for item in items %}
-    <li class="list-group-item">
-      <div class="row">
-        <p class="col">{{ item.create_date }}</p>
-        <p class="col">{{ item.item_name }}</p>
-        <p class="col">{{ item.user_name }}</p>
-        <p class="col">
-          {% match item.item_type %} {% when
-          HistoryItemEntry::PositiveAdjustment with (entry) %} {{ entry.amount
-          }} @ {{ entry.unit_value }} {% when
-          HistoryItemEntry::NegativeAdjustment with (entry) %} {{ entry.amount
-          }} {{ entry.reason }} {% endmatch %}
-        </p>
-      </div>
-    </li>
+  <tr class="mb-2">
+    <td class="px-2">{{ item.create_date }}</td>
+    <td class="px-2">{{ item.item_name }}</td>
+    <td class="px-2">{{ item.user_name }}</td>
+    <td class="px-2">
+      {% match item.item_type %}
+      {% when HistoryItemEntry::PositiveAdjustment with (entry) %}
+      {{ entry.amount }} @ {{ entry.unit_value }}
+      {% when HistoryItemEntry::NegativeAdjustment with (entry) %}
+      {{ entry.amount }} {{ entry.reason }}
+      {% endmatch %}
+    </td>
+  </tr>
  {% endfor %}
-  </ul>
-</div>
+
+  </tbody>
+</table>
+
--- a/templates/main.html
+++ b/templates/main.html
@ -18,7 +18,7 @@
  <body
    class="min-h-screen bg-slate-100 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100"
  >
-    <header class="mx-auto mb-4 bg-space-cadet font-sans">
+    <header class="top-0 w-full mb-4 bg-space-cadet font-sans">
      <nav
        class="mx-auto flex max-w-7xl justify-between gap-2 px-2 py-4 sm:px-6 lg:px-8"
      >
@ -65,7 +65,7 @@
      </nav>
    </header>
    <main
-      class="mx-auto bg-slate-100 px-1 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100"
+      class="relative mx-auto max-w-[68.75rem] w-[95vw] bg-slate-100 px-1 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100"
    >
      {% block content %}
      <p>Content Missing</p>