Merge pull request #2030 from maxgrapps/verify-link-to-other-explorers
Verify link to other explorers blocks and modal dialogpull/1890/head
Victor Baranov
6 years ago
committed by
GitHub
commit
12983605fd
@ -1,33 +1,187 @@ |
||||
.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: 450px; |
||||
} |
||||
|
||||
.verify-other-explorers-table { |
||||
display: table; |
||||
} |
||||
.verify-other-explorers-row { |
||||
|
||||
.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: 1.8 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
@ -1,37 +1,97 @@ |
||||
<div> |
||||
<h1 class="card-title mt-5"> |
||||
Verify with other explorers |
||||
</h1> |
||||
<div class="verify-other-explorers-table"> |
||||
|
||||
<div class="verify-other-explorers"> |
||||
<h2>Verify with other Explorers:</h2> |
||||
<div class="verify-other-explorers-row"> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class="blockchair-logo"> |
||||
blockchair.com |
||||
</span> |
||||
</div> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class='link'> |
||||
<%= link( |
||||
address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false), |
||||
to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true) |
||||
) %> |
||||
</span> |
||||
</div> |
||||
<a href="#" class="verify-other-explorers-elem"> |
||||
<div class="exp-logo etherscan"></div> |
||||
<div class="exp-content"> |
||||
<h3>Etherscan.io</h3> |
||||
<div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div> |
||||
</div> |
||||
</a> |
||||
<a href="#" class="verify-other-explorers-elem"> |
||||
<div class="exp-logo blockchair"></div> |
||||
<div class="exp-content"> |
||||
<h3>Blockchair.com</h3> |
||||
<div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div> |
||||
</div> |
||||
</a> |
||||
<a href="#" class="verify-other-explorers-elem"> |
||||
<div class="exp-logo etherchain"></div> |
||||
<div class="exp-content"> |
||||
<h3>Etherchain.org</h3> |
||||
<div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div> |
||||
</div> |
||||
</a> |
||||
<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 class="verify-other-explorers-row"> |
||||
<div class="verify-other-explorers-cell left"> |
||||
<span class="etherchain-logo"> |
||||
etherchain.org |
||||
</span> |
||||
</div> |
||||
<div class="verify-other-explorers-cell right"> |
||||
<span class='link'> |
||||
<%= link( |
||||
address_link_to_other_explorer("https://www.etherchain.org/account/", @address, false), |
||||
to: address_link_to_other_explorer("https://www.etherchain.org/account/", @address, true) |
||||
) %> |
||||
</span> |
||||
</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"> |
||||
<div class="verify-other-explorers-modal-row"> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class="etherscan-logo"> |
||||
Etherscan.io |
||||
</span> |
||||
</div> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class='link'> |
||||
<%= link( |
||||
address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false), |
||||
to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true) |
||||
) %> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="verify-other-explorers-modal-row"> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class="blockchair-logo"> |
||||
blockchair.com |
||||
</span> |
||||
</div> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class='link'> |
||||
<%= link( |
||||
address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false), |
||||
to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true) |
||||
) %> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="verify-other-explorers-modal-row"> |
||||
<div class="verify-other-explorers-cell left"> |
||||
<span class="etherchain-logo"> |
||||
etherchain.org |
||||
</span> |
||||
</div> |
||||
<div class="verify-other-explorers-cell right"> |
||||
<span class='link'> |
||||
<%= link( |
||||
address_link_to_other_explorer("https://www.etherchain.org/account/", @address, false), |
||||
to: address_link_to_other_explorer("https://www.etherchain.org/account/", @address, true) |
||||
) %> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
Loading…
Reference in new issue