Small styling changes

scottmckendry · Nov 4, 2023 · 827daac · 827daac
1 parent dfe7ebc
commit 827daac
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 42 deletions.
diff --git a/views/dogs.html b/views/dogs.html
@@ -16,7 +16,7 @@
                             Add
                         </button>
                     </div>
-                    <table class="min-w-full text-left text-sm font-light">
+                    <table class="table-auto">
                         <thead
                             class="border-b font-medium dark:border-neutral-500"
                         >
@@ -31,6 +31,7 @@
                                 <th scope="col" class="px-6 py-4">Email</th>
                                 <th scope="col" class="px-6 py-4">Walks</th>
                                 <th scope="col" class="px-6 py-4">Price</th>
+                                <th scope="col" class="px-6 py-4">Actions</th>
                             </tr>
                         </thead>
                         <tbody id="table-body"></tbody>

diff --git a/views/row-add.html b/views/row-add.html
@@ -1,6 +1,6 @@
 <tr id="datarow-add" class="border-b dark:border-neutral-500">
-    <td class="whitespace-nowrap px-6 py-4"></td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4"></td>
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -9,7 +9,7 @@
             value=""
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -18,7 +18,7 @@
             value=""
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -27,7 +27,7 @@
             value=""
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -36,7 +36,7 @@
             value=""
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -45,7 +45,7 @@
             value=""
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -54,7 +54,7 @@
             value=""
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -63,23 +63,21 @@
             value=""
         />
     </td>
-    <td class="whitespace-nowrap px-1 py-1">
+    <td class="px-1 py-1">
         <a
             hx-post="/dogs/"
             hx-target="#dogs"
             hx-indicator="#processing"
             hx-include="input[data-include-add]"
-            class="inline-flex items-center h-8 px-4 m-2 text-sm text-blue-100 transition-colors duration-150 bg-blue-700 rounded-lg focus:shadow-outline hover:bg-blue-800"
+            class="hover:underline text-blue-700"
             href=""
             >Save</a
         >
-    </td>
-    <td class="whitespace-nowrap px-1 py-1">
         <a
             hx-get="/dogs/"
             hx-target="#dogs"
             hx-indicator="#processing"
-            class="inline-flex items-center h-8 px-4 m-2 text-sm text-red-100 transition-colors duration-150 bg-red-700 rounded-lg focus:shadow-outline hover:bg-red-800"
+            class="hover:underline text-blue-700"
             href=""
             >Cancel</a
         >

diff --git a/views/row-edit.html b/views/row-edit.html
@@ -1,6 +1,6 @@
 <tr id="datarow-{{.ID}}" class="border-b dark:border-neutral-500">
-    <td class="whitespace-nowrap px-6 py-4">{{.ID}}</td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">{{.ID}}</td>
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -9,7 +9,7 @@
             value="{{.Name}}"
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -18,7 +18,7 @@
             value="{{.OwnerName}}"
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -27,7 +27,7 @@
             value="{{.Address}}"
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -36,7 +36,7 @@
             value="{{.City}}"
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -45,7 +45,7 @@
             value="{{.Email}}"
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -54,7 +54,7 @@
             value="{{.WalksPerWeek}}"
         />
     </td>
-    <td class="whitespace-nowrap px-6 py-4">
+    <td class="px-6 py-4">
         <input
             type="text"
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
@@ -63,24 +63,22 @@
             value="{{.PricePerWalk}}"
         />
     </td>
-    <td class="whitespace-nowrap px-1 py-1">
+    <td class="px-1 py-1">
         <a
             hx-put="/dogs/{{.ID}}"
             hx-target="#dogs"
             hx-indicator="#processing"
             hx-include="input[data-include-edit]"
-            class="inline-flex items-center h-8 px-4 m-2 text-sm text-blue-100 transition-colors duration-150 bg-blue-700 rounded-lg focus:shadow-outline hover:bg-blue-800"
+            class="hover:underline text-blue-700"
             href=""
             >Save</a
         >
-    </td>
-    <td class="whitespace-nowrap px-1 py-1">
         <a
             hx-get="/dogs/"
             hx-target="#dogs"
             hx-indicator="#processing"
-            class="inline-flex items-center h-8 px-4 m-2 text-sm text-red-100 transition-colors duration-150 bg-red-700 rounded-lg focus:shadow-outline hover:bg-red-800"
             href=""
+            class="hover:underline text-blue-700"
             >Cancel</a
         >
     </td>

diff --git a/views/row.html b/views/row.html
@@ -1,13 +1,13 @@
 <tr id="datarow-{{.ID}}" class="border-b dark:border-neutral-500">
-    <td class="whitespace-nowrap px-6 py-4">{{.ID}}</td>
-    <td class="whitespace-nowrap px-6 py-4">{{.Name}}</td>
-    <td class="whitespace-nowrap px-6 py-4">{{.OwnerName}}</td>
-    <td class="whitespace-nowrap px-6 py-4">{{.Address}}</td>
-    <td class="whitespace-nowrap px-6 py-4">{{.City}}</td>
-    <td class="whitespace-nowrap px-6 py-4">{{.Email}}</td>
-    <td class="whitespace-nowrap px-6 py-4">{{.WalksPerWeek}}</td>
-    <td class="whitespace-nowrap px-6 py-4">{{.PricePerWalk}}</td>
-    <td class="whitespace-nowrap px-1 py-1">
+    <td class="px-6 py-4">{{.ID}}</td>
+    <td class="px-6 py-4">{{.Name}}</td>
+    <td class="px-6 py-4">{{.OwnerName}}</td>
+    <td class="px-6 py-4">{{.Address}}</td>
+    <td class="px-6 py-4">{{.City}}</td>
+    <td class="px-6 py-4">{{.Email}}</td>
+    <td class="px-6 py-4">{{.WalksPerWeek}}</td>
+    <td class="px-6 py-4">{{.PricePerWalk}}</td>
+    <td class="px-1 py-1">
         <a
             hx-get="/dogs/edit/{{.ID}}"
             hx-target="#datarow-{{.ID}}"
@@ -18,8 +18,6 @@
         >
             Edit
         </a>
-    </td>
-    <td class="whitespace-nowrap px-1 py-1">
         <a
             hx-delete="/dogs/{{.ID}}"
             hx-target="#dogs"
@@ -29,17 +27,13 @@
             href=""
             >Delete</a
         >
-    </td>
-    <td class="whitespace-nowrap px-1 py-1">
         <a
             class="hover:underline text-blue-700"
             href="/invoice/{{.ID}}"
             rel="noopener noreferrer"
             target="_blank"
             >Preview</a
         >
-    </td>
-    <td class="whitespace-nowrap px-1 py-1">
         <a
             hx-post="/invoice/{{.ID}}"
             hx-target="#dogs"