dp/wish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjustments

Browse Source
This commit is contained in:
Daniel Patterson
2024-01-05 19:56:02 +00:00
parent ab298f9abb
commit ac111b8877
2 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/wish_web/live/home_live/index.ex
View File

@@ -5,7 +5,7 @@ defmodule WishWeb.HomeLive.Index do
use Phoenix.Component use Phoenix.Component
@impl true @impl true
def mount(_params, session, socket) do def mount(_params, _session, socket) do
items = items =
if socket.assigns.current_user do if socket.assigns.current_user do
Wishlist.list_visible_items() Wishlist.list_visible_items()
@@ -51,7 +51,7 @@ defmodule WishWeb.HomeLive.Index do
~H""" ~H"""
<div <div
id={"dropdown-#{@item.id}"} id={"dropdown-#{@item.id}"}
class="absolute z-10 w-40 bg-purple-100 origin-top right-0 whitespace-nowrap border border-black" class="absolute z-10 w-auto bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
phx-click-away={JS.hide()} phx-click-away={JS.hide()}
hidden hidden
> >

81
lib/wish_web/live/home_live/index.html.heex
View File

@@ -15,12 +15,13 @@
<div class="flex flex-col mt-4 space-y-4"> <div class="flex flex-col mt-4 space-y-4">
<div <div
:for={item <- @items} :for={item <- @items}
class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black class="grid grid-cols-12 gap-3 p-3 bg-purple-200
hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition hover:bg-purple-300 active:bg-purple-400 border-2 border-black
cursor-pointer" hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5
transition cursor-pointer"
phx-click={JS.navigate(~p"/details/#{item}")} 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 bg-white border border-black"> <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" /> <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
<%= if item.received && !@current_user do %> <%= if item.received && !@current_user do %>
<div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0"> <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
@@ -28,45 +29,49 @@
</div> </div>
<% end %> <% end %>
</div> </div>
<div class="col-span-3 text-lg font-display"> <div class="col-span-7 flex flex-col">
<%= item.title %> <div class="text-lg font-display">
</div> <%= item.title %>
<div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative"> </div>
<.icon <%= if item.price do %>
name="hero-ellipsis-vertical" <div class="col-span-3">
class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500" <div class="text-sm opacity-60">
/> Price:
<.dropdown item={item} /> </div>
</div> <div class="text-sm">
<%= if item.price do %> ~£<%= 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="col-span-3">
<div class="text-sm opacity-60"> <div class="text-sm opacity-60">
Price: Priority:
</div>
<div class="text-sm">
~£<%= item.price %>
</div> </div>
<span>
<%= for _ <- 1..item.desire do %>
<.icon name="hero-star" class="bg-red-500 text-red-500" />
<% end %>
</span>
</div> </div>
<% end %> </div>
<%= if item.description do %> <div class="col-span-1">
<div class="col-span-3 w-full"> <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative float-right mt-1">
<div class="text-sm opacity-60"> <.icon
Description: name="hero-ellipsis-vertical"
</div> class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
<div> />
<%= item.description %> <.dropdown item={item} />
</div>
</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> </div>
</div> </div>