From b91cfbec729cbc6e412428b74d34d9473f6c0299 Mon Sep 17 00:00:00 2001
From: okkdev <dev@stehlik.me>
Date: Mon, 28 Nov 2022 13:44:09 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/chuko_web/components/components.ex | 55 +++++++++++++++++---------
 lib/chuko_web/live/home_live.ex        | 14 +++----
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/lib/chuko_web/components/components.ex b/lib/chuko_web/components/components.ex
index 2e23a3e..afa8c61 100644
--- a/lib/chuko_web/components/components.ex
+++ b/lib/chuko_web/components/components.ex
@@ -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
@@ -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">
@@ -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>
@@ -56,7 +68,7 @@ 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
@@ -64,7 +76,7 @@ defmodule ChukoWeb.Components do
         />
         <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"
@@ -97,20 +109,20 @@ 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" />
@@ -118,7 +130,7 @@ defmodule ChukoWeb.Components do
         </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" />
@@ -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
diff --git a/lib/chuko_web/live/home_live.ex b/lib/chuko_web/live/home_live.ex
index 36cf9cf..c7f58c8 100644
--- a/lib/chuko_web/live/home_live.ex
+++ b/lib/chuko_web/live/home_live.ex
@@ -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>
@@ -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>