78 lines
2.3 KiB
Plaintext
78 lines
2.3 KiB
Plaintext
<.header>
|
|
Daniel's Wishlist
|
|
<:actions :if={!@current_user}>
|
|
<.button phx-click={JS.push("toggle_hidden_items")} id="showhide-button" phx-throttle="300">
|
|
<%= if @hidden do %>
|
|
Hide
|
|
<% else %>
|
|
Show
|
|
<% end %>
|
|
Received
|
|
</.button>
|
|
</:actions>
|
|
</.header>
|
|
|
|
<div class="flex flex-col mt-4 space-y-4">
|
|
<div
|
|
:for={item <- @items}
|
|
class="grid grid-cols-12 gap-3 p-3 bg-purple-200
|
|
hover:bg-purple-300 active:bg-purple-400 border-2 border-black
|
|
hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5
|
|
transition cursor-pointer"
|
|
phx-click={JS.navigate(~p"/details/#{item}")}
|
|
>
|
|
<div class="relative col-span-4 flex flex-col justify-center max-h-full h-full bg-white 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" />Purchased
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<div class="col-span-7 flex flex-col">
|
|
<div class="text-lg font-display">
|
|
<%= item.title %>
|
|
</div>
|
|
<%= if item.price do %>
|
|
<div class="col-span-3">
|
|
<div class="text-sm opacity-60">
|
|
Price:
|
|
</div>
|
|
<div class="text-sm">
|
|
~£<%= item.price %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<%= if item.description do %>
|
|
<div class="col-span-3 w-full">
|
|
<div class="text-sm opacity-60">
|
|
Description:
|
|
</div>
|
|
<div>
|
|
<%= item.description %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<div class="col-span-3">
|
|
<div class="text-sm opacity-60">
|
|
Priority:
|
|
</div>
|
|
<span>
|
|
<%= for _ <- 1..item.desire do %>
|
|
<.icon name="hero-star" class="bg-red-500 text-red-500" />
|
|
<% end %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1">
|
|
<div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative float-right mt-1">
|
|
<.icon
|
|
name="hero-ellipsis-vertical"
|
|
class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
|
|
/>
|
|
<.dropdown item={item} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|