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

5
lib/wish_web/components/core_components.ex
View File

@@ -230,8 +230,9 @@ defmodule WishWeb.CoreComponents do
<button
type={@type}
class={[
"phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
"phx-submit-loading:opacity-75 bg-purple-400 hover:bg-purple-500 py-2 px-3",
"text-sm font-semibold leading-6 text-white active:text-white/80",
"border-2 border-black",
@class
]}
{@rest}
@@ -429,7 +430,7 @@ defmodule WishWeb.CoreComponents do
~H"""
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
<div>
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
<h1 class="text-xl font-display font-bold leading-8 text-zinc-800">
<%= render_slot(@inner_block) %>
</h1>
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">

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

@@ -1,8 +1,8 @@
<header class="px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
<div class="flex items-center gap-4">
<a href="/">
wish
<a class="font-display text-6xl font-black text-violet-600" href="/">
Wish
</a>
</div>
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>

11
lib/wish_web/components/layouts/root.html.heex
View File

@@ -8,15 +8,24 @@
<%= assigns[:page_title] || "Wish" %>
</.live_title>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<link phx-track-static rel="stylesheet" href={~p"/assets/fonts.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body class="bg-white antialiased">
<body class="bg-purple-50 antialiased">
<ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
<%= if @current_user do %>
<li class="text-[0.8125rem] leading-6 text-zinc-900">
<%= @current_user.email %>
</li>
<li>
<.link
navigate={~p"/items"}
class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
>
Edit list
</.link>
</li>
<li>
<.link
href={~p"/users/settings"}

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 %>