diff --git a/CHANGELOG.md b/CHANGELOG.md index 14cae576cc..5bcac0b554 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/apps/block_scout_web/assets/css/components/_verify_other_explorers.scss b/apps/block_scout_web/assets/css/components/_verify_other_explorers.scss index 36d7ae145c..84f4356e3b 100644 --- a/apps/block_scout_web/assets/css/components/_verify_other_explorers.scss +++ b/apps/block_scout_web/assets/css/components/_verify_other_explorers.scss @@ -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; -} \ No newline at end of file +} diff --git a/apps/block_scout_web/assets/static/images/icons/etherscan.png b/apps/block_scout_web/assets/static/images/icons/etherscan.png new file mode 100644 index 0000000000..c5bcd4bcdb Binary files /dev/null and b/apps/block_scout_web/assets/static/images/icons/etherscan.png differ diff --git a/apps/block_scout_web/assets/static/images/icons/etherscan@2x.png b/apps/block_scout_web/assets/static/images/icons/etherscan@2x.png new file mode 100644 index 0000000000..a99bffb0d1 Binary files /dev/null and b/apps/block_scout_web/assets/static/images/icons/etherscan@2x.png differ diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex index 542bdf74c3..85df676383 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex @@ -1,37 +1,97 @@
-

- Verify with other explorers -

-
+ +
+

Verify with other Explorers:

-
- -
-
- - <%= 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) - ) %> - -
+ + +
+

Etherscan.io

+
https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da
+
+ + + +
+

Blockchair.com

+
https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da
+
+ + + +
+

Etherchain.org

+
https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da
+
+ + + + + +
-
-
- -
-
- - <%= 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) - ) %> - +
+ + -
\ No newline at end of file + +