Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Another browse preview - hover to preview images #324

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+68 −2
Draft

Another browse preview - hover to preview images #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a198485
Figure out tailwind hover preview images.
tpendragon Feb 22, 2025
efeaafc
Not right, but demo-able.
tpendragon Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions assets/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,21 @@ module.exports = {
}
},
},
safelist: [
"left-[40px]",
"left-[80px]",
"left-[120px]",
"left-[160px]",
"left-0",
"z-40",
"z-30",
"z-20",
"z-10",
"peer-hover:z-10",
"peer-hover:z-20",
"peer-hover:z-30",
"peer-hover:z-40",
],
plugins: [
require("@tailwindcss/forms"),
// Allows prefixing tailwind classes with LiveView classes to add rules
Expand Down
55 changes: 53 additions & 2 deletions lib/dpul_collections_web/live/browse_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ defmodule DpulCollectionsWeb.BrowseLive do
<%= gettext("Randomize") %>
</button>
</div>
<div class="grid grid-cols-5 gap-3">
<div class="grid grid-cols-3 gap-3">
<.browse_item :for={item <- @items} item={item} />
</div>
"""
Expand All @@ -49,7 +49,13 @@ defmodule DpulCollectionsWeb.BrowseLive do
~H"""
<div id={"item-#{@item.id}"} class="item">
<div class="flex flex-wrap gap-5 md:max-h-60 max-h-[22rem] overflow-hidden justify-center md:justify-start relative">
<.thumb :if={@item.page_count} thumb={thumbnail_service_url(@item)} />
<.thumbs
:for={{thumb, thumb_num} <- thumbnail_service_urls(5, @item)}
:if={@item.page_count}
thumb={thumb}
thumb_num={thumb_num}
length={thumbnail_service_urls(5, @item) |> length}
/>
</div>
<h2 class="underline text-2xl font-bold pt-4">
<.link navigate={@item.url} class="item-link"><%= @item.title %></.link>
Expand All @@ -59,6 +65,51 @@ defmodule DpulCollectionsWeb.BrowseLive do
"""
end

defp thumbnail_service_urls(max_thumbnails, item) do
thumbnail_service_urls(
max_thumbnails,
item.image_service_urls,
item.primary_thumbnail_service_url
)
end

defp thumbnail_service_urls(max_thumbnails, image_service_urls, _) do
# Truncate image service urls to max value
image_service_urls
|> Enum.slice(0, max_thumbnails)
|> Enum.reverse()
|> Enum.with_index()
end


def thumbs(assigns = %{thumb_num: 0}) do
~H"""
<img
class={"h-[350px] w-[350px] md:h-[225px] md:w-[225px] border border-solid border-gray-400 left-[#{(@length-@thumb_num-1)*40}px] hover:z-50 peer peer-hover:z-10"}
src={"#{@thumb}/square/350,350/0/default.jpg"}
alt={"image #{@thumb_num}"}
style="
background-color: lightgray;"
width="350"
height="350"
/>
"""
end

def thumbs(assigns) do
~H"""
<img
class={"h-[350px] w-[350px] md:h-[225px] md:w-[225px] border border-solid border-gray-400 absolute top-0 left-[#{(@length-@thumb_num-1)*40}px] hover:z-50 peer peer-hover:z-#{50-(@thumb_num)*10}"}
src={"#{@thumb}/square/350,350/0/default.jpg"}
alt={"image #{@thumb_num}"}
style="
background-color: lightgray;"
width="350"
height="350"
/>
"""
end

def thumb(assigns) do
~H"""
<img
Expand Down