diff --git a/apps/block_scout_web/assets/css/components/_animations.scss b/apps/block_scout_web/assets/css/components/_animations.scss index e2299ffe1b..b8fb3d1db4 100644 --- a/apps/block_scout_web/assets/css/components/_animations.scss +++ b/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 { diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index 13f7cf925c..d34f461fa7 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/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; } } diff --git a/apps/block_scout_web/assets/js/pages/chain.js b/apps/block_scout_web/assets/js/pages/chain.js index 2a70e54c37..90ff02ae38 100644 --- a/apps/block_scout_web/assets/js/pages/chain.js +++ b/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 ` +
+ ${blockHtml} +
+ ` +} + function placeHolderBlock (blockNumber) { return ` -
-
+
+
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex index 1489197e57..cfcce5f33e 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex @@ -1,22 +1,20 @@ -
-
- <%= link( - @block, - class: "tile-title", - to: block_path(BlockScoutWeb.Endpoint, :show, @block), - "data-selector": "block-number" - ) %> -
- <%= Enum.count(@block.transactions) %> Transactions - -
- - <%= gettext "Miner" %> - - <%= render BlockScoutWeb.AddressView, - "_link.html", - address: @block.miner, - contract: false %> - +
+ <%= link( + @block, + class: "tile-title", + to: block_path(BlockScoutWeb.Endpoint, :show, @block), + "data-selector": "block-number" + ) %> +
+ <%= gettext("%{count} Transactions", count: Enum.count(@block.transactions)) %> +
+ + <%= gettext "Miner" %> + + <%= render BlockScoutWeb.AddressView, + "_link.html", + address: @block.miner, + contract: false %> +
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex index 657ae52887..9516018d5a 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex @@ -56,7 +56,9 @@

<%= gettext "Blocks" %>

<%= for block <- @blocks do %> - <%= render BlockScoutWeb.ChainView, "_block.html", block: block %> +
+ <%= render BlockScoutWeb.ChainView, "_block.html", block: block %> +
<% end %>