From 0d537963abd439c275b42d72f2ac91293aca6ed5 Mon Sep 17 00:00:00 2001
From: Zynh0722 <Zynh0722@gmail.com>
Date: Wed, 15 Nov 2023 13:39:39 -0800
Subject: [PATCH] styling and formatting for dancer page (incomplete)

---
 templates/components/dancer.rs.html |  7 +--
 templates/dancers.rs.html           | 76 +++++++++++++++++------------
 2 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/templates/components/dancer.rs.html b/templates/components/dancer.rs.html
index 619f967..0d4d48d 100644
--- a/templates/components/dancer.rs.html
+++ b/templates/components/dancer.rs.html
@@ -2,7 +2,8 @@
 
 @(dancer: Dancer)
 
-<tr>
-  <td>@dancer.name</td>
-  <td>@dancer.stage_name</td>
+<tr class="bg-white even:bg-neutral-50 border-b">
+  <td class="text-center px-6 py-3">@dancer.name</td>
+  <td class="text-center px-6 py-3">@dancer.stage_name</td>
+  <td></td>
 </tr>
diff --git a/templates/dancers.rs.html b/templates/dancers.rs.html
index 8311615..3f40cea 100644
--- a/templates/dancers.rs.html
+++ b/templates/dancers.rs.html
@@ -11,44 +11,58 @@
   @:return_to_main_html()
 </div>
 
-<form hx-post="/api/dancers" hx-target="next #dancer_list" hx-swap="afterbegin" hx-on::after-request=" if(event.detail.successful) this.reset()">
-  <div class="flex w-3/5">
-    <div class="relative">
-      <input type="text" id="name" name="name"
-        class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
-        placeholder=" " />
-      <label for="name"
-        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1">
-        Name
-      </label>
-    </div>
-    <div class="relative">
-      <input type="text" id="stage_name" name="stage_name"
-        class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
-        placeholder=" " />
-      <label for="stage_name"
-        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1">
-        Stage Name
-      </label>
-    </div>
-    <button type="submit"
-      class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5">+</button>
-  </div>
-</form>
+<h1 class="text-4xl underline text-center pt-4 pb-6">
+    Dancers
+</h1>
 
-<table>
-  <thead>
+<table class="m-auto table-auto w-4/5">
+  <thead class="text-xs text-gray-700 bg-gray-50">
     <tr>
-      <th>Name</th>
-      <th>Stage Name</th>
+      <th scope="col" class="px-6 py-3">Name</th>
+      <th scope="col" class="px-6 py-3">Stage Name</th>
+      <th></th>
     </tr>
   </thead>
+
   <tbody id="dancer_list">
-      @for dancer in dancers.into_iter() {
+    <tr hx-target="this" class="bg-white even:bg-neutral-50 border-b">
+      <form hx-post="/api/dancers" hx-swap="afterend"
+        hx-on::after-request=" if(event.detail.successful) this.reset()">
+        <td>
+          <div class="relative">
+            <input type="text" id="name" name="name"
+              class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
+              placeholder=" " />
+            <label for="name"
+              class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1">
+              Name
+            </label>
+          </div>
+        </td>
+        <td>
+          <div class="relative">
+            <input type="text" id="stage_name" name="stage_name"
+              class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
+              placeholder=" " />
+            <label for="stage_name"
+              class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1">
+              Stage Name
+            </label>
+          </div>
+        </td>
 
-        @:dancer_html(dancer)
+        <td class="w-10 h-full">
+          <button type="submit"
+            class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm w-full h-full">+</button>
+        </td>
 
-      }
+      </form>
+    </tr>
+    @for dancer in dancers.into_iter() {
+
+    @:dancer_html(dancer)
+
+    }
   </tbody>
 </table>