Skip to content

Commit

Permalink
💅 styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@okkdev
okkdev committed Nov 28, 2022
1 parent 8583750 commit b91cfbe
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 26 deletions.
55 changes: 36 additions & 19 deletions lib/chuko_web/components/components.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ defmodule ChukoWeb.Components do
~H"""
<div
id={"item-#{@item.id}"}
class="relative flex flex-col overflow-hidden bg-white border border-gray-200 shadow-xl rounded-lg group"
class="relative flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg shadow-xl group"
>
<div class="shadow-sm aspect-w-3 overflow-hidden rounded-lg h-96">
<div class="overflow-hidden rounded-lg shadow-sm aspect-w-3 h-96">
<%= case Enum.count(@item.images) do %>
<% 0 -> %>
<div class="flex h-full justify-center items-center">
<Heroicons.photo class="text-gray-300 h-8 w-8" />
<div class="flex items-center justify-center h-full">
<Heroicons.photo class="w-8 h-8 text-gray-300" />
</div>
<% 1 -> %>
<img
Expand All @@ -23,7 +23,7 @@ defmodule ChukoWeb.Components do
<.carousel item={@item} />
<% end %>
</div>
<div class="flex flex-col justify-between h-56 p-4 space-y-2">
<div class="flex flex-col justify-between p-4 space-y-2 h-60">
<div class="space-y-0.5">
<h3 class="text-base font-medium text-gray-900 line-clamp-2">
<a href={@item.url} target="_blank">
Expand All @@ -34,16 +34,28 @@ defmodule ChukoWeb.Components do
<%= @item.description %>
</p>
</div>
<div class="grid grid-cols-2 gap-2">
<p class="text-base font-medium text-gray-900"><%= inspect(@item.offer_type) %></p>
<p class="text-base font-medium text-gray-900">
<div class="grid grid-cols-2 gap-1">
<p class="text-gray-900">
<%= @item.location %>
</p>
<p class="text-base font-medium text-right text-gray-900">
<%= case @item.offer_type do %>
<% :buynow -> %>
Buy now
<% :auction -> %>
Auction
<% end %>
</p>
<img class="w-2/3" src={@item.platform_logo} alt={inspect(@item.platform)} />
<p class="items-center text-base font-medium text-right text-gray-900">
<%= "#{@item.currency}" %>
<span class="text-lg font-bold">
<span class="text-xl font-bold">
<%= "#{:erlang.float_to_binary(@item.price, decimals: 2)}" %>
</span>
</p>
<img class="w-2/3" src={@item.platform_logo} alt={inspect(@item.platform)} />
<p class="text-sm text-gray-500"><%= @item.location %></p>
<div class="col-span-2 text-xs text-center text-gray-500">
<%= format_datetime(@item.created_at) %>
</div>
</div>
</div>
</div>
Expand All @@ -56,15 +68,15 @@ defmodule ChukoWeb.Components do

def search_bar(assigns) do
~H"""
<form class="w-full transform bg-white rounded-xl divide-y divide-gray-100 shadow-xl" {@rest}>
<form class="w-full transform bg-white divide-y divide-gray-100 shadow-xl rounded-xl" {@rest}>
<div class="relative">
<Heroicons.magnifying_glass
solid
class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400"
/>
<input
type="text"
class="w-full h-12 pr-4 pl-11 text-gray-800 rounded-xl placeholder-gray-400 bg-transparent border-0 ring-1 ring-black ring-opacity-5 focus:border-pink-300 focus:outline-none focus:ring-pink-300 sm:text-sm "
class="w-full h-12 pr-4 text-gray-800 placeholder-gray-400 bg-transparent border-0 pl-11 rounded-xl ring-1 ring-black ring-opacity-5 focus:border-pink-300 focus:outline-none focus:ring-pink-300 sm:text-sm "
placeholder="Search..."
name="query"
id="query"
Expand Down Expand Up @@ -97,28 +109,28 @@ defmodule ChukoWeb.Components do
</div>
<%!-- Slider indicators --%>
<div
class="absolute z-30 pointer-events-none flex space-x-3 bottom-5 opacity-80 left-1/2 -translate-x-1/2"
class="absolute z-30 flex space-x-3 -translate-x-1/2 pointer-events-none bottom-5 opacity-80 left-1/2"
data-slide-indicators
>
<div
:for={_ <- @item.images}
class="w-3 h-3 bg-white ring-1 ring-black ring-opacity-20 rounded-full transition opacity-30"
class="w-3 h-3 transition bg-white rounded-full ring-1 ring-black ring-opacity-20 opacity-30"
>
</div>
</div>
<%!-- Slider controls --%>
<div class="absolute top-0 left-0 z-30 h-full w-full flex">
<div class="absolute top-0 left-0 z-30 flex w-full h-full">
<button
type="button"
class="flex items-center justify-start px-5 h-full w-full cursor-pointer group transition focus:outline-none hover:bg-white/20"
class="flex items-center justify-start w-full h-full px-5 transition cursor-pointer group focus:outline-none hover:bg-white/20"
data-carousel-prev
>
<Heroicons.chevron_left class="w-5 h-5 text-white sm:w-6 sm:h-6" />
<span class="sr-only">Previous</span>
</button>
<button
type="button"
class="flex items-center justify-end px-5 h-full w-full cursor-pointer group transition focus:outline-none hover:bg-white/20"
class="flex items-center justify-end w-full h-full px-5 transition cursor-pointer group focus:outline-none hover:bg-white/20"
data-carousel-next
>
<Heroicons.chevron_right class="w-5 h-5 text-white sm:w-6 sm:h-6" />
Expand All @@ -132,8 +144,13 @@ defmodule ChukoWeb.Components do
def loading(assigns) do
~H"""
<div class="flex items-center justify-center">
<Heroicons.arrow_path class="text-gray-400 w-20 h-20 animate-spin drop-shadow-xl" />
<Heroicons.arrow_path class="w-20 h-20 text-gray-400 animate-spin drop-shadow-xl" />
</div>
"""
end

defp format_datetime(%DateTime{year: year, month: month, day: day, hour: hour, minute: minute}),
do: "#{pad(hour)}:#{pad(minute)} #{pad(day)}.#{pad(month)}.#{year}"

defp pad(number), do: number |> Integer.to_string() |> String.pad_leading(2, "0")
end
14 changes: 7 additions & 7 deletions lib/chuko_web/live/home_live.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ defmodule ChukoWeb.HomeLive do
<button
id="scrolltop"
phx-hook="ScrollTop"
class="hidden fixed rounded-full bg-white m-4 p-3 bottom-0 right-0 shadow-lg z-50"
class="fixed bottom-0 right-0 z-50 hidden p-3 m-4 bg-white rounded-full shadow-lg ring-1 ring-black ring-opacity-5"
>
<Heroicons.chevron_up class="text-pink-300 h-8 w-8" />
<Heroicons.chevron_up class="w-8 h-8 text-pink-300" />
</button>
<%!-- logo --%>
<div class="drop-shadow-xl">
<div
style="filter:url('#goo');"
class="font-gluten ani-tracking text-7xl text-pink-300 text-center py-8"
class="py-8 text-center text-pink-300 font-gluten ani-tracking text-7xl"
>
chuko
</div>
Expand Down Expand Up @@ -50,21 +50,21 @@ defmodule ChukoWeb.HomeLive do
<% @searching -> %>
<.loading />
<% @query == "" && @items == [] -> %>
<div class="text-center py-16">
<div class="py-16 text-center">
try searching something :^)
</div>
<% @query != "" && @items == [] -> %>
<div class="text-center py-16">
<div class="py-16 text-center">
nothing found...
</div>
<% true -> %>
<%!-- Filters/Sorting --%>
<div class="mb-5 flex justify-end">
<div class="flex justify-end mb-5">
<form id="sorting" phx-change="sort" phx-update="ignore">
<select
name="sorting"
phx-change="sort"
class="shadow-xl text-gray-700 block rounded-xl py-3 pl-3 pr-10 text-base border-0 transition-colors ring-1 ring-black ring-opacity-5 focus:border-pink-300 focus:outline-none focus:ring-pink-300 sm:text-sm"
class="block py-3 pl-3 pr-10 text-base text-gray-700 transition-colors border-0 shadow-xl rounded-xl ring-1 ring-black ring-opacity-5 focus:border-pink-300 focus:outline-none focus:ring-pink-300 sm:text-sm"
>
<option value="new" selected>↑ Newest first</option>
<option value="old">↓ Oldest first</option>
Expand Down

0 comments on commit b91cfbe

Please sign in to comment.