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

Add fonts and design

Browse Source
This commit is contained in:
Daniel Patterson
2023-11-28 14:15:01 +00:00
committed by Daniel Patterson
parent 39e6f36e9a
commit 8ece628b30
16 changed files with 202 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,19 +41,15 @@ defmodule WishWeb.HomeLive.Index do
~H"""
<div
id={"dropdown-#{@item.id}"}
class="absolute z-10 w-40 bg-white origin-top right-0 whitespace-nowrap p-1 border rounded"
class="absolute z-10 w-40 bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
phx-click-away={JS.hide()}
hidden
>
<.link
href={@item.url}
class="block p-1 w-full border border-white hover:bg-slate-100 hover:border-black select-none"
target="_blank"
>
<.link href={@item.url} class="block p-2 w-full hover:bg-purple-300 select-none" target="_blank">
Go to URL
</.link>
<div
class="block p-1 w-full border border-white hover:bg-slate-100 hover:border-black select-none cursor-pointer"
class="block p-2 w-full hover:bg-purple-300 select-none cursor-pointer"
phx-click={
JS.push("toggle_received", value: %{"id" => @item.id})
|> JS.hide(to: "#dropdown-#{@item.id}")

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

@@ -1,5 +1,5 @@
<.header>
Listing Items
Daniel's Wishlist
<:actions>
<.button phx-click={
JS.push("toggle_view_state")
@@ -11,13 +11,13 @@
</.header>
<%= if @grid do %>
<div class="grid grid-cols-3 gap-2" id="items-grid">
<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="h-72 p-2 rounded hover:bg-zinc-100 active:bg-zinc-200"
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">
<div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
<img
:if={item.image_url}
src={item.image_url}
@@ -32,45 +32,45 @@
</div>
<% end %>
</div>
<div class="flex flex-row justify-between">
<div class="flex flex-row justify-between mt-1 font-display">
<%= item.title %>
<div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
<.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
<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">
<div class="text-sm text-zinc-500">
<%= item.description %>
</div>
</div>
</div>
<% else %>
<div class="flex flex-col space-y-4">
<div class="flex flex-col mt-4 space-y-4">
<div
:for={item <- @items}
class="grid grid-cols-8 grid-rows-4 h-24 p-1 border rounded"
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 flex flex-col justify-center max-h-full h-full row-span-4">
<img
:if={item.image_url}
src={item.image_url}
alt={item.title}
class="max-h-full rounded"
/>
<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-6 row-span-4 px-2">
<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 %>