Merge branch 'verify-link-to-other-explorers' of github.com:poanetwork/blockscout into verify-link-to-other-explorers

pull/1890/head
Victor Baranov 6 years ago
commit 9c52100fe0
  1. 1
      CHANGELOG.md
  2. 156
      apps/block_scout_web/assets/css/components/_verify_other_explorers.scss
  3. BIN
      apps/block_scout_web/assets/static/images/icons/etherscan.png
  4. BIN
      apps/block_scout_web/assets/static/images/icons/etherscan@2x.png
  5. 70
      apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex

@ -1,6 +1,7 @@
## Current
### Features
- [#2030](https://github.com/poanetwork/blockscout/pull/2030) - added 'Verify link to other explorers' block and modal dialog
- [#1963](https://github.com/poanetwork/blockscout/pull/1963), [#1959](https://github.com/poanetwork/blockscout/pull/1959), [#1948](https://github.com/poanetwork/blockscout/pull/1948), [#1936](https://github.com/poanetwork/blockscout/pull/1936), [#1925](https://github.com/poanetwork/blockscout/pull/1925), [#1922](https://github.com/poanetwork/blockscout/pull/1922), [#1903](https://github.com/poanetwork/blockscout/pull/1903), [#1874](https://github.com/poanetwork/blockscout/pull/1874), [#1895](https://github.com/poanetwork/blockscout/pull/1895) - added new themes and logos for poa, eth, rinkeby, goerli, ropsten, kovan, sokol, xdai, etc, rsk
- [#2010](https://github.com/poanetwork/blockscout/pull/2010) - added "block not found" and "tx not found pages"
- [#1928](https://github.com/poanetwork/blockscout/pull/1928) - pagination styles were updated

@ -1,29 +1,183 @@
.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");

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -1,9 +1,64 @@
<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">
<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>
<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">&times;</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
@ -18,7 +73,7 @@
</span>
</div>
</div>
<div class="verify-other-explorers-row">
<div class="verify-other-explorers-modal-row">
<div class="verify-other-explorers-cell left">
<span class="etherchain-logo">
etherchain.org
@ -35,3 +90,8 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save