Merge pull request #2040 from poanetwork/verify-link-to-other-explorers
Verification links to other explorerspull/2050/head
Victor Baranov
6 years ago
committed by
GitHub
commit
608485ff25
@ -0,0 +1,189 @@ |
||||
.verify-other-explorers { |
||||
display: flex; |
||||
margin-top: 26px; |
||||
flex-direction: column; |
||||
flex-wrap: wrap; |
||||
@media (min-width: 768px) { |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
@media (min-width: 1200px) { |
||||
flex-wrap: nowrap; |
||||
} |
||||
h2 { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: 400; |
||||
line-height: 1.25; |
||||
display: inline-flex; |
||||
margin-bottom: 12px; |
||||
@media (min-width: 1200px) { |
||||
margin-right: 10px; |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.verify-other-explorers-row { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-grow: 2; |
||||
@media (min-width: 768px) { |
||||
flex-direction: row; |
||||
} |
||||
} |
||||
|
||||
.verify-other-explorers-elem { |
||||
display: inline-flex; |
||||
border: 1px solid #e2e5ec; |
||||
border-radius: 2px; |
||||
flex-grow: 2; |
||||
@media (min-width: 768px) { |
||||
margin-top: 0; |
||||
} |
||||
@media (min-width: 1200px) { |
||||
min-width: 145px; |
||||
} |
||||
& + .verify-other-explorers-elem { |
||||
margin-top: 10px; |
||||
@media (min-width: 768px) { |
||||
margin-top: 0; |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
|
||||
.exp-logo { |
||||
min-width: 34px; |
||||
border-right: 1px solid #e2e5ec; |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
&.etherscan { |
||||
@include image-2x('/images/icons/etherscan@2x.png', 15px, 16px); |
||||
background-image: url("/images/icons/etherscan.png"); |
||||
background-size: 15px 16px; |
||||
} |
||||
&.blockchair { |
||||
@include image-2x('/images/icons/blockchair@2x.png', 10px, 16px); |
||||
background-image: url("/images/icons/blockchair.png"); |
||||
background-size: 10px 16px; |
||||
} |
||||
&.etherchain { |
||||
@include image-2x('/images/icons/etherchain@2x.png', 16px, 16px); |
||||
background-image: url("/images/icons/etherchain.png"); |
||||
background-size: 16px 16px; |
||||
} |
||||
} |
||||
|
||||
.exp-content { |
||||
padding: 6px 9px 4px 9px; |
||||
h3, div { |
||||
font-size: 10px; |
||||
line-height: 1; |
||||
} |
||||
h3 { |
||||
color: #333; |
||||
font-weight: 400; |
||||
margin-bottom: 0; |
||||
margin-bottom: 1px; |
||||
} |
||||
div { |
||||
color: #49a2ee; |
||||
display: block; |
||||
line-height: 1; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
width: 170px; |
||||
white-space: nowrap; |
||||
@media (min-width: 576px) { |
||||
width: 398px; |
||||
} |
||||
@media (min-width: 768px) { |
||||
width: 130px; |
||||
} |
||||
@media (min-width: 992px) { |
||||
width: 90px; |
||||
} |
||||
@media (min-width: 1200px) { |
||||
width: 93px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.verify-other-explorers-more { |
||||
min-width: 34px; |
||||
height: 34px; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border: 1px solid $secondary; |
||||
border-radius: 2px; |
||||
margin-top: 10px; |
||||
transition: .1s ease-in; |
||||
@media (min-width: 768px) { |
||||
margin-left: 10px; |
||||
margin-top: 0; |
||||
} |
||||
svg path { |
||||
fill: $secondary; |
||||
} |
||||
&:hover { |
||||
background-color: $secondary; |
||||
svg path { |
||||
fill: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.verify-other-explorers-dialog { |
||||
max-width: 330px; |
||||
} |
||||
|
||||
.verify-other-explorers-table { |
||||
display: table; |
||||
} |
||||
|
||||
.verify-other-explorers-modal-row { |
||||
display: table-row; |
||||
height: 29px; |
||||
} |
||||
|
||||
.verify-other-explorers-cell { |
||||
display: table-cell; |
||||
&.left { |
||||
min-width: 120px; |
||||
} |
||||
} |
||||
|
||||
.link { |
||||
background-image: url("/images/icons/link.svg"); |
||||
background-repeat: no-repeat; |
||||
padding-left: 15px; |
||||
background-size: 12px 12px; |
||||
} |
||||
|
||||
.etherscan-logo { |
||||
@include image-2x('/images/icons/etherscan@2x.png', 15px, 16px); |
||||
background-image: url("/images/icons/etherscan.png"); |
||||
background-repeat: no-repeat; |
||||
padding-left: 25px; |
||||
background-size: 15px 16px; |
||||
} |
||||
|
||||
.blockchair-logo { |
||||
@include image-2x('/images/icons/blockchair@2x.png', 10px, 16px); |
||||
background-image: url("/images/icons/blockchair.png"); |
||||
background-repeat: no-repeat; |
||||
padding-left: 25px; |
||||
background-size: 10px 16px; |
||||
background-position: left 3px center; |
||||
} |
||||
|
||||
.etherchain-logo { |
||||
@include image-2x('/images/icons/etherchain@2x.png', 16px, 16px); |
||||
background-image: url("/images/icons/etherchain.png"); |
||||
background-repeat: no-repeat; |
||||
padding-left: 25px; |
||||
background-size: 16px 16px; |
||||
} |
||||
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 708 B |
@ -0,0 +1,15 @@ |
||||
<%= if @type=="address" do %> |
||||
<a href="<%= address_link_to_other_explorer(@address_link, @hash ,true) %>" class="verify-other-explorers-elem"> |
||||
<% else %> |
||||
<a href="<%= address_link_to_other_explorer(@tx_link, @hash ,true) %>" class="verify-other-explorers-elem"> |
||||
<% end %> |
||||
<div class="exp-logo <%= @class %>"></div> |
||||
<div class="exp-content"> |
||||
<h3><%= @header %></h3> |
||||
<%= if @type=="address" do %> |
||||
<div><%= address_link_to_other_explorer(@address_link, @hash ,true) %></div> |
||||
<% else %> |
||||
<div><%= address_link_to_other_explorer(@tx_link, @hash ,true) %></div> |
||||
<% end %> |
||||
</div> |
||||
</a> |
||||
@ -0,0 +1,22 @@ |
||||
<div class="verify-other-explorers-modal-row"> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class="etherscan-logo"> |
||||
<%= @header %> |
||||
</span> |
||||
</div> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class='link'> |
||||
<%= if @type=="address" do %> |
||||
<%= link( |
||||
address_link_to_other_explorer(@address_link, @hash, false), |
||||
to: address_link_to_other_explorer(@address_link, @hash ,true) |
||||
) %> |
||||
<% else %> |
||||
<%= link( |
||||
address_link_to_other_explorer(@tx_link, @hash, false), |
||||
to: address_link_to_other_explorer(@tx_link, @hash ,true) |
||||
) %> |
||||
<% end %> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,37 @@ |
||||
<div> |
||||
|
||||
<div class="verify-other-explorers"> |
||||
<h2>Verify with other Explorers:</h2> |
||||
<div class="verify-other-explorers-row"> |
||||
<%= render "_verify_other_explorer.html", hash: @hash, type: @type, header: "Etherscan.io", class: "etherscan", address_link: "https://etherscan.io/address/", tx_link: "https://etherscan.io/tx/" %> |
||||
<%= render "_verify_other_explorer.html", hash: @hash, type: @type, header: "Blockchair.com", class: "blockchair", address_link: "https://blockchair.com/ethereum/address/", tx_link: "https://blockchair.com/ethereum/transaction/" %> |
||||
<%= render "_verify_other_explorer.html", hash: @hash, type: @type, header: "Etherchain.org", class: "etherchain", address_link: "https://www.etherchain.org/account/", tx_link: "https://www.etherchain.org/tx/" %> |
||||
<a href="#" class="verify-other-explorers-more" data-toggle="modal" data-target="#explorersModal"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="4"> |
||||
<path fill="#49A2EE" fill-rule="evenodd" d="M16 4a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 4zM9 4A2 2 0 1 1 8.999.001 2 2 0 0 1 9 4zM2 4A2 2 0 1 1 1.999.001 2 2 0 0 1 2 4z"/> |
||||
</svg> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal fade" tabindex="-1" role="dialog" id="explorersModal"> |
||||
<div class="modal-dialog verify-other-explorers-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title">Verify with other Explorers</h5> |
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
||||
<span aria-hidden="true">×</span> |
||||
</button> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<div class="verify-other-explorers-table"> |
||||
<%= render "_verify_other_explorer_modal.html", hash: @hash, type: @type, header: "Etherscan.io", class: "etherscan", address_link: "https://etherscan.io/address/", tx_link: "https://etherscan.io/tx/" %> |
||||
<%= render "_verify_other_explorer_modal.html", hash: @hash, type: @type, header: "Blockchair.com", class: "blockchair", address_link: "https://blockchair.com/ethereum/address/", tx_link: "https://blockchair.com/ethereum/transaction/" %> |
||||
<%= render "_verify_other_explorer_modal.html", hash: @hash, type: @type, header: "Etherchain.org", class: "etherchain", address_link: "https://www.etherchain.org/account/", tx_link: "https://www.etherchain.org/tx/" %> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
Loading…
Reference in new issue