From 01c14a2d0a8a559b737ab5f7cc8e5ed17a239e50 Mon Sep 17 00:00:00 2001
From: Amin Zare <119476867+AminEdZare@users.noreply.github.com>
Date: Fri, 8 Nov 2024 17:17:52 -0500
Subject: [PATCH] implements gray background image placeholders for search and
 item pages, temporary alt text to be replaced with file set labels

---
 lib/dpul_collections_web/live/item_live.ex   | 23 ++++++++++++----
 lib/dpul_collections_web/live/search_live.ex | 29 ++++++++++++--------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/lib/dpul_collections_web/live/item_live.ex b/lib/dpul_collections_web/live/item_live.ex
index 50cabe2e..ea178283 100644
--- a/lib/dpul_collections_web/live/item_live.ex
+++ b/lib/dpul_collections_web/live/item_live.ex
@@ -37,12 +37,14 @@ defmodule DpulCollectionsWeb.ItemLive do
         <div class="pb-4"><%= @item.date %></div>
       </div>
       <div class="md:col-span-2 md:order-first">
-        <img class="w-full" src="https://picsum.photos/525/800/?random"
-        alt="gray_image_placeholder"
-        style="
+        <img
+          class="w-full"
+          src="https://picsum.photos/525/800/?random"
+          alt="main image display"
+          style="
           background-color: lightgray;"
-        width="525"
-        height="800"
+          width="525"
+          height="800"
         />
         <button class="w-full btn-primary">
           Download
@@ -51,7 +53,11 @@ defmodule DpulCollectionsWeb.ItemLive do
       <section class="md:col-span-5 m:order-last py-4">
         <h2 class="text-l font-bold py-4">Pages (<%= @item.page_count %>)</h2>
         <div class="flex flex-wrap gap-5 justify-center md:justify-start">
-          <.thumbs :for={_thumb <- 1..@item.page_count} :if={@item.page_count} />
+          <.thumbs
+            :for={thumb_num <- 1..@item.page_count}
+            :if={@item.page_count}
+            thumb_num={thumb_num}
+          />
         </div>
       </section>
     </div>
@@ -64,6 +70,11 @@ defmodule DpulCollectionsWeb.ItemLive do
       <img
         class="h-[465px] w-[350px] md:h-[300px] md:w-[225px]"
         src="https://picsum.photos/350/350/?random"
+        alt={"image #{@thumb_num}"}
+        style="
+          background-color: lightgray;"
+        width="350"
+        height="465"
       />
       <button class="w-[350px] md:w-[225px] btn-primary">
         Download
diff --git a/lib/dpul_collections_web/live/search_live.ex b/lib/dpul_collections_web/live/search_live.ex
index 29959b78..7e9d43b7 100644
--- a/lib/dpul_collections_web/live/search_live.ex
+++ b/lib/dpul_collections_web/live/search_live.ex
@@ -133,7 +133,7 @@ defmodule DpulCollectionsWeb.SearchLive do
     <hr />
     <div class="item">
       <div class="flex flex-wrap gap-5 md:max-h-60 max-h-[20rem] overflow-hidden justify-center md:justify-start relative">
-        <.thumbs :for={_thumb <- 1..@item.page_count} :if={@item.page_count} />
+        <.thumbs :for={thumb_num <- 1..@item.page_count} :if={@item.page_count} thumb_num={thumb_num} />
         <div :if={@item.page_count > 1} class="absolute right-0 top-0 bg-white px-4 py-2">
           <%= @item.page_count %> Pages
         </div>
@@ -152,6 +152,11 @@ defmodule DpulCollectionsWeb.SearchLive do
     <img
       class="h-[350px] w-[350px] md:h-[225px] md:w-[225px]"
       src="https://picsum.photos/350/350/?random"
+      alt={"image #{@thumb_num}"}
+      style="
+        background-color: lightgray;"
+      width="350"
+      height="350"
     />
     """
   end
@@ -186,18 +191,18 @@ defmodule DpulCollectionsWeb.SearchLive do
       <.link
         :for={{page_number, current_page?} <- pages(@page, @per_page, @total_items)}
         class={"
-          flex 
-          items-center 
-          justify-center 
-          px-3 
-          h-8 
-          leading-tight 
+          flex
+          items-center
+          justify-center
+          px-3
+          h-8
+          leading-tight
           #{if current_page?, do: "active", else: "
-              border-gray-300 
-              text-gray-500 
-              bg-white border 
-              hover:bg-gray-100 
-              hover:text-gray-700 
+              border-gray-300
+              text-gray-500
+              bg-white border
+              hover:bg-gray-100
+              hover:text-gray-700
             "}
         "}
         phx-click="paginate"