Skip to content

Commit

Permalink
Improve currencies components ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@sgobotta
sgobotta committed Aug 20, 2024
1 parent fb39879 commit 05693f7
Showing 1 changed file with 71 additions and 51 deletions.
122 changes: 71 additions & 51 deletions lib/ex_finance_web/live/public/currency_live/index.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,73 +7,93 @@
<div
:for={{dom_id, currency} <- @streams.currencies}
id={dom_id}
class="p-4 md:w-1/2 xl:w-1/3 w-full duration-500 cursor-default group"
class="p-4 w-full sm:w-full md:w-1/2 xl:w-1/3 2xl:w-1/4 duration-500 cursor-default group"
>
<div
class="
class={"
flex items-center justify-between
p-4 rounded-lg
card-bg shadow-zinc-400 dark:shadow-zinc-600 transition duration-300 shadow-md active:shadow-sm focus:shadow-sm
border-zinc-300 dark:border-zinc-700 border-[1px]
"
rounded-xl
transition duration-300 shadow-inner-xs
active:shadow-inner
focus:shadow-sm
shadow-zinc-400 dark:shadow-zinc-900
border-zinc-200 dark:border-zinc-700 border-[1px]
cursor-pointer
bg-gradient-to-br
from-#{get_color_by_price_direction(currency)}-100/75 to-#{get_color_by_price_direction(currency)}-200/75
dark:!from-#{get_color_by_price_direction(currency)}-900/75 dark:!to-#{get_color_by_price_direction(currency)}-500/75
"}
id={"currencies-#{currency.id}-card"}
phx-click={JS.navigate(~p"/currencies/#{currency.id}")}
>
<div class="text-left">
<h2 class={"text-gray-900 dark:text-gray-100 text-lg font-bold border-b border-#{get_color_by_currency_type(currency)}-500"}>
<div class="
text-left card-bg p-4 rounded-lg rounded-br-xl rounded-tr-xl border-zinc-300 dark:border-zinc-700 border-r-[1px] w-4/6
transition duration-700
">
<h2 class={"text-zinc-700 dark:text-zinc-100 text-lg font-medium border-b border-#{get_color_by_currency_type(currency)}-500"}>
<%= currency.name %>
</h2>
<%= if currency.info_type == :reference do %>
<h3 class={"mt-2 text-xl font-bold text-#{get_color_by_currency_type(currency)}-500 text-left cursor-text"}>
<%= render_price(currency.variation_price) %>
</h3>
<% end %>
<%= if currency.info_type == :market do %>
<h3 class={"mt-2 text-xl font-bold text-#{get_color_by_currency_type(currency)}-500 text-left cursor-text"}>
<%= render_price(currency.buy_price) %> - <%= render_price(
currency.sell_price
) %>
</h3>
<p class="text-sm font-semibold text-gray-400 dark:text-gray-400 text-left">
Spread:
<span class={"text-#{get_color_by_currency_type(currency)}-500"}>
<%= render_spread(currency) %>
</span>
<div class={"
p-4 my-2 shadow-inner-md shadow-zinc-400/50 dark:shadow-zinc-800/90 rounded-md
bg-gradient-to-br
from-#{get_color_by_currency_type(currency)}-300/20 to-#{get_color_by_currency_type(currency)}-900/20
dark:!from-#{get_color_by_currency_type(currency)}-900/20 dark:!to-#{get_color_by_currency_type(currency)}-300/20
"}>
<%= if currency.info_type == :reference do %>
<h3 class={"mt-2 text-lg font-bold text-#{get_color_by_currency_type(currency)}-500 text-left cursor-text"}>
<%= render_price(currency.variation_price) %>
</h3>
<% end %>
<%= if currency.info_type == :market do %>
<h3 class={"mt-2 text-lg font-bold text-#{get_color_by_currency_type(currency)}-500 text-left cursor-text"}>
<%= render_price(currency.buy_price) %> - <%= render_price(
currency.sell_price
) %>
</h3>
<p class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 text-left">
<%= gettext("Spread") %>:
<span class={"text-#{get_color_by_currency_type(currency)}-500"}>
<%= render_spread(currency) %>
</span>
</p>
<% end %>
<p class="text-sm font-semibold text-zinc-600 dark:text-zinc-400 text-left">
<%= render_update_time(currency) %>
</p>
<% end %>
<p class="text-sm font-semibold text-gray-400 dark:text-gray-400 text-left">
<%= render_update_time(currency) %>
</p>
<button class={"
<button class={"
cursor-default
text-white dark:text-black text-sm mt-6 px-4 py-2
text-zinc-600 dark:text-zinc-800 text-xs mt-6 px-2 py-1
bg-#{get_color_by_currency_type(currency)}-400
dark:bg-#{get_color_by_currency_type(currency)}-600
rounded-lg tracking-wider
outline-none
"}>
<%= render_info_type(currency) %>
</button>
</div>
<div class="w-32 h-32 flex justify-center items-center">
<div class="relative">
<div class={"
bg-gradient-to-tr
from-#{get_color_by_price_direction(currency)}-400/75 to-#{get_color_by_price_direction(currency)}-300/75
dark:from-#{get_color_by_price_direction(currency)}-400 dark:to-#{get_color_by_price_direction(currency)}-300
w-32 h-32
rounded-full
shadow-2xl shadow-#{get_color_by_price_direction(currency)}-400/50
group-hover:shadow-lg
border-#{get_color_by_price_direction(currency)}-400 border-dashed border-2
justify-center items-center
group-hover:-rotate-180 duration-1000 group-hover:border-dotted group-hover:border-[1px]
"} />
<%= render_info_type(currency) %>
</button>
</div>
<div class="absolute">
<h1 class="text-white dark:text-white text-2xl group-hover:text-3xl duration-200">
<%= render_variation_percent(currency) %>
</h1>
</div>
<div class="w-[30%]">
<div class="w-[6.5rem] h-[6.5rem] flex justify-center items-center overflow-hidden">
<div class="relative">
<div class={"
bg-gradient-to-tr
from-#{get_color_by_price_direction(currency)}-400/75 to-#{get_color_by_price_direction(currency)}-300/75
dark:from-#{get_color_by_price_direction(currency)}-400/75 dark:to-#{get_color_by_price_direction(currency)}-300/75
w-[6.5rem] h-[6.5rem]
rounded-full
shadow-none group-hover:shadow-inner-xs
group-hover:shadow-#{get_color_by_price_direction(currency)}-500
border-#{get_color_by_price_direction(currency)}-400 border-dashed border-2
justify-center items-center
group-hover:-rotate-180 duration-1000 group-hover:border-dotted group-hover:border-[1px]
"} />
</div>
<div class="absolute w-[inherit] overflow-hidden">
<h1 class="text-white dark:text-white text-xl group-hover:text-2xl duration-200 px-1">
<%= render_variation_percent(currency) %>
</h1>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 05693f7

Please sign in to comment.