Add card animations on currencies list page (#17)

* Fix long texts in the currencies index page
* Add animations on cards
  * When the page loads, the percentage circle is discovered from the right, while collapsing the white container

Author: sgobotta

assets/css/animations.css

@@ -0,0 +1,46 @@
+
+@keyframes slide-in-right {
+	0% {
+    overflow: hidden;
+		width: 0;
+		opacity: 0;
+		transform: translateX(-40px);
+		margin-left: 0;
+	}
+  20% {
+    visibility: visible;
+  }
+  30% {
+    margin-left: 0.8rem;
+    width: 35%;
+    transform: translateX(30px);
+  }
+	50% {
+		opacity: 1;
+		width: 35%;
+    transform: translateX(30px);
+	}
+	70% {
+    margin-left: 0.5rem;
+    width: 27%;
+    transform: translateX(0);
+	}
+	85% {
+	}
+	100% {
+		width: 27%;
+		opacity: 1;
+		transform: translateX(0);
+		margin-left: 1rem;
+		margin-right: 1rem;
+	}
+}
+
+.animate-slide-in-right {
+	animation-name: slide-in-right;
+	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	animation-delay: 0.2s;
+	animation-duration: 2s;
+	animation-fill-mode: forwards;
+  width: 0;
+}

assets/css/app.css

@@ -6,4 +6,5 @@
 @import "./fonts.css";
 @import "./widgets/scrollbar.css";
 
-@import "./colors.css"
+@import "./colors.css";
+@import "./animations.css"

lib/ex_finance_web/live/public/currency_live/index.html.heex

@@ -1,4 +1,4 @@
-<section class="body-font transparent h-full flex justify-center items-center m-2">
+<section class="body-font transparent h-full m-2">
   <div
     class="flex flex-wrap -m-4 text-center justify-center sm:px-4 md:px-8 lg:px-16"
     id="currencies"
@@ -9,7 +9,7 @@
       id={dom_id}
       class="
         p-4
-        w-full sm:w-full md:w-1/2 lg:w-1/2 xl:w-1/3 2xl:w-1/4
+
         duration-500 cursor-default group
       "
     >
@@ -22,19 +22,23 @@
           focus:shadow-sm          
           shadow-zinc-400 dark:shadow-zinc-900
           border-zinc-200 dark:border-zinc-700 border-[1px]
+          w-[420px]
           cursor-pointer
-
           bg-gradient-to-br
           from-#{get_color_by_price_direction(currency)}-100/75 to-#{get_color_by_price_direction(currency)}-900/75
         "}
         id={"currencies-#{currency.id}-card"}
         phx-click={JS.navigate(~p"/currencies/#{currency.id}")}
+        style="overflow:hidden;"
       >
-        <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
+        <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] flex-[1_1_0%] min-w-[180px] max-w-[420px]
           shadow-zinc-300 dark:shadow-zinc-900 shadow-[3px_0_5px_-2px]
           transition duration-700
-        ">
+        "
+          id={"currency-details-#{currency.id}"}
+        >
           <h2 class="text-zinc-700 dark:text-zinc-100 text-lg font-medium group-hover:underline group-hover:text-primary">
             <%= currency.name %>
           </h2>
@@ -50,7 +54,7 @@
               </h3>
             <% end %>
             <%= if currency.info_type == :market do %>
-              <h3 class="mt-2 text-lg font-bold text-default dark:text-zinc-200 text-left cursor-text">
+              <h3 class="mt-2 text-lg font-bold text-default dark:text-zinc-200 text-left cursor-text whitespace-nowrap">
                 <%= render_price(currency.buy_price) %> - <%= render_price(
                   currency.sell_price
                 ) %>
@@ -77,7 +81,10 @@
             </button>
           </div>
         </div>
-        <div class="w-[30%]">
+        <div
+          class="animate-slide-in-right"
+          id={"currency-variation-#{currency.id}"}
+        >
           <div class="w-[6.5rem] h-[6.5rem] flex justify-center items-center overflow-hidden">
             <div class="relative">
               <div class={"