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 ` +