Add the content's horizontal padding for card components.

README.md

@@ -9,6 +9,9 @@
 - change the values in `.env` and `.env_db`
   you can use `mix phx.gen.secret` to generate secrets.
   update the PHX_HOST to your domain name.
+- if you don't want to pull the pre-built container
+  - uncomment the part to build the image in the `docker-compose.yaml` file
+  - comment the image part to avoid pulling.
 - run `docker compose up -d`
 - run migrations `docker exec -it dbi bin/migrate`
 - open the url (`PHX_HOST`) in a browser.

docker-compose.yml

@@ -17,8 +17,10 @@ services:
 
   web:
     # to build the image
-    build:
-      context: .
+    #build:
+    #  context: .
+    # to pull the pre-built image
+    image: git.kklochko.space/kklochko/decentralised_book_index:latest
     container_name: dbi
     ports:
       - 4000:4000

lib/decentralised_book_index_web/components/my_components/author_card.ex

@@ -63,7 +63,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorCard do
           </div>
         </div>
       <% end %>
-      <div class="flex flex-col items-center py-5 text-center">
+      <div class="flex flex-col items-center py-5 text-center px-2">
         <.link navigate={~p"/authors/#{@author.id}"}>
           <%= if @author.avatar_url != nil do %>
             <img

lib/decentralised_book_index_web/components/my_components/book_card.ex

@@ -63,7 +63,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookCard do
           </div>
         </div>
       <% end %>
-      <div class="flex flex-col items-center py-5 text-center">
+      <div class="flex flex-col items-center py-5 text-center px-2">
         <.link navigate={~p"/books/#{@book.id}"}>
           <%= if @book.cover_image_url != nil do %>
             <img class="w-36 mb-3 shadow-lg" src={@book.cover_image_url} alt={"#{@book.title} image"} />

lib/decentralised_book_index_web/components/my_components/select_author.ex

@@ -14,18 +14,54 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectAuthor do
         <label for="simple-search" class="sr-only">Search</label>
         <div class="relative w-full">
           <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
+            <svg
+              aria-hidden="true"
+              class="w-5 h-5 text-gray-500 dark:text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clip-rule="evenodd"
+              >
+              </path>
             </svg>
           </div>
-          <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Search" value="">
+          <input
+            name="query"
+            type="text"
+            phx-debounce="300"
+            autocomplete="off"
+            id="simple-search"
+            class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+            placeholder="Search"
+            value=""
+          />
         </div>
       </form>
 
-      <%= for author <- @page.results do %>
-        <div phx-click="select-author" phx-target={@notify_component} phx-value-author={author.id} phx-value-path={@form_path} class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
-          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">{author.name}</h5>
+      <%= if Enum.empty?(@page.results) do %>
+        <div class="flex justify-center ">
+          <p class="text-lg font-semibold py-5 dark:text-white">
+            No Authors
+          </p>
         </div>
+      <% else %>
+        <%= for author <- @page.results do %>
+          <div
+            phx-click="select-author"
+            phx-target={@notify_component}
+            phx-value-author={author.id}
+            phx-value-path={@form_path}
+            class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
+              {author.name}
+            </h5>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/decentralised_book_index_web/components/my_components/select_author_alias.ex

@@ -42,17 +42,25 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectAuthorAlias do
         </div>
       </form>
 
-      <%= for author_alias <- @page.results do %>
-        <div
-          phx-click="select-author-alias"
-          phx-target={@notify_component}
-          phx-value-author-alias={author_alias.author_alias_registry_id}
-          class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3"
-        >
-          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
-            {author_alias.name}
-          </h5>
+      <%= if Enum.empty?(@page.results) do %>
+        <div class="flex justify-center ">
+          <p class="text-lg font-semibold py-5 dark:text-white">
+            No Authors
+          </p>
         </div>
+      <% else %>
+        <%= for author_alias <- @page.results do %>
+          <div
+            phx-click="select-author-alias"
+            phx-target={@notify_component}
+            phx-value-author-alias={author_alias.author_alias_registry_id}
+            class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
+              {author_alias.name}
+            </h5>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/decentralised_book_index_web/components/my_components/select_book_edition.ex

@@ -42,17 +42,25 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectBookEdition do
         </div>
       </form>
 
-      <%= for book_edition <- @page.results do %>
-        <div
-          phx-click="select-book-edition"
-          phx-target={@notify_component}
-          phx-value-book-edition={book_edition.book_editions_registry_id}
-          class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3"
-        >
-          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
-            {book_edition.title}
-          </h5>
+      <%= if Enum.empty?(@page.results) do %>
+        <div class="flex justify-center ">
+          <p class="text-lg font-semibold py-5 dark:text-white">
+            No Books
+          </p>
         </div>
+      <% else %>
+        <%= for book_edition <- @page.results do %>
+          <div
+            phx-click="select-book-edition"
+            phx-target={@notify_component}
+            phx-value-book-edition={book_edition.book_editions_registry_id}
+            class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
+              {book_edition.title}
+            </h5>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/decentralised_book_index_web/components/my_components/select_publisher.ex

@@ -14,18 +14,53 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectPublisher do
         <label for="simple-search" class="sr-only">Search</label>
         <div class="relative w-full">
           <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
+            <svg
+              aria-hidden="true"
+              class="w-5 h-5 text-gray-500 dark:text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clip-rule="evenodd"
+              >
+              </path>
             </svg>
           </div>
-          <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Search" value="">
+          <input
+            name="query"
+            type="text"
+            phx-debounce="300"
+            autocomplete="off"
+            id="simple-search"
+            class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+            placeholder="Search"
+            value=""
+          />
         </div>
       </form>
 
-      <%= for publisher <- @page.results do %>
-        <div phx-click="select-publisher" phx-target={@notify_component} phx-value-publisher={publisher.id} class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
-          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">{publisher.name}</h5>
+      <%= if Enum.empty?(@page.results) do %>
+        <div class="flex justify-center ">
+          <p class="text-lg font-semibold py-5 dark:text-white">
+            No Publishers
+          </p>
         </div>
+      <% else %>
+        <%= for publisher <- @page.results do %>
+          <div
+            phx-click="select-publisher"
+            phx-target={@notify_component}
+            phx-value-publisher={publisher.id}
+            class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
+              {publisher.name}
+            </h5>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """