CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Created new loaders for blocks chain container, added 2 more loaders to transaction card, fixed height issue.

Browse Source
pull/2679/head
Yegor San 5 years ago
parent 1bd1835b48
commit 25dd5fc2d2
4 changed files with 107 additions and 9 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      apps/block_scout_web/assets/css/components/_card.scss
  2. 12
      apps/block_scout_web/assets/css/components/_tile.scss
  3. 49
      apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
  4. 48
      apps/block_scout_web/lib/block_scout_web/templates/common_components/_tile-loader.html.eex

7
apps/block_scout_web/assets/css/components/_card.scss
Unescape View File

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

12
apps/block_scout_web/assets/css/components/_tile.scss
Unescape View File

@ -562,3 +562,15 @@ $cube-quantity: 5;
transform: scale(0); 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;
}

49
apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
Unescape View File

@ -91,12 +91,49 @@
<%= gettext "Something went wrong, click to reload." %> <%= gettext "Something went wrong, click to reload." %>
</span> </span>
</button> </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>
</div> </div>

48
apps/block_scout_web/lib/block_scout_web/templates/common_components/_tile-loader.html.eex
Unescape View File

@ -70,3 +70,51 @@
</div> </div>
</div> </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>
Write Preview
Loading…
Cancel
Save