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

Details page and stuff

Browse Source
This commit is contained in:
Daniel Patterson
2023-12-03 01:13:10 +00:00
parent 5a9cfb9434
commit 02e6033467
3 changed files with 78 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/wish_web/components/layouts/app.html.heex
View File

@@ -8,7 +8,7 @@
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>
</div>
</header>
<main class="px-4 py-20 sm:px-6 lg:px-8">
<main class="px-4 py-10 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl">
<.flash_group flash={@flash} />
<%= @inner_content %>

59
lib/wish_web/live/home_live/details.html.heex
View File

@@ -1,14 +1,55 @@
<.link navigate={~p"/"}>
<.icon name="hero-arrow-left" /> Back to list
</.link>
<.header>
<%= @item.title %>
</.header>
<div :if={@item.image_url}>
<img src={@item.image_url} />
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
<div :if={@item.image_url} class="relative">
<img src={@item.image_url} />
<%= if @item.received && !@current_user do %>
<div class="absolute bg-red-400 text-white w-full h-7 bottom-0">
<.icon name="hero-check-circle" />Received
</div>
<% end %>
</div>
<div class="flex flex-col gap-4">
<.header>
<%= @item.title %>
</.header>
<div>
<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>
<%= if @item.description do %>
<div>
<div class="text-sm opacity-60">
Description:
</div>
<div>
<%= @item.description %>
</div>
</div>
<% end %>
<.button>
<.link class="block h-full w-full" href={@item.url} target="_blank">
Go to seller <.icon name="hero-arrow-right" />
</.link>
</.button>
<.button phx-click={JS.push("toggle_received", value: %{"id" => @item.id})}>
<%= if !@item.received do %>
Mark as purchased
<% else %>
Unmark as purchased
<% end %>
</.button>
</div>
</div>
<.button phx-click={JS.push("toggle_received", value: %{"id" => @item.id})}>
Toggle Received
</.button>

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

@@ -5,7 +5,7 @@
JS.push("toggle_view_state")
|> JS.dispatch("toggle_view_state", detail: %{"grid" => !@grid})
}>
Toggle Display
Toggle List/Grid
</.button>
</:actions>
</.header>
@@ -37,12 +37,22 @@
<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">
<div class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500">
<.icon name="hero-ellipsis-vertical" class="w-full h-full" />
</div>
<.dropdown item={item} />
</div>
</div>
<div>
<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 class="text-sm text-zinc-500">
<%= item.description %>
</div>
@@ -69,12 +79,25 @@
<%= item.title %>
</div>
<div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
<.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
<.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 class="col-span-3 row-span-2 w-full text-zinc-500">
<div class="col-span-3 w-full text-zinc-500">
<%= item.description %>
</div>
<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>
<% end %>