style ammo type index

lib/cannery_web/live/ammo_type_live/form_component.ex

@@ -35,7 +35,7 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do
   def render(assigns) do
     ~H"""
     <div>
-      <h2>
+      <h2 class="title text-xl text-primary-500">
         <%= @title %>
       </h2>
       <.form
@@ -45,26 +45,52 @@ defmodule CanneryWeb.AmmoTypeLive.FormComponent do
         phx-target={@myself}
         phx-change="validate"
         phx-submit="save"
+        class="grid grid-cols-3 justify-center items-center space-y-4"
       >
-        <%= label(f, :name, class: "title text-lg text-primary-500") %>
-        <%= text_input(f, :name, class: "input input-primary") %>
+        <%= label(f, :name, class: "mr-4 title text-lg text-primary-500") %>
+        <%= text_input(f, :name, class: "text-center col-span-2 input input-primary") %>
+        <div class="col-span-3 text-center">
           <%= error_tag(f, :name) %>
-        <%= label(f, :desc, class: "title text-lg text-primary-500") %>
-        <%= text_input(f, :desc, class: "input input-primary") %>
+        </div>
+
+        <%= label(f, :desc, class: "mr-4 title text-lg text-primary-500") %>
+        <%= textarea(f, :desc,
+          class: "text-center col-span-2 input input-primary",
+          phx_hook: "MaintainAttrs") %>
+        <div class="col-span-3 text-center">
           <%= error_tag(f, :desc) %>
-        <%= label(f, :case_material, class: "title text-lg text-primary-500") %>
-        <%= text_input(f, :case_material, class: "input input-primary") %>
+        </div>
+
+        <%= label(f, :case_material, class: "mr-4 title text-lg text-primary-500") %>
+        <%= text_input(f, :case_material, class: "text-center col-span-2 input input-primary") %>
+        <div class="col-span-3 text-center">
           <%= error_tag(f, :case_material) %>
-        <%= label(f, :bullet_type, class: "title text-lg text-primary-500") %>
-        <%= text_input(f, :bullet_type, class: "input input-primary") %>
+        </div>
+
+        <%= label(f, :bullet_type, class: "mr-4 title text-lg text-primary-500") %>
+        <%= text_input(f, :bullet_type, class: "text-center col-span-2 input input-primary") %>
+        <div class="col-span-3 text-center">
           <%= error_tag(f, :bullet_type) %>
-        <%= label(f, :weight, class: "title text-lg text-primary-500") %>
-        <%= number_input(f, :weight, step: "any") %>
-        <%= error_tag(f, :weight) %>
-        <%= label(f, :manufacturer, class: "title text-lg text-primary-500") %>
-        <%= text_input(f, :manufacturer, class: "input input-primary") %>
+        </div>
+
+        <%= label(f, :grain, class: "mr-4 title text-lg text-primary-500") %>
+        <%= number_input(f, :grain,
+          step: "any",
+          class: "text-center col-span-2 input input-primary",
+          min: 0) %>
+        <div class="col-span-3 text-center">
+          <%= error_tag(f, :grain) %>
+        </div>
+
+        <%= label(f, :manufacturer, class: "mr-4 title text-lg text-primary-500") %>
+        <%= text_input(f, :manufacturer, class: "text-center col-span-2 input input-primary") %>
+        <div class="col-span-3 text-center">
           <%= error_tag(f, :manufacturer) %>
-        <%= submit("Save", phx_disable_with: "Saving...") %>
+        </div>
+
+        <%= submit("Save",
+          phx_disable_with: "Saving...",
+          class: "mx-auto col-span-3 btn btn-primary") %>
       </.form>
     </div>
     """

lib/cannery_web/live/ammo_type_live/index.html.heex

@@ -0,0 +1,51 @@
+<div class="mx-8 flex flex-col space-y-8 justify-center items-center">
+  <h1 class="title text-2xl title-primary-500">
+    Listing Ammo Types
+  </h1>
+
+  <%= live_patch "New Ammo type",
+    to: Routes.ammo_type_index_path(@socket, :new),
+    class: "btn btn-primary" %>
+
+  <div class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-black">
+    <table class="min-w-full table-auto text-center bg-white">
+      <thead class="border-b border-primary-600">
+        <tr>
+          <th class="p-2">Name</th>
+          <th class="p-2">Case material</th>
+          <th class="p-2">Bullet type</th>
+          <th class="p-2">Grain</th>
+          <th class="p-2">Manufacturer</th>
+
+          <th class="p-2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <%= for ammo_type <- @ammo_types do %>
+          <tr id={"ammo_type-#{ammo_type.id}"}>
+            <td class="p-2"><%= ammo_type.name %></td>
+            <td class="p-2"><%= ammo_type.case_material %></td>
+            <td class="p-2"><%= ammo_type.bullet_type %></td>
+            <td class="p-2"><%= ammo_type.grain %></td>
+            <td class="p-2"><%= ammo_type.manufacturer %></td>
+
+            <td class="p-2 w-full h-full space-y-2 flex flex-col justify-center items-center">
+              <span><%= live_redirect "Show", to: Routes.ammo_type_show_path(@socket, :show, ammo_type) %></span>
+              <span><%= live_patch "Edit", to: Routes.ammo_type_index_path(@socket, :edit, ammo_type) %></span>
+              <span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: ammo_type.id, data: [confirm: "Are you sure?"] %></span>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<%= if @live_action in [:new, :edit] do %>
+  <%= live_modal CanneryWeb.AmmoTypeLive.FormComponent,
+    id: @ammo_type.id || :new,
+    title: @page_title,
+    action: @live_action,
+    ammo_type: @ammo_type,
+    return_to: Routes.ammo_type_index_path(@socket, :index) %>
+<% end %>

lib/cannery_web/live/ammo_type_live/index.html.leex

@@ -1,45 +0,0 @@
-<h1>Listing Ammo types</h1>
-
-<%= if @live_action in [:new, :edit] do %>
-  <%= live_modal CanneryWeb.AmmoTypeLive.FormComponent,
-    id: @ammo_type.id || :new,
-    title: @page_title,
-    action: @live_action,
-    ammo_type: @ammo_type,
-    return_to: Routes.ammo_type_index_path(@socket, :index) %>
-<% end %>
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Desc</th>
-      <th>Case material</th>
-      <th>Bullet type</th>
-      <th>Weight</th>
-      <th>Manufacturer</th>
-
-      <th></th>
-    </tr>
-  </thead>
-  <tbody id="ammo_types">
-    <%= for ammo_type <- @ammo_types do %>
-      <tr id="ammo_type-<%= ammo_type.id %>">
-        <td><%= ammo_type.name %></td>
-        <td><%= ammo_type.desc %></td>
-        <td><%= ammo_type.case_material %></td>
-        <td><%= ammo_type.bullet_type %></td>
-        <td><%= ammo_type.weight %></td>
-        <td><%= ammo_type.manufacturer %></td>
-
-        <td>
-          <span><%= live_redirect "Show", to: Routes.ammo_type_show_path(@socket, :show, ammo_type) %></span>
-          <span><%= live_patch "Edit", to: Routes.ammo_type_index_path(@socket, :edit, ammo_type) %></span>
-          <span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: ammo_type.id, data: [confirm: "Are you sure?"] %></span>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
-
-<span><%= live_patch "New Ammo type", to: Routes.ammo_type_index_path(@socket, :new) %></span>