Victor Baranov
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"> |
<section class="container"> |
||||||
<div class="row"> |
<div class="block-not-found"> |
||||||
<div class="col-12"> |
<div class="block-not-found-img"> |
||||||
<div class="card"> |
<img alt="Block Not Found" src="/images/errors-img/eth-block-not-found.png" srcset="/images/eth-block-not-found@2x.png 2x"> |
||||||
<div class="card-body"> |
</div> |
||||||
<h1 class="card-title" data-test="detail_type"> |
<div class="block-not-found-content"> |
||||||
<%= gettext("Block Details") %> |
<h1 class="card-title error-title"><%= gettext("Block Details") %></h1> |
||||||
</h1> |
<p class="error-descr"><%= block_not_found_message(@block_above_tip) %></p> |
||||||
<div class="tile tile-muted text-center" data-selector="block-not-found-message"> |
<a class="error-btn btn-line" href="/">Back Home</a> |
||||||
<%= block_not_found_message(@block_above_tip) %> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</section> |
</section> |
||||||
@ -1,47 +1,33 @@ |
|||||||
<section class="container"> |
<section class="container"> |
||||||
<section data-page="transaction-details" data-page-transaction-hash="<%= @transaction_hash %>"> |
<div class="tx-nf"> |
||||||
<div class="row"> |
<div class="tx-nf-illustr"> |
||||||
<div class="col-12"> |
<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 class="card"> |
</div> |
||||||
<div class="card-body"> |
<div class="tx-nf-content"> |
||||||
<div class="icon-links float-right"> |
<h1 class="card-title error-title"><%= gettext("Sorry, We are unable to locate this transaction Hash") %></h1> |
||||||
<span data-clipboard-text="<%= @transaction_hash %>"> |
<div class="tx-nf-blocks"> |
||||||
<span |
<div class="tx-nf-blocks-row"> |
||||||
aria-label='<%= gettext("Copy Transaction Hash") %>' |
<div class="tx-nf-block"> |
||||||
class="btn-copy-ico" |
<span class="tx-nf-number">1</span> |
||||||
data-placement="top" |
<p class="error-descr"><%= gettext("If you have just submitted this transaction please wait for at least 30 seconds before refreshing this page.") %></p> |
||||||
data-toggle="tooltip" |
</div> |
||||||
title='<%= gettext("Copy Txn Hash") %>' |
<div class="tx-nf-block"> |
||||||
> |
<span class="tx-nf-number">2</span> |
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32"> |
<p class="error-descr"><%= gettext("It could still be in the TX Pool of a different node, waiting to be broadcasted.") %></p> |
||||||
<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"/> |
</div> |
||||||
</svg> |
</div> |
||||||
</span> |
<div class="tx-nf-blocks-row"> |
||||||
</span> |
<div class="tx-nf-block"> |
||||||
</div> |
<span class="tx-nf-number">3</span> |
||||||
<h1 class="card-title"><%= gettext "Transaction Details" %> </h1> |
<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 class="tile tile-muted text-center"> |
</div> |
||||||
<div class="loading-spinner mx-auto"> |
<div class="tx-nf-block"> |
||||||
<span class="loading-spinner-block-1"></span> |
<span class="tx-nf-number">4</span> |
||||||
<span class="loading-spinner-block-2"></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> |
||||||
<br> |
</div> |
||||||
<span><%= gettext("The transaction %{bold_hash} was not processed yet", bold_hash: "<span class=\"font-weight-bold\">#{@transaction_hash}</span>") |> raw() %> <span> |
</div> |
||||||
</div> |
<a class="error-btn btn-line" href="/"><%= gettext("Back Home") %></a> |
||||||
<hr> |
</div> |
||||||
<div class="text-center"> |
</div> |
||||||
<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> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
</section> |
</section> |
||||||