Refactor block tile partial and fix import transition on homepage

apps/block_scout_web/assets/css/components/_animations.scss

@@ -8,20 +8,11 @@
   0% {
     flex-basis: 0%;
     width: 0%;
-    opacity: 0;
-  }
-  25% {
-    opacity: 0;
-    transform: translateY(10px) scale(0.97);
   }
   50% {
     flex-basis: 25%;
     width: 25%;
   }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
 }
 
 @keyframes fade-up {
@@ -34,25 +25,7 @@
     transform: translateY(10px) scale(0.97);
   }
   50% {
-    height: 98px;
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes fade-up--mobile {
-  0% {
-    height: 0;
-    opacity: 0;
-  }
-  25% {
-    opacity: 0;
-    transform: translateY(10px) scale(0.97);
-  }
-  50% {
-    height: 202px;
+    height: 100px;
   }
   100% {
     opacity: 1;
@@ -80,20 +53,14 @@
   max-height: 98px;
   animation: fade-up-blocks-chain 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
-  @media (max-width: 767px) {
-    animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  @include media-breakpoint-down(md) {
+    animation: none;
   }
 }
 
 .fade-up {
   will-change: transform, opacity, height;
-  max-height: 98px;
   animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-
-  @media (max-width: 767px) {
-    max-height: 202px;
-    animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  }
 }
 
 .shrink-out {

apps/block_scout_web/assets/css/components/_card.scss

@@ -34,5 +34,5 @@
 .card-chain-blocks {
   height: auto;
 
-  @media (max-width: 767px) { height: 595px; }
+  @include media-breakpoint-down(md) { height: 595px; }
 }

apps/block_scout_web/assets/js/pages/chain.js

@@ -169,7 +169,7 @@ if ($chainDetailsPage.length) {
             })
           }
           $blockList.children().last().remove()
-          $blockList.prepend(state.newBlock)
+          $blockList.prepend(newBlockHtml(state.newBlock))
         }
         updateAllAges()
       }
@@ -198,10 +198,26 @@ if ($chainDetailsPage.length) {
   })
 }
 
+function newBlockHtml (blockHtml) {
+  return `
+    <div class="col-lg-3 fade-up-blocks-chain mb-3 mb-lg-0">
+      ${blockHtml}
+    </div>
+  `
+}
+
 function placeHolderBlock (blockNumber) {
   return `
-    <div class="col-sm-3 fade-up-blocks-chain mb-3 mb-sm-0" data-selector="place-holder" data-block-number="${blockNumber}">
-      <div class="tile tile-type-block d-flex flex-column">
+    <div
+      class="col-lg-3 fade-up-blocks-chain mb-3 mb-lg-0"
+      style="min-height: 98px;"
+    >
+      <div
+        class="tile tile-type-block d-flex align-items-center fade-up"
+        data-selector="place-holder"
+        data-block-number="${blockNumber}"
+        style="height: 98px;"
+      >
         <span class="loading-spinner-small ml-1 mr-4">
           <span class="loading-spinner-block-1"></span>
           <span class="loading-spinner-block-2"></span>

apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex

@@ -1,22 +1,20 @@
-<div class="col-sm-3 fade-up-blocks-chain mb-3 mb-sm-0" data-selector="chain-block" data-block-number="<%= @block.number %>">
-  <div class="tile tile-type-block d-flex flex-column">
-    <%= link(
-          @block,
-          class: "tile-title",
-          to: block_path(BlockScoutWeb.Endpoint, :show, @block),
-          "data-selector": "block-number"
-        ) %>
-    <div>
-      <span class="mr-2"> <%= Enum.count(@block.transactions) %> Transactions </span>
-      <span class="text-nowrap" data-from-now="<%= @block.timestamp %>"> </span>
-    </div>
-    <span class="text-truncate">
-      <%= gettext "Miner" %>
-
-      <%= render BlockScoutWeb.AddressView,
-        "_link.html",
-        address: @block.miner,
-        contract: false %>
-    </span>
+<div class="tile tile-type-block d-flex flex-column" data-selector="chain-block" data-block-number="<%= @block.number %>">
+  <%= link(
+        @block,
+        class: "tile-title",
+        to: block_path(BlockScoutWeb.Endpoint, :show, @block),
+        "data-selector": "block-number"
+      ) %>
+  <div>
+    <span class="mr-2"> <%= gettext("%{count} Transactions", count: Enum.count(@block.transactions)) %> </span>
+    <span class="text-nowrap" data-from-now="<%= @block.timestamp %>"> </span>
   </div>
+  <span class="text-truncate">
+    <%= gettext "Miner" %>
+
+    <%= render BlockScoutWeb.AddressView,
+      "_link.html",
+      address: @block.miner,
+      contract: false %>
+  </span>
 </div>

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -56,7 +56,9 @@
       <h2 class="card-title"><%= gettext "Blocks" %></h2>
       <div class="row" data-selector="chain-block-list">
         <%= for block <- @blocks do %>
-          <%= render BlockScoutWeb.ChainView, "_block.html", block: block %>
+          <div class="col-lg-3 fade-up-blocks-chain mb-3 mb-lg-0">
+            <%= render BlockScoutWeb.ChainView, "_block.html", block: block %>
+          </div>
         <% end %>
       </div>
     </div>