Ayrat Badykov
6 years ago
committed by
GitHub
@ -0,0 +1,137 @@ |
||||
$error-tablet-breakpoint: 768px; |
||||
|
||||
// Block Not Found |
||||
|
||||
.block-not-found { |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding-bottom: 50px; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding-top: 52px; |
||||
} |
||||
} |
||||
|
||||
.block-not-found-img { |
||||
margin-bottom: 40px; |
||||
text-align: center; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
margin-bottom: 0; |
||||
text-align: left; |
||||
} |
||||
img { |
||||
max-width: 100%; |
||||
height: auto; |
||||
} |
||||
} |
||||
|
||||
.block-not-found-content { |
||||
text-align: center; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
text-align: left; |
||||
padding-left: 52px; |
||||
max-width: 396px; |
||||
} |
||||
} |
||||
|
||||
.error-title { |
||||
margin-bottom: 20px !important; |
||||
} |
||||
|
||||
.error-descr { |
||||
display: block; |
||||
font-size: 14px; |
||||
color: #a3a9b5; |
||||
line-height: 1.714; |
||||
margin-bottom: 22px; |
||||
word-wrap: break-word; |
||||
} |
||||
|
||||
.error-btn { |
||||
background: transparent; |
||||
display: inline-flex !important; |
||||
} |
||||
|
||||
// TX Not Found |
||||
.tx-nf { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
padding-bottom: 50px; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
flex-direction: row; |
||||
padding-top: 52px; |
||||
} |
||||
} |
||||
|
||||
.tx-nf-content { |
||||
margin-top: 52px; |
||||
max-width: 700px; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
margin-left: 90px; |
||||
margin-top: 0; |
||||
} |
||||
} |
||||
|
||||
.tx-nf-blocks { |
||||
margin-bottom: 40px; |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.tx-nf-block { |
||||
background-color: #fff; |
||||
box-shadow: 0px 0px 30px 0px rgba(202, 199, 226, 0.5); |
||||
padding: 17px 40px 17px 20px; |
||||
position: relative; |
||||
border-radius: 6px; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
width: calc(50% - 20px); |
||||
} |
||||
} |
||||
|
||||
.tx-nf-block { |
||||
.error-descr { |
||||
margin-bottom: 0; |
||||
} |
||||
& + .tx-nf-block { |
||||
margin-top: 30px; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
margin-top: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tx-nf-blocks-row { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: column; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
flex-direction: row; |
||||
} |
||||
& + .tx-nf-blocks-row { |
||||
margin-top: 30px; |
||||
@media (min-width: $error-tablet-breakpoint) { |
||||
margin-top: 40px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tx-nf-number { |
||||
display: inline-block; |
||||
position: absolute; |
||||
top: -15px; |
||||
left: -15px; |
||||
width: 30px; |
||||
height: 30px; |
||||
border-radius: 15px; |
||||
background-color: $secondary; |
||||
box-shadow: 0px 3px 5px 0px rgba($secondary, 0.25); |
||||
color: #fff; |
||||
font-weight: 700; |
||||
font-size: 14px; |
||||
text-align: center; |
||||
line-height: 32px; |
||||
} |
||||
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 32 KiB |
@ -1,16 +1,12 @@ |
||||
<section class="container"> |
||||
<div class="row"> |
||||
<div class="col-12"> |
||||
<div class="card"> |
||||
<div class="card-body"> |
||||
<h1 class="card-title" data-test="detail_type"> |
||||
<%= gettext("Block Details") %> |
||||
</h1> |
||||
<div class="tile tile-muted text-center" data-selector="block-not-found-message"> |
||||
<%= block_not_found_message(@block_above_tip) %> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="block-not-found"> |
||||
<div class="block-not-found-img"> |
||||
<img alt="Block Not Found" src="/images/errors-img/eth-block-not-found.png" srcset="/images/eth-block-not-found@2x.png 2x"> |
||||
</div> |
||||
<div class="block-not-found-content"> |
||||
<h1 class="card-title error-title"><%= gettext("Block Details") %></h1> |
||||
<p class="error-descr"><%= block_not_found_message(@block_above_tip) %></p> |
||||
<a class="error-btn btn-line" href="/">Back Home</a> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
@ -1,47 +1,33 @@ |
||||
<section class="container"> |
||||
<section data-page="transaction-details" data-page-transaction-hash="<%= @transaction_hash %>"> |
||||
<div class="row"> |
||||
<div class="col-12"> |
||||
<div class="card"> |
||||
<div class="card-body"> |
||||
<div class="icon-links float-right"> |
||||
<span data-clipboard-text="<%= @transaction_hash %>"> |
||||
<span |
||||
aria-label='<%= gettext("Copy Transaction Hash") %>' |
||||
class="btn-copy-ico" |
||||
data-placement="top" |
||||
data-toggle="tooltip" |
||||
title='<%= gettext("Copy Txn Hash") %>' |
||||
> |
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32"> |
||||
<path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/> |
||||
</svg> |
||||
</span> |
||||
</span> |
||||
</div> |
||||
<h1 class="card-title"><%= gettext "Transaction Details" %> </h1> |
||||
<div class="tile tile-muted text-center"> |
||||
<div class="loading-spinner mx-auto"> |
||||
<span class="loading-spinner-block-1"></span> |
||||
<span class="loading-spinner-block-2"></span> |
||||
</div> |
||||
<br> |
||||
<span><%= gettext("The transaction %{bold_hash} was not processed yet", bold_hash: "<span class=\"font-weight-bold\">#{@transaction_hash}</span>") |> raw() %> <span> |
||||
</div> |
||||
<hr> |
||||
<div class="text-center"> |
||||
<h2><%= gettext "Once we have the transaction's data this page will refresh automatically" %></h2> |
||||
<h3><%= gettext "The possible reasons for this transaction not being processed include the following:" %></h3> |
||||
<ul class="d-inline-block text-left"> |
||||
<li><%= gettext "The transaction was made a few seconds ago" %></li> |
||||
<li><%= gettext "The transaction may be in the pool of a node that didn't broadcast it yet" %></li> |
||||
<li><%= gettext "Some transactions may take a while longer to be indexed depending on the load on the network" %></li> |
||||
<li><%= gettext "The transaction still does not exist" %></li> |
||||
</ul> |
||||
</div> |
||||
<div class="tx-nf"> |
||||
<div class="tx-nf-illustr"> |
||||
<img alt="Block Not Found" src="/images/errors-img/eth-tx-not-found.png" srcset="/images/errors-img/eth-tx-not-found@2x.png 2x"> |
||||
</div> |
||||
<div class="tx-nf-content"> |
||||
<h1 class="card-title error-title"><%= gettext("Sorry, We are unable to locate this transaction Hash") %></h1> |
||||
<div class="tx-nf-blocks"> |
||||
<div class="tx-nf-blocks-row"> |
||||
<div class="tx-nf-block"> |
||||
<span class="tx-nf-number">1</span> |
||||
<p class="error-descr"><%= gettext("If you have just submitted this transaction please wait for at least 30 seconds before refreshing this page.") %></p> |
||||
</div> |
||||
<div class="tx-nf-block"> |
||||
<span class="tx-nf-number">2</span> |
||||
<p class="error-descr"><%= gettext("It could still be in the TX Pool of a different node, waiting to be broadcasted.") %></p> |
||||
</div> |
||||
</div> |
||||
<div class="tx-nf-blocks-row"> |
||||
<div class="tx-nf-block"> |
||||
<span class="tx-nf-number">3</span> |
||||
<p class="error-descr"><%= gettext("During times when the network is busy (i.e during ICOs) it can take a while for your transaction to propagate through the network and for us to index it.") %></p> |
||||
</div> |
||||
<div class="tx-nf-block"> |
||||
<span class="tx-nf-number">4</span> |
||||
<p class="error-descr"><%= gettext("If it still does not show up after 1 hour, please check with your sender/exchange/wallet/transaction provider for additional information.") %></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<a class="error-btn btn-line" href="/"><%= gettext("Back Home") %></a> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</section> |
||||