improve container card style

lib/cannery_web/components/container_card.ex

@@ -23,7 +23,7 @@ defmodule CanneryWeb.Components.ContainerCard do
     ~H"""
     <div
       id={"container-#{@container.id}"}
-      class="overflow-hidden max-w-full mx-4 my-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
+      class="overflow-hidden max-w-full mx-4 mb-2 px-8 py-4 flex flex-col justify-center items-center space-y-4
         border border-gray-400 rounded-lg shadow-lg hover:shadow-md
         transition-all duration-300 ease-in-out"
     >

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

@@ -42,65 +42,63 @@
     </div>
   <% end %>
 
-  <div class="w-full flex flex-row flex-wrap justify-center items-center">
+  <%= if @containers |> Enum.empty?() do %>
-    <%= if @containers |> Enum.empty?() do %>
+    <h2 class="title text-xl text-primary-600">
-      <h2 class="title text-xl text-primary-600">
+      <%= gettext("No containers") %>
-        <%= gettext("No containers") %>
+      <%= display_emoji("😔") %>
-        <%= display_emoji("😔") %>
+    </h2>
-      </h2>
+  <% else %>
+    <%= if @view_table do %>
+      <.live_component
+        module={CanneryWeb.Components.ContainerTableComponent}
+        id="containers_index_table"
+        action={@live_action}
+        containers={@containers}
+        current_user={@current_user}
+      >
+        <:tag_actions :let={container}>
+          <div class="mx-4 my-2">
+            <.link
+              patch={Routes.container_index_path(Endpoint, :edit_tags, container)}
+              class="text-primary-600 link"
+            >
+              <i class="fa-fw fa-lg fas fa-tags"></i>
+            </.link>
+          </div>
+        </:tag_actions>
+        <:actions :let={container}>
+          <.link
+            patch={Routes.container_index_path(Endpoint, :edit, container)}
+            class="text-primary-600 link"
+            data-qa={"edit-#{container.id}"}
+          >
+            <i class="fa-fw fa-lg fas fa-edit"></i>
+          </.link>
+
+          <.link
+            patch={Routes.container_index_path(Endpoint, :clone, container)}
+            class="text-primary-600 link"
+            data-qa={"clone-#{container.id}"}
+          >
+            <i class="fa-fw fa-lg fas fa-copy"></i>
+          </.link>
+
+          <.link
+            href="#"
+            class="text-primary-600 link"
+            phx-click="delete"
+            phx-value-id={container.id}
+            data-confirm={
+              dgettext("prompts", "Are you sure you want to delete %{name}?", name: container.name)
+            }
+            data-qa={"delete-#{container.id}"}
+          >
+            <i class="fa-fw fa-lg fas fa-trash"></i>
+          </.link>
+        </:actions>
+      </.live_component>
     <% else %>
-      <%= if @view_table do %>
+      <div class="w-full flex flex-row flex-wrap justify-center items-stretch">
-        <.live_component
-          module={CanneryWeb.Components.ContainerTableComponent}
-          id="containers_index_table"
-          action={@live_action}
-          containers={@containers}
-          current_user={@current_user}
-        >
-          <:tag_actions :let={container}>
-            <div class="mx-4 my-2">
-              <.link
-                patch={Routes.container_index_path(Endpoint, :edit_tags, container)}
-                class="text-primary-600 link"
-              >
-                <i class="fa-fw fa-lg fas fa-tags"></i>
-              </.link>
-            </div>
-          </:tag_actions>
-          <:actions :let={container}>
-            <.link
-              patch={Routes.container_index_path(Endpoint, :edit, container)}
-              class="text-primary-600 link"
-              data-qa={"edit-#{container.id}"}
-            >
-              <i class="fa-fw fa-lg fas fa-edit"></i>
-            </.link>
-
-            <.link
-              patch={Routes.container_index_path(Endpoint, :clone, container)}
-              class="text-primary-600 link"
-              data-qa={"clone-#{container.id}"}
-            >
-              <i class="fa-fw fa-lg fas fa-copy"></i>
-            </.link>
-
-            <.link
-              href="#"
-              class="text-primary-600 link"
-              phx-click="delete"
-              phx-value-id={container.id}
-              data-confirm={
-                dgettext("prompts", "Are you sure you want to delete %{name}?",
-                  name: container.name
-                )
-              }
-              data-qa={"delete-#{container.id}"}
-            >
-              <i class="fa-fw fa-lg fas fa-trash"></i>
-            </.link>
-          </:actions>
-        </.live_component>
-      <% else %>
         <%= for container <- @containers do %>
           <.container_card container={container}>
             <:tag_actions>
@@ -145,9 +143,9 @@
             </.link>
           </.container_card>
         <% end %>
-      <% end %>
+      </div>
     <% end %>
-  </div>
+  <% end %>
 </div>
 
 <%= if @live_action in [:new, :edit, :clone] do %>

priv/gettext/de/LC_MESSAGES/default.po

@@ -294,7 +294,7 @@ msgid "No ammo for this type"
 msgstr "Keine Munition dieser Art"
 
 #: lib/cannery_web/live/container_live/index.html.heex:8
-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.html.heex:47
 #, elixir-autogen, elixir-format
 msgid "No containers"
 msgstr "Kein Behälter"

priv/gettext/de/LC_MESSAGES/prompts.po

@@ -82,8 +82,8 @@ msgstr ""
 "Sind Sie sicher, dass sie %{email} löschen möchten? Dies kann nicht "
 "zurückgenommen werden!"
 
-#: lib/cannery_web/live/container_live/index.html.heex:93
+#: lib/cannery_web/live/container_live/index.html.heex:92
-#: lib/cannery_web/live/container_live/index.html.heex:138
+#: lib/cannery_web/live/container_live/index.html.heex:136
 #: lib/cannery_web/live/container_live/show.html.heex:59
 #: lib/cannery_web/live/tag_live/index.html.heex:64
 #, elixir-autogen, elixir-format

priv/gettext/default.pot

@@ -279,7 +279,7 @@ msgid "No ammo for this type"
 msgstr ""
 
 #: lib/cannery_web/live/container_live/index.html.heex:8
-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.html.heex:47
 #, elixir-autogen, elixir-format
 msgid "No containers"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -280,7 +280,7 @@ msgid "No ammo for this type"
 msgstr ""
 
 #: lib/cannery_web/live/container_live/index.html.heex:8
-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.html.heex:47
 #, elixir-autogen, elixir-format
 msgid "No containers"
 msgstr ""

priv/gettext/en/LC_MESSAGES/prompts.po

@@ -68,8 +68,8 @@ msgstr ""
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
 
-#: lib/cannery_web/live/container_live/index.html.heex:93
+#: lib/cannery_web/live/container_live/index.html.heex:92
-#: lib/cannery_web/live/container_live/index.html.heex:138
+#: lib/cannery_web/live/container_live/index.html.heex:136
 #: lib/cannery_web/live/container_live/show.html.heex:59
 #: lib/cannery_web/live/tag_live/index.html.heex:64
 #, elixir-autogen, elixir-format

priv/gettext/es/LC_MESSAGES/default.po

@@ -294,7 +294,7 @@ msgid "No ammo for this type"
 msgstr ""
 
 #: lib/cannery_web/live/container_live/index.html.heex:8
-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.html.heex:47
 #, elixir-autogen, elixir-format
 msgid "No containers"
 msgstr ""

priv/gettext/es/LC_MESSAGES/prompts.po

@@ -82,8 +82,8 @@ msgstr ""
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr "Está seguro que desea eliminar %{email}? Esta acción es permanente!"
 
-#: lib/cannery_web/live/container_live/index.html.heex:93
+#: lib/cannery_web/live/container_live/index.html.heex:92
-#: lib/cannery_web/live/container_live/index.html.heex:138
+#: lib/cannery_web/live/container_live/index.html.heex:136
 #: lib/cannery_web/live/container_live/show.html.heex:59
 #: lib/cannery_web/live/tag_live/index.html.heex:64
 #, elixir-autogen, elixir-format

priv/gettext/fr/LC_MESSAGES/default.po

@@ -294,7 +294,7 @@ msgid "No ammo for this type"
 msgstr "Aucune munition pour ce type"
 
 #: lib/cannery_web/live/container_live/index.html.heex:8
-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.html.heex:47
 #, elixir-autogen, elixir-format
 msgid "No containers"
 msgstr "Aucun conteneur"

priv/gettext/fr/LC_MESSAGES/prompts.po

@@ -83,8 +83,8 @@ msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
 "Êtes-vous certain·e de supprimer %{email} ? Cette action est définitive !"
 
-#: lib/cannery_web/live/container_live/index.html.heex:93
+#: lib/cannery_web/live/container_live/index.html.heex:92
-#: lib/cannery_web/live/container_live/index.html.heex:138
+#: lib/cannery_web/live/container_live/index.html.heex:136
 #: lib/cannery_web/live/container_live/show.html.heex:59
 #: lib/cannery_web/live/tag_live/index.html.heex:64
 #, elixir-autogen, elixir-format

priv/gettext/ga/LC_MESSAGES/default.po

@@ -290,7 +290,7 @@ msgid "No ammo for this type"
 msgstr ""
 
 #: lib/cannery_web/live/container_live/index.html.heex:8
-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.html.heex:47
 #, elixir-autogen, elixir-format
 msgid "No containers"
 msgstr ""

priv/gettext/ga/LC_MESSAGES/prompts.po

@@ -78,8 +78,8 @@ msgstr ""
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
 
-#: lib/cannery_web/live/container_live/index.html.heex:93
+#: lib/cannery_web/live/container_live/index.html.heex:92
-#: lib/cannery_web/live/container_live/index.html.heex:138
+#: lib/cannery_web/live/container_live/index.html.heex:136
 #: lib/cannery_web/live/container_live/show.html.heex:59
 #: lib/cannery_web/live/tag_live/index.html.heex:64
 #, elixir-autogen, elixir-format

priv/gettext/prompts.pot

@@ -67,8 +67,8 @@ msgstr ""
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
 
-#: lib/cannery_web/live/container_live/index.html.heex:93
+#: lib/cannery_web/live/container_live/index.html.heex:92
-#: lib/cannery_web/live/container_live/index.html.heex:138
+#: lib/cannery_web/live/container_live/index.html.heex:136
 #: lib/cannery_web/live/container_live/show.html.heex:59
 #: lib/cannery_web/live/tag_live/index.html.heex:64
 #, elixir-autogen, elixir-format