Merge pull request #2679 from YegorSan/card-chain-block-fix

Added fixed height for card chain blocks and card chain transactions.

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#2679](https://github.com/poanetwork/blockscout/pull/2679) - added fixed height for card chain blocks and card chain transactions 
 - [#2678](https://github.com/poanetwork/blockscout/pull/2678) - fixed dashboard banner height bug
 - [#2672](https://github.com/poanetwork/blockscout/pull/2672) - added new theme for xUSDT 
 - [#2663](https://github.com/poanetwork/blockscout/pull/2663) - Fetch address counters in parallel

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

@@ -155,8 +155,8 @@ $card-tab-icon-color-active: #fff !default;
 }
 
 .card-chain-blocks {
-  height: auto;
+  min-height: 233px;
-
+  max-height: auto;
   [class*="col-"]:last-child {
     .tile {
       margin-bottom: 0;
@@ -165,7 +165,8 @@ $card-tab-icon-color-active: #fff !default;
 }
 
 .card-chain-transactions {
-  height: auto;
+  min-height: 664px;
+  max-height: auto;
 
   .tile {
     margin-bottom: 0;

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

@@ -562,3 +562,15 @@ $cube-quantity: 5;
     transform: scale(0);
   }
 }
+
+.dark-block-loader {
+  width: auto;
+  height: 15px;
+  background-color: #e2e5ec;
+  margin-bottom: 5px;
+  border-radius: 4px;
+}
+
+.dark-theme-applied .dark-block-loader {
+  background-color: #313355;
+}

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

@@ -91,13 +91,50 @@
             <%= gettext "Something went wrong, click to reload." %>
           </span>
         </button>
-        <div hidden data-selector="loading-message" class="tile tile-muted text-center mt-3 w-100" >
+         <div hidden data-selector="loading-message" class="col-lg-3" >
-          <span  class="loading-spinner-small mr-2">
+         <div data-selector="chain-block">
-            <span class="loading-spinner-block-1"></span>
+         <div class="tile tile-type-block n-p d-flex flex-column">
-            <span class="loading-spinner-block-2"></span>
+         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
-          </span>
+         <div class="tile-bottom-contents">
-          <%= gettext("Loading...") %>
+         <div class="dark-block-loader"></div>
+         <div class="dark-block-loader"></div>
+         </div>
+        </div>
+        </div>
+        </div>
+         <div hidden data-selector="loading-message" class="col-lg-3" >
+         <div data-selector="chain-block">
+         <div class="tile tile-type-block n-p d-flex flex-column">
+         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
+         <div class="tile-bottom-contents">
+         <div class="dark-block-loader"></div>
+         <div class="dark-block-loader"></div>
+         </div>
+        </div>
+        </div>
+        </div>
+         <div hidden data-selector="loading-message" class="col-lg-3" >
+         <div data-selector="chain-block">
+         <div class="tile tile-type-block n-p d-flex flex-column">
+         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
+         <div class="tile-bottom-contents">
+         <div class="dark-block-loader"></div>
+         <div class="dark-block-loader"></div>
+         </div>
+        </div>
+        </div>
+        </div>
+         <div hidden data-selector="loading-message" class="col-lg-3" >
+         <div data-selector="chain-block">
+         <div class="tile tile-type-block n-p d-flex flex-column">
+         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
+         <div class="tile-bottom-contents">
+        <div class="dark-block-loader"></div>
+         <div class="dark-block-loader"></div>
+         </div>
+        </div>
         </div>
+        </div>   
       </div>
     </div>
   </div>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_tile-loader.html.eex

@@ -46,6 +46,54 @@
     </div>
   </div>
 </div>
+<div data-loading-message data-selector="loading-message" class="tile tile-type-loading">
+  <div class="row tile-body">
+    <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+      <span class="tile-label">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="tile-status-label ml-2 ml-md-0">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+      <span class="tile-loader tile-address-loader"></span>
+      <span class="tile-loader tile-address-loader"></span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+      <span class="mr-2 mr-md-0 order-1">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="mr-2 mr-md-0 order-2">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+  </div>
+</div>
+<div data-loading-message data-selector="loading-message" class="tile tile-type-loading">
+  <div class="row tile-body">
+    <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+      <span class="tile-label">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="tile-status-label ml-2 ml-md-0">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+      <span class="tile-loader tile-address-loader"></span>
+      <span class="tile-loader tile-address-loader"></span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+      <span class="mr-2 mr-md-0 order-1">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="mr-2 mr-md-0 order-2">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+  </div>
+</div>
 <div data-loading-message data-selector="loading-message" class="tile tile-type-loading">
   <div class="row tile-body">
     <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">

apps/block_scout_web/priv/gettext/default.pot

@@ -1090,7 +1090,6 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_read_contract/index.html.eex:14
-#: lib/block_scout_web/templates/chain/show.html.eex:99
 #: lib/block_scout_web/templates/tokens/read_contract/index.html.eex:21
 msgid "Loading..."
 msgstr ""
@@ -1168,7 +1167,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:111
+#: lib/block_scout_web/templates/chain/show.html.eex:148
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/transaction/index.html.eex:10
 msgid "More transactions have come in"
@@ -1431,7 +1430,7 @@ msgid "Something went wrong, click to reload."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:117
+#: lib/block_scout_web/templates/chain/show.html.eex:154
 msgid "Something went wrong, click to retry."
 msgstr ""
 
@@ -1595,7 +1594,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:15
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
-#: lib/block_scout_web/templates/chain/show.html.eex:108
+#: lib/block_scout_web/templates/chain/show.html.eex:145
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:50
 #: lib/block_scout_web/views/address_view.ex:305
 msgid "Transactions"
@@ -1732,7 +1731,7 @@ msgid "View All Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:107
+#: lib/block_scout_web/templates/chain/show.html.eex:144
 msgid "View All Transactions"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -1090,7 +1090,6 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_read_contract/index.html.eex:14
-#: lib/block_scout_web/templates/chain/show.html.eex:99
 #: lib/block_scout_web/templates/tokens/read_contract/index.html.eex:21
 msgid "Loading..."
 msgstr ""
@@ -1168,7 +1167,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:111
+#: lib/block_scout_web/templates/chain/show.html.eex:148
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/transaction/index.html.eex:10
 msgid "More transactions have come in"
@@ -1431,7 +1430,7 @@ msgid "Something went wrong, click to reload."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:117
+#: lib/block_scout_web/templates/chain/show.html.eex:154
 msgid "Something went wrong, click to retry."
 msgstr ""
 
@@ -1595,7 +1594,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:15
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
-#: lib/block_scout_web/templates/chain/show.html.eex:108
+#: lib/block_scout_web/templates/chain/show.html.eex:145
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:50
 #: lib/block_scout_web/views/address_view.ex:305
 msgid "Transactions"
@@ -1732,7 +1731,7 @@ msgid "View All Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:107
+#: lib/block_scout_web/templates/chain/show.html.eex:144
 msgid "View All Transactions"
 msgstr ""