77 lines
2.6 KiB
Plaintext
77 lines
2.6 KiB
Plaintext
<.header>
|
|
Daniel's Wishlist
|
|
<:actions>
|
|
<.button phx-click={
|
|
JS.push("toggle_view_state")
|
|
|> JS.dispatch("toggle_view_state", detail: %{"grid" => !@grid})
|
|
}>
|
|
Toggle Display
|
|
</.button>
|
|
</:actions>
|
|
</.header>
|
|
|
|
<%= if @grid do %>
|
|
<div class="grid grid-cols-3 gap-4 mt-4" id="items-grid">
|
|
<div
|
|
:for={item <- @items}
|
|
phx-click={JS.navigate(~p"/details/#{item}")}
|
|
class="p-3 hover:bg-purple-200 active:bg-purple-300 border-2 border-black hover:shadow-sharp transition cursor-pointer"
|
|
>
|
|
<div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
|
|
<img
|
|
:if={item.image_url}
|
|
src={item.image_url}
|
|
alt={item.title}
|
|
height="224"
|
|
width="224"
|
|
class="rounded"
|
|
/>
|
|
<%= if item.received && !@current_user do %>
|
|
<div class="bg-red-400 text-white absolute w-full h-7 bottom-0">
|
|
<.icon name="hero-check-circle" />Received
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<div class="flex flex-row justify-between mt-1 font-display">
|
|
<%= item.title %>
|
|
<div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
|
|
<div class="w-7 h-7 rounded-full hover:bg-purple-300 active:bg-purple-400">
|
|
<.icon name="hero-ellipsis-vertical" class="w-full h-full" />
|
|
</div>
|
|
<.dropdown item={item} />
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-zinc-500">
|
|
<%= item.description %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="flex flex-col mt-4 space-y-4">
|
|
<div
|
|
:for={item <- @items}
|
|
class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 border-2 border-black hover:shadow-sharp transition"
|
|
phx-click={JS.navigate(~p"/details/#{item}")}
|
|
>
|
|
<div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 border border-black">
|
|
<img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
|
|
<%= if item.received && !@current_user do %>
|
|
<div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
|
|
<.icon name="hero-check-circle" />Received
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<div class="col-span-3 text-lg font-display">
|
|
<%= item.title %>
|
|
</div>
|
|
<div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
|
|
<.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
|
|
<.dropdown item={item} />
|
|
</div>
|
|
<div class="col-span-3 row-span-2 w-full text-zinc-500">
|
|
<%= item.description %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|