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