Skip to content

Commit b91cfbe

Browse files
okkdevokkdev
committed
💅 styling
1 parent 8583750 commit b91cfbe

2 files changed

Lines changed: 43 additions & 26 deletions

File tree

‎lib/chuko_web/components/components.ex‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ defmodule ChukoWeb.Components do
55
~H"""
66
<div
77
id={"item-#{@item.id}"}
8-
class="relative flex flex-col overflow-hidden bg-white border border-gray-200 shadow-xl rounded-lg group"
8+
class="relative flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg shadow-xl group"
99
>
10-
<div class="shadow-sm aspect-w-3 overflow-hidden rounded-lg h-96">
10+
<div class="overflow-hidden rounded-lg shadow-sm aspect-w-3 h-96">
1111
<%= case Enum.count(@item.images) do %>
1212
<% 0 -> %>
13-
<div class="flex h-full justify-center items-center">
14-
<Heroicons.photo class="text-gray-300 h-8 w-8" />
13+
<div class="flex items-center justify-center h-full">
14+
<Heroicons.photo class="w-8 h-8 text-gray-300" />
1515
</div>
1616
<% 1 -> %>
1717
<img
@@ -23,7 +23,7 @@ defmodule ChukoWeb.Components do
2323
<.carousel item={@item} />
2424
<% end %>
2525
</div>
26-
<div class="flex flex-col justify-between h-56 p-4 space-y-2">
26+
<div class="flex flex-col justify-between p-4 space-y-2 h-60">
2727
<div class="space-y-0.5">
2828
<h3 class="text-base font-medium text-gray-900 line-clamp-2">
2929
<a href={@item.url} target="_blank">
@@ -34,16 +34,28 @@ defmodule ChukoWeb.Components do
3434
<%= @item.description %>
3535
</p>
3636
</div>
37-
<div class="grid grid-cols-2 gap-2">
38-
<p class="text-base font-medium text-gray-900"><%= inspect(@item.offer_type) %></p>
39-
<p class="text-base font-medium text-gray-900">
37+
<div class="grid grid-cols-2 gap-1">
38+
<p class="text-gray-900">
39+
<%= @item.location %>
40+
</p>
41+
<p class="text-base font-medium text-right text-gray-900">
42+
<%= case @item.offer_type do %>
43+
<% :buynow -> %>
44+
Buy now
45+
<% :auction -> %>
46+
Auction
47+
<% end %>
48+
</p>
49+
<img class="w-2/3" src={@item.platform_logo} alt={inspect(@item.platform)} />
50+
<p class="items-center text-base font-medium text-right text-gray-900">
4051
<%= "#{@item.currency}" %>
41-
<span class="text-lg font-bold">
52+
<span class="text-xl font-bold">
4253
<%= "#{:erlang.float_to_binary(@item.price, decimals: 2)}" %>
4354
</span>
4455
</p>
45-
<img class="w-2/3" src={@item.platform_logo} alt={inspect(@item.platform)} />
46-
<p class="text-sm text-gray-500"><%= @item.location %></p>
56+
<div class="col-span-2 text-xs text-center text-gray-500">
57+
<%= format_datetime(@item.created_at) %>
58+
</div>
4759
</div>
4860
</div>
4961
</div>
@@ -56,15 +68,15 @@ defmodule ChukoWeb.Components do
5668

5769
def search_bar(assigns) do
5870
~H"""
59-
<form class="w-full transform bg-white rounded-xl divide-y divide-gray-100 shadow-xl" {@rest}>
71+
<form class="w-full transform bg-white divide-y divide-gray-100 shadow-xl rounded-xl" {@rest}>
6072
<div class="relative">
6173
<Heroicons.magnifying_glass
6274
solid
6375
class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400"
6476
/>
6577
<input
6678
type="text"
67-
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 "
79+
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 "
6880
placeholder="Search..."
6981
name="query"
7082
id="query"
@@ -97,28 +109,28 @@ defmodule ChukoWeb.Components do
97109
</div>
98110
<%!-- Slider indicators --%>
99111
<div
100-
class="absolute z-30 pointer-events-none flex space-x-3 bottom-5 opacity-80 left-1/2 -translate-x-1/2"
112+
class="absolute z-30 flex space-x-3 -translate-x-1/2 pointer-events-none bottom-5 opacity-80 left-1/2"
101113
data-slide-indicators
102114
>
103115
<div
104116
:for={_ <- @item.images}
105-
class="w-3 h-3 bg-white ring-1 ring-black ring-opacity-20 rounded-full transition opacity-30"
117+
class="w-3 h-3 transition bg-white rounded-full ring-1 ring-black ring-opacity-20 opacity-30"
106118
>
107119
</div>
108120
</div>
109121
<%!-- Slider controls --%>
110-
<div class="absolute top-0 left-0 z-30 h-full w-full flex">
122+
<div class="absolute top-0 left-0 z-30 flex w-full h-full">
111123
<button
112124
type="button"
113-
class="flex items-center justify-start px-5 h-full w-full cursor-pointer group transition focus:outline-none hover:bg-white/20"
125+
class="flex items-center justify-start w-full h-full px-5 transition cursor-pointer group focus:outline-none hover:bg-white/20"
114126
data-carousel-prev
115127
>
116128
<Heroicons.chevron_left class="w-5 h-5 text-white sm:w-6 sm:h-6" />
117129
<span class="sr-only">Previous</span>
118130
</button>
119131
<button
120132
type="button"
121-
class="flex items-center justify-end px-5 h-full w-full cursor-pointer group transition focus:outline-none hover:bg-white/20"
133+
class="flex items-center justify-end w-full h-full px-5 transition cursor-pointer group focus:outline-none hover:bg-white/20"
122134
data-carousel-next
123135
>
124136
<Heroicons.chevron_right class="w-5 h-5 text-white sm:w-6 sm:h-6" />
@@ -132,8 +144,13 @@ defmodule ChukoWeb.Components do
132144
def loading(assigns) do
133145
~H"""
134146
<div class="flex items-center justify-center">
135-
<Heroicons.arrow_path class="text-gray-400 w-20 h-20 animate-spin drop-shadow-xl" />
147+
<Heroicons.arrow_path class="w-20 h-20 text-gray-400 animate-spin drop-shadow-xl" />
136148
</div>
137149
"""
138150
end
151+
152+
defp format_datetime(%DateTime{year: year, month: month, day: day, hour: hour, minute: minute}),
153+
do: "#{pad(hour)}:#{pad(minute)} #{pad(day)}.#{pad(month)}.#{year}"
154+
155+
defp pad(number), do: number |> Integer.to_string() |> String.pad_leading(2, "0")
139156
end

‎lib/chuko_web/live/home_live.ex‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ defmodule ChukoWeb.HomeLive do
1111
<button
1212
id="scrolltop"
1313
phx-hook="ScrollTop"
14-
class="hidden fixed rounded-full bg-white m-4 p-3 bottom-0 right-0 shadow-lg z-50"
14+
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"
1515
>
16-
<Heroicons.chevron_up class="text-pink-300 h-8 w-8" />
16+
<Heroicons.chevron_up class="w-8 h-8 text-pink-300" />
1717
</button>
1818
<%!-- logo --%>
1919
<div class="drop-shadow-xl">
2020
<div
2121
style="filter:url('#goo');"
22-
class="font-gluten ani-tracking text-7xl text-pink-300 text-center py-8"
22+
class="py-8 text-center text-pink-300 font-gluten ani-tracking text-7xl"
2323
>
2424
chuko
2525
</div>
@@ -50,21 +50,21 @@ defmodule ChukoWeb.HomeLive do
5050
<% @searching -> %>
5151
<.loading />
5252
<% @query == "" && @items == [] -> %>
53-
<div class="text-center py-16">
53+
<div class="py-16 text-center">
5454
try searching something :^)
5555
</div>
5656
<% @query != "" && @items == [] -> %>
57-
<div class="text-center py-16">
57+
<div class="py-16 text-center">
5858
nothing found...
5959
</div>
6060
<% true -> %>
6161
<%!-- Filters/Sorting --%>
62-
<div class="mb-5 flex justify-end">
62+
<div class="flex justify-end mb-5">
6363
<form id="sorting" phx-change="sort" phx-update="ignore">
6464
<select
6565
name="sorting"
6666
phx-change="sort"
67-
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"
67+
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"
6868
>
6969
<option value="new" selected>↑ Newest first</option>
7070
<option value="old">↓ Oldest first</option>

0 commit comments

Comments
 (0)