Merge pull request #2637 from YegorSan/frontend-tasks

Changed text color for all error messages boxes for coin_balances page to the required one / Main Blockscout page banner height bug fix and new changes / New tooltips for Block Details page added / Token image added to the Token instance page.
pull/2659/head
Victor Baranov 5 years ago committed by GitHub
commit 57bc96176a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 12
      apps/block_scout_web/assets/css/app.scss
  2. 32
      apps/block_scout_web/assets/css/components/_card.scss
  3. 86
      apps/block_scout_web/assets/css/components/_custom_tooltips_block_details.scss
  4. 61
      apps/block_scout_web/assets/css/components/_dashboard-banner.scss
  5. 7
      apps/block_scout_web/assets/css/components/_transaction.scss
  6. 10
      apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
  7. 4
      apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex
  8. 47
      apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex
  9. 36
      apps/block_scout_web/priv/gettext/default.pot
  10. 36
      apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@ -13,13 +13,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "fa-brands"; @import "fa-brands";
@import "fa-regular"; @import "fa-regular";
@import "fa-solid"; @import "fa-solid";
// Bootstrap Core CSS // Bootstrap Core CSS
@import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/mixins"; @import "node_modules/bootstrap/scss/mixins";
@import "theme/variables"; @import "theme/variables";
@import "node_modules/bootstrap/scss/root"; @import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot"; @import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/grid"; @import "node_modules/bootstrap/scss/grid";
@ -38,7 +35,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "node_modules/bootstrap/scss/utilities/position"; @import "node_modules/bootstrap/scss/utilities/position";
@import "node_modules/bootstrap/scss/utilities/borders"; @import "node_modules/bootstrap/scss/utilities/borders";
@import "node_modules/bootstrap/scss/progress"; @import "node_modules/bootstrap/scss/progress";
// Bootstrap Components // Bootstrap Components
@import "node_modules/bootstrap/scss/alert"; @import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/badge"; @import "node_modules/bootstrap/scss/badge";
@ -50,13 +46,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "node_modules/bootstrap/scss/pagination"; @import "node_modules/bootstrap/scss/pagination";
@import "node_modules/bootstrap/scss/tables"; @import "node_modules/bootstrap/scss/tables";
@import "node_modules/bootstrap/scss/transitions"; @import "node_modules/bootstrap/scss/transitions";
// Code highlight // Code highlight
@import "node_modules/highlight.js/styles/default"; @import "node_modules/highlight.js/styles/default";
//Custom theme //Custom theme
@import "theme/fonts"; @import "theme/fonts";
// Custom SCSS // Custom SCSS
@import "layout"; @import "layout";
@import "typography"; @import "typography";
@ -113,9 +106,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "components/new_smart_contract"; @import "components/new_smart_contract";
@import "components/radio_big"; @import "components/radio_big";
@import "components/btn_no_border"; @import "components/btn_no_border";
@import "components/custom_tooltips_block_details";
@import "theme/dark-theme"; @import "theme/dark-theme";
:export { :export {
dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color; dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
dashboardLineColorMarket: $dashboard-line-color-market; dashboardLineColorMarket: $dashboard-line-color-market;
@ -125,3 +117,5 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
darkprimary: $dark-primary; darkprimary: $dark-primary;
darksecondary: $dark-secondary; darksecondary: $dark-secondary;
} }

@ -7,22 +7,19 @@ $card-background-1: $primary !default;
$card-background-1-text-color: #fff !default; $card-background-1-text-color: #fff !default;
$card-tab-icon-color: #20b760 !default; $card-tab-icon-color: #20b760 !default;
$card-tab-icon-color-active: #fff !default; $card-tab-icon-color-active: #fff !default;
.card { .card {
background-color: $card-background-color; background-color: $card-background-color;
border-radius: $card-default-border-radius; border-radius: $card-default-border-radius;
border: none; border: none;
box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5); box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
margin-bottom: $common-container-margin; margin-bottom: $common-container-margin;
.block-details-row { .block-details-row {
flex-direction: row; flex-direction: row;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
flex-direction: column; flex-direction: column;
} }
.block-detail-el { .block-detail-el {
& + .block-detail-el { &+.block-detail-el {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
margin-top: 6px; margin-top: 6px;
} }
@ -34,7 +31,6 @@ $card-tab-icon-color-active: #fff !default;
.card-background-1 { .card-background-1 {
background-color: $card-background-1; background-color: $card-background-1;
color: $card-background-1-text-color; color: $card-background-1-text-color;
a:not(.dropdown-item), a:not(.dropdown-item),
a:not(.dropdown-item):hover { a:not(.dropdown-item):hover {
color: $card-background-1-text-color; color: $card-background-1-text-color;
@ -45,7 +41,6 @@ $card-tab-icon-color-active: #fff !default;
background: transparent; background: transparent;
border-bottom: 1px solid $base-border-color; border-bottom: 1px solid $base-border-color;
padding: $card-vertical-padding $card-horizontal-padding; padding: $card-vertical-padding $card-horizontal-padding;
&-tabs { &-tabs {
margin: (-$card-spacer-y) (-$card-spacer-x); margin: (-$card-spacer-y) (-$card-spacer-x);
} }
@ -56,33 +51,26 @@ $card-tab-icon-color-active: #fff !default;
font-weight: normal; font-weight: normal;
line-height: 1.2rem; line-height: 1.2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
&.lg-card-title { &.lg-card-title {
@media (max-width: 374px) { @media (max-width: 374px) {
font-size: 13px; font-size: 13px;
} }
} }
&.margin-bottom-md { &.margin-bottom-md {
margin-bottom: 25px; margin-bottom: 25px;
} }
&.margin-bottom-sm { &.margin-bottom-sm {
margin-bottom: 15px; margin-bottom: 15px;
} }
&.margin-bottom-xs { &.margin-bottom-xs {
margin-bottom: 10px; margin-bottom: 10px;
} }
&.margin-bottom-0 { &.margin-bottom-0 {
margin-bottom: 0; margin-bottom: 0;
} }
.card-title-container & { .card-title-container & {
line-height: 1.2; line-height: 1.2;
margin: 0; margin: 0;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
margin-bottom: 25px; margin-bottom: 25px;
} }
@ -95,7 +83,6 @@ $card-tab-icon-color-active: #fff !default;
font-weight: normal; font-weight: normal;
line-height: 1.2; line-height: 1.2;
margin: 0 0 30px; margin: 0 0 30px;
&.margin-bottom-0 { &.margin-bottom-0 {
margin-bottom: 0; margin-bottom: 0;
} }
@ -106,7 +93,6 @@ $card-tab-icon-color-active: #fff !default;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 25px $card-horizontal-padding; padding: 25px $card-horizontal-padding;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
flex-direction: column; flex-direction: column;
} }
@ -116,22 +102,17 @@ $card-tab-icon-color-active: #fff !default;
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
flex-direction: column; flex-direction: column;
} }
.card-title-control { .card-title-control {
margin-right: 20px; margin-right: 20px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
margin-bottom: 20px; margin-bottom: 20px;
margin-right: 0; margin-right: 0;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -156,7 +137,6 @@ $card-tab-icon-color-active: #fff !default;
.card-chain-blocks { .card-chain-blocks {
height: auto; height: auto;
[class*="col-"]:last-child { [class*="col-"]:last-child {
.tile { .tile {
margin-bottom: 0; margin-bottom: 0;
@ -166,7 +146,6 @@ $card-tab-icon-color-active: #fff !default;
.card-chain-transactions { .card-chain-transactions {
height: auto; height: auto;
.tile { .tile {
margin-bottom: 0; margin-bottom: 0;
} }
@ -180,7 +159,6 @@ $card-tab-icon-color-active: #fff !default;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
overflow: hidden; overflow: hidden;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
flex-direction: column; flex-direction: column;
} }
@ -198,38 +176,31 @@ $card-tab-icon-color-active: #fff !default;
padding: 0 25px; padding: 0 25px;
text-align: center; text-align: center;
transition: $transition-cont; transition: $transition-cont;
&:hover { &:hover {
background-color: rgba($card-tab-active, .15); background-color: rgba($card-tab-active, .15);
color: $card-tab-active; color: $card-tab-active;
text-decoration: none; text-decoration: none;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display: none; display: none;
width: 100%; width: 100%;
} }
.fa-check-circle { .fa-check-circle {
color: $card-tab-icon-color; color: $card-tab-icon-color;
margin-left: 6px; margin-left: 6px;
} }
&.active { &.active {
background-color: $card-tab-active; background-color: $card-tab-active;
color: #fff; color: #fff;
cursor: default; cursor: default;
text-decoration: none; text-decoration: none;
.fa-check-circle { .fa-check-circle {
color: $card-tab-icon-color-active; color: $card-tab-icon-color-active;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
order: -1; order: -1;
&::after { &::after {
border-bottom: 0; border-bottom: 0;
border-left: 0.3em solid transparent; border-left: 0.3em solid transparent;
@ -241,7 +212,6 @@ $card-tab-icon-color-active: #fff !default;
margin-left: 10px; margin-left: 10px;
width: 0; width: 0;
} }
&.noCaret::after { &.noCaret::after {
display: none; display: none;
} }

@ -0,0 +1,86 @@
/* Custom Tooltips for Block Details Page */
.tooltipCustom {
position: relative;
display: inline-block;
}
.tooltipCustom .tooltiptextTopMiner {
visibility: hidden;
position: absolute;
width: 50%;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
left: 25%;
bottom: 100%;
padding: 15px 0px;
display: inline-block;
z-index: 1;
font-family: Nunito;
margin-bottom: 15px;
opacity: 0;
transition: opacity 0.5s;
@include media-breakpoint-down(lg) {
left: 60%;
}
}
.tooltipCustom .tooltiptextTopMiner::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: white transparent transparent transparent;
}
.tooltipCustom:hover .tooltiptextTopMiner {
visibility: visible;
opacity: 1;
}
.tooltipCustom .tooltiptextTopR {
visibility: hidden;
position: absolute;
width: 50%;
background-color: $primary;
color: white;
text-align: center;
border-radius: 6px;
left: 52%;
bottom: 120%;
padding: 15px 10px;
font-family: Nunito;
display: inline-block;
z-index: 1;
margin-bottom: 15px;
opacity: 0;
transition: opacity 0.5s;
@include media-breakpoint-down(lg) {
bottom: 100%;
padding: 9px 10px;
}
}
.tooltipCustom .tooltiptextTopR::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: $primary transparent transparent transparent;
}
.tooltipCustom:hover .tooltiptextTopR {
visibility: visible;
opacity: 1;
}
/* Custom Tooltips for Block Details Page end*/

@ -1,10 +1,7 @@
$dashboard-banner-gradient-start: $primary !default; $dashboard-banner-gradient-start: $primary !default;
$dashboard-banner-gradient-end: lighten( $dashboard-banner-gradient-end: lighten( $dashboard-banner-gradient-start, 5%) !default;
$dashboard-banner-gradient-start, $dashboard-banner-network-plain-container-background-color: lighten( $dashboard-banner-gradient-end, 5%) !default;
5% $dashboard-line-color-price: lighten( $dashboard-banner-gradient-end, 5%) !default;
) !default;
$dashboard-banner-network-plain-container-background-color: lighten($dashboard-banner-gradient-end, 5%)!default;
$dashboard-line-color-price: lighten($dashboard-banner-gradient-end, 5%) !default;
$dashboard-line-color-market: $secondary !default; $dashboard-line-color-market: $secondary !default;
$dashboard-stats-item-label-color: #fff !default; $dashboard-stats-item-label-color: #fff !default;
$dashboard-stats-item-value-color: rgba(#fff, 0.8) !default; $dashboard-stats-item-value-color: rgba(#fff, 0.8) !default;
@ -13,79 +10,74 @@ $dashboard-banner-chart-legend-value-color: $dashboard-stats-item-value-color !d
$dashboard-stats-item-border-color: $primary !default; $dashboard-stats-item-border-color: $primary !default;
$dashboard-banner-network-plain-container-height: 205px; $dashboard-banner-network-plain-container-height: 205px;
$dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default; $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default;
.dashboard-banner-container { .dashboard-banner-container {
@include gradient-container(); @include gradient-container();
margin-bottom: 3rem; margin-bottom: 3rem;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: relative; position: relative;
height: 249px;
@include media-breakpoint-down(sm) {
height: auto;
}
@include media-breakpoint-down(md) {
height: auto;
}
} }
.dashboard-banner { .dashboard-banner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
z-index: 9; z-index: 9;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
flex-direction: column; flex-direction: column;
} }
} }
.dashboard-banner-network-graph { .dashboard-banner-network-graph {
flex-grow: 1; flex-grow: 1;
padding: 15px 0 0 0; padding: 15px 0 0 0;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 20px; padding-top: 20px;
} }
} }
.dashboard-banner-chart { .dashboard-banner-chart {
flex-grow: 1; flex-grow: 1;
margin: 0 0 35px 0; margin: 0 0 35px 0;
max-width: 350px; max-width: 350px;
position: relative; position: relative;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
flex-grow: 0; flex-grow: 0;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: auto; margin-top: auto;
max-width: 100%; max-width: 100%;
} }
>canvas {
> canvas {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
} }
.dashboard-banner-chart-legend { .dashboard-banner-chart-legend {
display: grid; display: flex;
grid-template-columns: 1fr 1fr; /* grid-template-columns: 1fr 1fr; */
padding-bottom: 12px; padding-bottom: 12px;
.dashboard-banner-chart-legend-item { .dashboard-banner-chart-legend-item {
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 12px; padding-left: 12px;
padding-top: 3px; padding-top: 3px;
position: relative; position: relative;
padding-right: 60px;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@media (max-width: 599px) { @media (max-width: 599px) {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
flex-direction: column; flex-direction: column;
} }
&::before { &::before {
border-radius: 2px; border-radius: 2px;
content: ""; content: "";
@ -95,16 +87,13 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
top: 0; top: 0;
width: 4px; width: 4px;
} }
&:nth-child(1)::before { &:nth-child(1)::before {
background-color: $dashboard-line-color-price; background-color: $dashboard-line-color-price;
} }
&:nth-child(2)::before { &:nth-child(2)::before {
background-color: $dashboard-line-color-market; background-color: $dashboard-line-color-market;
} }
} }
.dashboard-banner-chart-legend-label { .dashboard-banner-chart-legend-label {
color: $dashboard-banner-chart-legend-label-color; color: $dashboard-banner-chart-legend-label-color;
display: block; display: block;
@ -112,17 +101,14 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.2;
margin: 0 0 5px; margin: 0 0 5px;
@media (max-width: 374px) { @media (max-width: 374px) {
position: relative; position: relative;
top: -2px; top: -2px;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
margin: 0 5px 0 0; margin: 0 5px 0 0;
} }
} }
.dashboard-banner-chart-legend-value { .dashboard-banner-chart-legend-value {
color: $dashboard-banner-chart-legend-value-color; color: $dashboard-banner-chart-legend-value-color;
display: block; display: block;
@ -131,7 +117,6 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
line-height: 1.2; line-height: 1.2;
} }
} }
.dashboard-banner-network-plain-container { .dashboard-banner-network-plain-container {
align-items: center; align-items: center;
align-self: flex-end; align-self: flex-end;
@ -140,17 +125,15 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
display: flex; display: flex;
height: $dashboard-banner-network-plain-container-height; height: $dashboard-banner-network-plain-container-height;
justify-content: center; justify-content: center;
margin: 0 0 0 30px; margin: 45px 0 0 30px;
max-width: 100%; max-width: 100%;
padding: 30px 0 30px 60px; padding: 30px 0 30px 60px;
width: 750px; width: 750px;
position: relative; position: relative;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
margin-top: 15px; margin-top: 50px;
width: 550px; width: 550px;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
border-top-right-radius: 10px; border-top-right-radius: 10px;
height: auto; height: auto;
@ -161,11 +144,9 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
width: 250px; width: 250px;
box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
width: 100%; width: 100%;
} }
&::after { &::after {
background-color: $dashboard-banner-network-plain-container-background-color; background-color: $dashboard-banner-network-plain-container-background-color;
bottom: 0; bottom: 0;
@ -178,42 +159,34 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
z-index: -1; z-index: -1;
box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
border-top-left-radius: 10px; border-top-left-radius: 10px;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display: none; display: none;
} }
} }
} }
.dashboard-banner-network-stats { .dashboard-banner-network-stats {
column-gap: 25px; column-gap: 25px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
row-gap: 20px; row-gap: 20px;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
row-gap: 20px; row-gap: 20px;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
column-gap: 10px; column-gap: 10px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@include stats-item( $dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color);
@include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color);
.dashboard-banner-network-stats-item { .dashboard-banner-network-stats-item {
@media (max-width: 374px) { @media (max-width: 374px) {
padding-left: calc(0.6rem + 4px); padding-left: calc(0.6rem + 4px);
padding-right: 0.5rem; padding-right: 0.5rem;
} }
} }
.dashboard-banner-network-stats-value { .dashboard-banner-network-stats-value {
@media (max-width: 374px) { @media (max-width: 374px) {
font-size: 0.9rem; font-size: 0.9rem;

@ -44,3 +44,10 @@
} }
} }
} }
.block-detail-number {
width: 25%;
@include media-breakpoint-down(sm) {
width: 60%;
}
}

@ -6,8 +6,8 @@
<%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %> <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
<div class="card-body" data-async-listing="<%= @current_path %>"> <div class="card-body" data-async-listing="<%= @current_path %>">
<div data-selector="channel-disconnected-message" style="display:none;"> <div data-selector="channel-disconnected-message" style="display:none;">
<div data-selector="reload-button" class="alert alert-danger"> <div data-selector="reload-button" class="alert alert-danger" style="padding: 0.75rem 0rem; cursor: pointer;">
<a href="#" class="alert-link"><%= gettext "Connection Lost, click to load newer blocks" %></a> <span href="#" class="alert alert-danger"><%= gettext "Connection Lost, click to load newer blocks" %></span>
</div> </div>
</div> </div>
@ -30,9 +30,9 @@
<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %> <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
<button data-error-message class="alert alert-danger col-12 text-left" style="display: none;"> <div data-error-message class="alert alert-danger col-12 text-left" style="display: none; padding: 0.75rem 0rem; cursor: pointer;">
<span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span> <span href="#" class="alert alert-danger"><%= gettext("Something went wrong, click to reload.") %></span>
</button> </div>
<div data-empty-response-message style="display: none;"> <div data-empty-response-message style="display: none;">
<div class="tile tile-muted text-center" data-selector="empty-coin-balances-list"> <div class="tile tile-muted text-center" data-selector="empty-coin-balances-list">

@ -73,7 +73,7 @@
<section> <section>
<div class="d-flex justify-content-between align-items-baseline"> <div class="d-flex justify-content-between align-items-baseline">
<h3><%= gettext "Contract ABI" %></h3> <h3><%= gettext "Contract ABI" %></h3>
<button type="button" class="button button-secondary button-sm" id="button" data-clipboard-text="<%= format_smart_contract_abi(@address.smart_contract.abi) %>" aria-label="Copy Contract ABI"> <button type="button" class="btn-line" id="button" data-clipboard-text="<%= format_smart_contract_abi(@address.smart_contract.abi) %>" aria-label="Copy Contract ABI">
<%= gettext "Copy ABI" %> <%= gettext "Copy ABI" %>
</button> </button>
</div> </div>
@ -89,7 +89,7 @@
<% {:selfdestructed, transaction_init} -> %> <% {:selfdestructed, transaction_init} -> %>
<div class="d-flex justify-content-between align-items-baseline"> <div class="d-flex justify-content-between align-items-baseline">
<h3><%= gettext "Contract Creation Code" %></h3> <h3><%= gettext "Contract Creation Code" %></h3>
<button type="button" class="button button-secondary button-sm" id="button" data-clipboard-text="<%= transaction_init %>" aria-label="copy contract creation code"> <button type="button" class="btn-line" id="button" data-clipboard-text="<%= transaction_init %>" aria-label="copy contract creation code">
<%= gettext "Copy Contract Creation Code" %> <%= gettext "Copy Contract Creation Code" %>
</button> </button>
</div> </div>

@ -8,7 +8,7 @@
<%= gettext("%{block_type} Details", block_type: block_type(@block)) %> <%= gettext("%{block_type} Details", block_type: block_type(@block)) %>
</h1> </h1>
<!-- Block Height --> <!-- Block Height -->
<h3 data-test="block_detail_number"> <h3 class="block-detail-number" data-test="block_detail_number" data-toggle="tooltip" data-placement="top" title="" data-original-title="The block number in which transactions were recorded.">
<%= if block_type(@block) == "Block" do %> <%= if block_type(@block) == "Block" do %>
<%= gettext("Block Height: %{height}", height: @block.number) %> <%= if @block.number == 0, do: "- " <> gettext("Genesis Block")%> <%= gettext("Block Height: %{height}", height: @block.number) %> <%= if @block.number == 0, do: "- " <> gettext("Genesis Block")%>
<% else %> <% else %>
@ -19,24 +19,19 @@
<div class="d-flex justify-content-start text-muted block-details-row"> <div class="d-flex justify-content-start text-muted block-details-row">
<!-- # of Transactions --> <!-- # of Transactions -->
<span class="mr-4 block-detail-el"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span> <span class="mr-4 block-detail-el"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span>
<%= if @block.size do %> <%= if @block.size do %>
<!-- Block Size --> <!-- Block Size -->
<span class="mr-4 block-detail-el"> <%= Cldr.Unit.new(:byte, @block.size) |> cldr_unit_to_string!() %> </span> <span class="mr-4 block-detail-el"> <%= Cldr.Unit.new(:byte, @block.size) |> cldr_unit_to_string!() %> </span>
<% end %> <% end %>
<!-- Block Age --> <!-- Block Age -->
<span class="mr-4 block-detail-el" data-from-now="<%= @block.timestamp %>"></span> <span class="mr-4 block-detail-el" data-from-now="<%= @block.timestamp %>"></span>
</div> </div>
<hr> <hr>
<!-- Block details description list --> <!-- Block details description list -->
<!-- Block Hash --> <!-- Block Hash -->
<dl class="row"> <dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Hash" %></dt> <dt class="col-sm-3 text-muted"><%= gettext "Hash" %></dt>
<dd class="col-sm-9"><a class="transaction__link"><%= to_string(@block.hash) %></a></dd> <dd class="col-sm-9"><a class="transaction__link" data-toggle="tooltip" data-placement="top" title="" data-original-title="The SHA256 hash of the block."><%= to_string(@block.hash) %></a></dd>
</dl> </dl>
<%= unless @block.number == 0 do %> <%= unless @block.number == 0 do %>
@ -44,11 +39,13 @@
<dl class="row"> <dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Parent Hash" %></dt> <dt class="col-sm-3 text-muted"><%= gettext "Parent Hash" %></dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<span data-toggle="tooltip" data-placement="top" title="" data-original-title="The SHA256 hash of the parent block." >
<%= link( <%= link(
@block.parent_hash, @block.parent_hash,
class: "transaction__link", class: "transaction__link",
to: block_path(@conn, :show, @block.number - 1) to: block_path(@conn, :show, @block.number - 1)
) %> ) %>
</span>
</dd> </dd>
</dl> </dl>
<% end %> <% end %>
@ -56,8 +53,8 @@
<!-- Difficulty value --> <!-- Difficulty value -->
<dl class="row"> <dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Difficulty" %></dt> <dt class="col-sm-3 text-muted"><%= gettext "Difficulty" %></dt>
<dd class="col-sm-9"> <dd class="col-sm-9" >
<span><%= @block.difficulty |> BlockScoutWeb.Cldr.Number.to_string! %></span> <span data-toggle="tooltip" data-placement="top" title="" data-original-title="Block difficulty for miner, used to calibrate block generation time (Note: constant in POA based networks)."><%= @block.difficulty |> BlockScoutWeb.Cldr.Number.to_string! %></span>
</dd> </dd>
</dl> </dl>
@ -65,13 +62,13 @@
<!-- Total Difficulty --> <!-- Total Difficulty -->
<dl class="row"> <dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Total Difficulty" %></dt> <dt class="col-sm-3 text-muted"><%= gettext "Total Difficulty" %></dt>
<dd class="col-sm-9"><span><%= @block.total_difficulty |> BlockScoutWeb.Cldr.Number.to_string! %></span></dd> <dd class="col-sm-9"><span data-toggle="tooltip" data-placement="top" title="" data-original-title="Integer of the total difficulty of the chain until this block."><%= @block.total_difficulty |> BlockScoutWeb.Cldr.Number.to_string! %></span></dd>
</dl> </dl>
<!-- Nonce --> <!-- Nonce -->
<dl class="row"> <dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Nonce" %></dt> <dt class="col-sm-3 text-muted"><%= gettext "Nonce" %></dt>
<dd class="col-sm-9"><span><%= to_string(@block.nonce) %></span></dd> <dd class="col-sm-9"><span data-toggle="tooltip" data-placement="top" title="" data-original-title="64-bit hash of value verifying proof-of-work (note: null for POA chains)."><%= to_string(@block.nonce) %></span></dd>
</dl> </dl>
<%= if length(@block.uncle_relations) > 0 do %> <%= if length(@block.uncle_relations) > 0 do %>
@ -83,6 +80,9 @@
<%= link( <%= link(
gettext("Position %{index}", index: index), gettext("Position %{index}", index: index),
class: "transaction__link", class: "transaction__link",
"data-toggle": "tooltip",
"data-placement": "top" ,
"data-original-title": "Index position(s) of referenced stale blocks." ,
"data-test": "uncle_link", "data-test": "uncle_link",
"data-uncle-hash": to_string(relation.uncle_hash), "data-uncle-hash": to_string(relation.uncle_hash),
to: block_path(@conn, :show, relation.uncle_hash) to: block_path(@conn, :show, relation.uncle_hash)
@ -91,20 +91,19 @@
</dd> </dd>
</dl> </dl>
<% end %> <% end %>
<!-- Otherwise it will be displayed in its own block --> <!-- Otherwise it will be displayed in its own block -->
<%= if show_reward?(@block.rewards) do %> <%= if show_reward?(@block.rewards) do %>
<dl class="row"> <dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Gas Used" %></dt> <dt class="col-sm-3 text-muted"><%= gettext "Gas Used" %></dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<span><%= @block.gas_used |> BlockScoutWeb.Cldr.Number.to_string! %></span> <span data-toggle="tooltip" data-placement="top" title="" data-original-title="Total gas used by all transactions in this block (limit)."><%= @block.gas_used |> BlockScoutWeb.Cldr.Number.to_string! %></span>
<span class="text-muted">(<%= (Decimal.to_integer(@block.gas_used) / Decimal.to_integer(@block.gas_limit)) |> BlockScoutWeb.Cldr.Number.to_string!(format: "#.#%") %>)</span> <span class="text-muted" data-toggle="tooltip" data-placement="top" title="" data-original-title="Total gas used by all transactions in this block (% used).">(<%= (Decimal.to_integer(@block.gas_used) / Decimal.to_integer(@block.gas_limit)) |> BlockScoutWeb.Cldr.Number.to_string!(format: "#.#%") %>)</span>
</dt> </dt>
</dl> </dl>
<dl class="row mb-0"> <dl class="row mb-0">
<dt class="col-sm-3 text-muted"><%= gettext "Gas Limit" %></dt> <dt class="col-sm-3 text-muted"><%= gettext "Gas Limit" %></dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<span><%= BlockScoutWeb.Cldr.Number.to_string!(@block.gas_limit) %></span> <span data-toggle="tooltip" data-placement="top" title="" data-original-title="The maximum gas allowed in this block."><%= BlockScoutWeb.Cldr.Number.to_string!(@block.gas_limit) %></span>
</dd> </dd>
</dl> </dl>
<% end %> <% end %>
@ -119,9 +118,12 @@
<div class="card card-background-1 flex-grow-1"> <div class="card card-background-1 flex-grow-1">
<div class="card-body card-body-flex-column-space-between"> <div class="card-body card-body-flex-column-space-between">
<h2 class="card-title balance-card-title"><%= gettext "Miner" %></h2> <h2 class="card-title balance-card-title"><%= gettext "Miner" %></h2>
<div class="text-right"> <div class="text-right tooltipCustom">
<!-- Validator's Name --> <!-- Validator's Name -->
<h3 class="address-balance-text text-truncate"> <span class="tooltiptextTopMiner"> Validator's Name</span>
<h3 class="address-balance-text text-truncate" >
<%= render BlockScoutWeb.AddressView, <%= render BlockScoutWeb.AddressView,
"_link.html", "_link.html",
address: @block.miner, address: @block.miner,
@ -133,13 +135,17 @@
</div> </div>
<!-- Validator Reward or Gas--> <!-- Validator Reward or Gas-->
<div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0"> <div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0" >
<div class="card-body card-body-flex-column-space-between"> <div class="card-body card-body-flex-column-space-between">
<%= if show_reward?(@block.rewards) do %> <%= if show_reward?(@block.rewards) do %>
<h2 class="card-title balance-card-title"><%= gettext "Block Rewards" %></h2> <h2 class="card-title balance-card-title"><%= gettext "Block Rewards" %></h2>
<div class="text-right"> <div class="text-right" style="margin-left: 50%;" data-toggle="tooltip" data-placement="top" title="" data-original-title="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees.">
<%= for block_reward <- @block.rewards do %> <%= for block_reward <- @block.rewards do %>
<p class="address-current-balance"><%= block_reward_text(block_reward) %> <span class="text-muted"><%= format_wei_value(block_reward.reward, :ether) %></span></p>
<p class="address-current-balance "><%= block_reward_text(block_reward) %> <span class="text-muted"><%= format_wei_value(block_reward.reward, :ether) %></span></p>
<% end %> <% end %>
</div> </div>
<% else %> <% else %>
@ -150,6 +156,7 @@
<span class="text-muted">(<%= (Decimal.to_integer(@block.gas_used) / Decimal.to_integer(@block.gas_limit)) |> BlockScoutWeb.Cldr.Number.to_string!(format: "#.#%") %>)</span> <span class="text-muted">(<%= (Decimal.to_integer(@block.gas_used) / Decimal.to_integer(@block.gas_limit)) |> BlockScoutWeb.Cldr.Number.to_string!(format: "#.#%") %>)</span>
</h3> </h3>
<p class="address-current-balance"><%= @block.gas_limit |> BlockScoutWeb.Cldr.Number.to_string! %><%= gettext "Gas Limit" %></p> <p class="address-current-balance"><%= @block.gas_limit |> BlockScoutWeb.Cldr.Number.to_string! %><%= gettext "Gas Limit" %></p>
</div> </div>
<% end %> <% end %>
</div> </div>

@ -349,7 +349,7 @@ msgid "Details"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:58 #: lib/block_scout_web/templates/block/overview.html.eex:55
msgid "Difficulty" msgid "Difficulty"
msgstr "" msgstr ""
@ -422,15 +422,15 @@ msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/_tile.html.eex:56 #: lib/block_scout_web/templates/block/_tile.html.eex:56
#: lib/block_scout_web/templates/block/overview.html.eex:105 #: lib/block_scout_web/templates/block/overview.html.eex:104
#: lib/block_scout_web/templates/block/overview.html.eex:152 #: lib/block_scout_web/templates/block/overview.html.eex:158
msgid "Gas Limit" msgid "Gas Limit"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/_tile.html.eex:61 #: lib/block_scout_web/templates/block/_tile.html.eex:61
#: lib/block_scout_web/templates/block/overview.html.eex:98 #: lib/block_scout_web/templates/block/overview.html.eex:97
#: lib/block_scout_web/templates/block/overview.html.eex:146 #: lib/block_scout_web/templates/block/overview.html.eex:152
msgid "Gas Used" msgid "Gas Used"
msgstr "" msgstr ""
@ -446,7 +446,7 @@ msgid "Gwei"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:38 #: lib/block_scout_web/templates/block/overview.html.eex:33
msgid "Hash" msgid "Hash"
msgstr "" msgstr ""
@ -524,7 +524,7 @@ msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/_tile.html.eex:38 #: lib/block_scout_web/templates/block/_tile.html.eex:38
#: lib/block_scout_web/templates/block/overview.html.eex:121 #: lib/block_scout_web/templates/block/overview.html.eex:120
#: lib/block_scout_web/templates/chain/_block.html.eex:15 #: lib/block_scout_web/templates/chain/_block.html.eex:15
msgid "Miner" msgid "Miner"
msgstr "" msgstr ""
@ -574,7 +574,7 @@ msgid "No"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:73 #: lib/block_scout_web/templates/block/overview.html.eex:70
#: lib/block_scout_web/templates/transaction/overview.html.eex:79 #: lib/block_scout_web/templates/transaction/overview.html.eex:79
msgid "Nonce" msgid "Nonce"
msgstr "" msgstr ""
@ -608,7 +608,7 @@ msgid "Parameters"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:45 #: lib/block_scout_web/templates/block/overview.html.eex:40
msgid "Parent Hash" msgid "Parent Hash"
msgstr "" msgstr ""
@ -625,7 +625,7 @@ msgid "Pending Transactions"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:84 #: lib/block_scout_web/templates/block/overview.html.eex:81
msgid "Position %{index}" msgid "Position %{index}"
msgstr "" msgstr ""
@ -838,15 +838,10 @@ msgid "Top Accounts - %{subnetwork} Explorer"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:67 #: lib/block_scout_web/templates/block/overview.html.eex:64
msgid "Total Difficulty" msgid "Total Difficulty"
msgstr "" msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
msgid "Total Supply"
msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/chain/show.html.eex:56 #: lib/block_scout_web/templates/chain/show.html.eex:56
msgid "Total transactions" msgid "Total transactions"
@ -906,7 +901,7 @@ msgid "Twitter"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:80 #: lib/block_scout_web/templates/block/overview.html.eex:77
#: lib/block_scout_web/templates/layout/_topnav.html.eex:38 #: lib/block_scout_web/templates/layout/_topnav.html.eex:38
msgid "Uncles" msgid "Uncles"
msgstr "" msgstr ""
@ -1279,7 +1274,7 @@ msgid "Validator Info"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:139 #: lib/block_scout_web/templates/block/overview.html.eex:142
msgid "Block Rewards" msgid "Block Rewards"
msgstr "" msgstr ""
@ -1842,3 +1837,8 @@ msgstr ""
#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
msgid "Type" msgid "Type"
msgstr "" msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
msgid "Total Supply"
msgstr ""

@ -349,7 +349,7 @@ msgid "Details"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:58 #: lib/block_scout_web/templates/block/overview.html.eex:55
msgid "Difficulty" msgid "Difficulty"
msgstr "" msgstr ""
@ -422,15 +422,15 @@ msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/_tile.html.eex:56 #: lib/block_scout_web/templates/block/_tile.html.eex:56
#: lib/block_scout_web/templates/block/overview.html.eex:105 #: lib/block_scout_web/templates/block/overview.html.eex:104
#: lib/block_scout_web/templates/block/overview.html.eex:152 #: lib/block_scout_web/templates/block/overview.html.eex:158
msgid "Gas Limit" msgid "Gas Limit"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/_tile.html.eex:61 #: lib/block_scout_web/templates/block/_tile.html.eex:61
#: lib/block_scout_web/templates/block/overview.html.eex:98 #: lib/block_scout_web/templates/block/overview.html.eex:97
#: lib/block_scout_web/templates/block/overview.html.eex:146 #: lib/block_scout_web/templates/block/overview.html.eex:152
msgid "Gas Used" msgid "Gas Used"
msgstr "" msgstr ""
@ -446,7 +446,7 @@ msgid "Gwei"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:38 #: lib/block_scout_web/templates/block/overview.html.eex:33
msgid "Hash" msgid "Hash"
msgstr "" msgstr ""
@ -524,7 +524,7 @@ msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/_tile.html.eex:38 #: lib/block_scout_web/templates/block/_tile.html.eex:38
#: lib/block_scout_web/templates/block/overview.html.eex:121 #: lib/block_scout_web/templates/block/overview.html.eex:120
#: lib/block_scout_web/templates/chain/_block.html.eex:15 #: lib/block_scout_web/templates/chain/_block.html.eex:15
msgid "Miner" msgid "Miner"
msgstr "" msgstr ""
@ -574,7 +574,7 @@ msgid "No"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:73 #: lib/block_scout_web/templates/block/overview.html.eex:70
#: lib/block_scout_web/templates/transaction/overview.html.eex:79 #: lib/block_scout_web/templates/transaction/overview.html.eex:79
msgid "Nonce" msgid "Nonce"
msgstr "" msgstr ""
@ -608,7 +608,7 @@ msgid "Parameters"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:45 #: lib/block_scout_web/templates/block/overview.html.eex:40
msgid "Parent Hash" msgid "Parent Hash"
msgstr "" msgstr ""
@ -625,7 +625,7 @@ msgid "Pending Transactions"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:84 #: lib/block_scout_web/templates/block/overview.html.eex:81
msgid "Position %{index}" msgid "Position %{index}"
msgstr "" msgstr ""
@ -838,15 +838,10 @@ msgid "Top Accounts - %{subnetwork} Explorer"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:67 #: lib/block_scout_web/templates/block/overview.html.eex:64
msgid "Total Difficulty" msgid "Total Difficulty"
msgstr "" msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
msgid "Total Supply"
msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/chain/show.html.eex:56 #: lib/block_scout_web/templates/chain/show.html.eex:56
msgid "Total transactions" msgid "Total transactions"
@ -906,7 +901,7 @@ msgid "Twitter"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:80 #: lib/block_scout_web/templates/block/overview.html.eex:77
#: lib/block_scout_web/templates/layout/_topnav.html.eex:38 #: lib/block_scout_web/templates/layout/_topnav.html.eex:38
msgid "Uncles" msgid "Uncles"
msgstr "" msgstr ""
@ -1280,7 +1275,7 @@ msgid "Validator Info"
msgstr "" msgstr ""
#, elixir-format #, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:139 #: lib/block_scout_web/templates/block/overview.html.eex:142
msgid "Block Rewards" msgid "Block Rewards"
msgstr "" msgstr ""
@ -1843,3 +1838,8 @@ msgstr ""
#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
msgid "Type" msgid "Type"
msgstr "" msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
msgid "Total Supply"
msgstr ""

Loading…
Cancel
Save