Format table and various components especially buttons

templates/feed.html

@@ -3,19 +3,19 @@
     <td>{{feed.feed_url}}</td>
     <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
     <td>
-        <button class="btn"
+        <button class="btn btn-sm"
                 hx-get="/feed/{{feed.id}}/edit/inline"
                 hx-target="#feed_{{feed.id}}"
                 hx-swap="outerHTML">
             Edit Inline
         </button>
-        <button class="btn"
+        <button class="btn btn-sm"
                 hx-get="/feed/{{feed.id}}/edit/form"
                 hx-target="body"
                 hx-swap="beforeend">
             Edit Dialog
         </button>
-        <button class="btn btn-warning"
+        <button class="btn btn-error btn-sm"
                 hx-confirm="Are you sure?"
                 hx-delete="/feed/{{feed.id}}"
                 hx-target="#feed_{{feed.id}}"

templates/index.html

@@ -4,14 +4,6 @@
 
 {% block head %}
 <style>
-    .navbar {
-        overflow: hidden;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-    }
-
     .overlay {
         width: 100%;
         height: 100%;
@@ -33,56 +25,58 @@
 {% endblock %}
 
 {% block content %}
-<nav class="navbar" style="z-index: 20">
-    <div>
-        <a href="/" style="display: flex">
-            <img src="/assets/logo.svg" style="margin:8px; height: 32px" alt="RSS Notifier Logo"/>
-            <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
-        </a>
-    </div>
-</nav>
-<div style="height: 48px; margin-bottom: 8px"></div>
 <div x-data="{'isModalOpen': false}">
-    <div style="display:flex; justify-content:flex-end">
+<nav class="navbar bg-base-100 shadow-sm overflow-hidden fixed top-0 left-0 z-20 flex justify-between">
-        <button class="btn" @click="isModalOpen = true">Create</button>
+  <a class="btn btn-ghost text-xl flex" href="/">
-    </div>
+    <img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/>
-    <div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
+    <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
-    <dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
+  </a>
-        <header>
+  <button class="btn" @click="isModalOpen = true">Create</button>
-            <h2>Create new RSS Feed subscription</h2>
+</nav>
-        </header>
+<div class="pt-16">
-        <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend" hx-indicator="#indicator"
+  <!-- TODO: Switch overlay and dialog to DaisyUI -->
-              @htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
+  <div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
-            <label>
+  <dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
-                Name
+    <header>
-                <input type="text" name="name">
+      <h2>Create new RSS Feed subscription</h2>
-            </label>
+    </header>
-            <label>
+    <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend"
-                Feed URL
+          hx-indicator="#indicator"
-                <input type="url" name="feed_url">
+          @htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
-            </label>
+      <label>
-        </form>
+        Name
-        <footer>
+        <input type="text" name="name">
-            <button class="btn" form="create_form" type="reset" @click="isModalOpen = false">Close</button>
+      </label>
-            <button class="btn" form="create_form" type="submit">
+      <label>
-                Submit
+        Feed URL
-                <img id="indicator" class="htmx-indicator" src="/assets/oval.svg" style="height: 1rem; margin-left: 2px"
+        <input type="url" name="feed_url">
-                     alt="...">
+      </label>
-            </button>
+    </form>
-        </footer>
+    <footer>
-    </dialog>
+      <button class="btn" form="create_form" type="reset" @click="isModalOpen = false">Close</button>
-    <table style="text-align:center">
+      <button class="btn" form="create_form" type="submit">
-        <thead>
+        Submit
-        <tr>
+        <img id="indicator" class="htmx-indicator" src="/assets/oval.svg"
-            <th>Feed Name</th>
+             style="height: 1rem; margin-left: 2px"
-            <th>Feed URL</th>
+             alt="...">
-            <th>Last Mail Sent</th>
+      </button>
-            <th>Actions</th>
+    </footer>
-        </tr>
+  </dialog>
-        </thead>
+  <div class="overflow-x-auto mx-4 rounded-box border border-base-content/5 bg-base-100">
-        <tbody id="feed_tbody">
+    <table class="table table-zebra">
-        {{ feeds|safe }}
+      <thead>
-        </tbody>
+      <tr>
+        <th>Feed Name</th>
+        <th>Feed URL</th>
+        <th>Last Mail Sent</th>
+        <th>Actions</th>
+      </tr>
+      </thead>
+      <tbody id="feed_tbody">
+      {{ feeds|safe }}
+      </tbody>
     </table>
+  </div>
+</div>
 </div>
 {% endblock %}