CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2637 from YegorSan/frontend-tasks

Browse Source 
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
parent d7359ab99d a3794779de
commit 57bc96176a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 536 additions and 499 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      apps/block_scout_web/assets/css/app.scss
  2. 344
      apps/block_scout_web/assets/css/components/_card.scss
  3. 86
      apps/block_scout_web/assets/css/components/_custom_tooltips_block_details.scss
  4. 363
      apps/block_scout_web/assets/css/components/_dashboard-banner.scss
  5. 83
      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

12
apps/block_scout_web/assets/css/app.scss
Unescape View File

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

344
apps/block_scout_web/assets/css/components/_card.scss
Unescape View File

@ -7,244 +7,214 @@ $card-background-1: $primary !default;
$card-background-1-text-color: #fff !default;
$card-tab-icon-color: #20b760 !default;
$card-tab-icon-color-active: #fff !default;
.card {
background-color: $card-background-color;
border-radius: $card-default-border-radius;
border: none;
box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
margin-bottom: $common-container-margin;
.block-details-row {
flex-direction: row;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
.block-detail-el {
& + .block-detail-el {
background-color: $card-background-color;
border-radius: $card-default-border-radius;
border: none;
box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
margin-bottom: $common-container-margin;
.block-details-row {
flex-direction: row;
@include media-breakpoint-down(sm) {
margin-top: 6px;
flex-direction: column;
}
.block-detail-el {
&+.block-detail-el {
@include media-breakpoint-down(sm) {
margin-top: 6px;
}
}
}
}
}
}
}
.card-background-1 {
background-color: $card-background-1;
color: $card-background-1-text-color;
a:not(.dropdown-item),
a:not(.dropdown-item):hover {
background-color: $card-background-1;
color: $card-background-1-text-color;
}
a:not(.dropdown-item),
a:not(.dropdown-item):hover {
color: $card-background-1-text-color;
}
}
.card-header {
background: transparent;
border-bottom: 1px solid $base-border-color;
padding: $card-vertical-padding $card-horizontal-padding;
&-tabs {
margin: (-$card-spacer-y) (-$card-spacer-x);
}
background: transparent;
border-bottom: 1px solid $base-border-color;
padding: $card-vertical-padding $card-horizontal-padding;
&-tabs {
margin: (-$card-spacer-y) (-$card-spacer-x);
}
}
.card-title {
font-size: 18px;
font-weight: normal;
line-height: 1.2rem;
margin-bottom: 2rem;
&.lg-card-title {
@media (max-width: 374px) {
font-size: 13px;
font-size: 18px;
font-weight: normal;
line-height: 1.2rem;
margin-bottom: 2rem;
&.lg-card-title {
@media (max-width: 374px) {
font-size: 13px;
}
}
}
&.margin-bottom-md {
margin-bottom: 25px;
}
&.margin-bottom-sm {
margin-bottom: 15px;
}
&.margin-bottom-xs {
margin-bottom: 10px;
}
&.margin-bottom-0 {
margin-bottom: 0;
}
.card-title-container & {
line-height: 1.2;
margin: 0;
@include media-breakpoint-down(sm) {
margin-bottom: 25px;
&.margin-bottom-md {
margin-bottom: 25px;
}
&.margin-bottom-sm {
margin-bottom: 15px;
}
&.margin-bottom-xs {
margin-bottom: 10px;
}
&.margin-bottom-0 {
margin-bottom: 0;
}
.card-title-container & {
line-height: 1.2;
margin: 0;
@include media-breakpoint-down(sm) {
margin-bottom: 25px;
}
}
}
}
.card-subtitle {
color: #333;
font-size: 12px;
font-weight: normal;
line-height: 1.2;
margin: 0 0 30px;
&.margin-bottom-0 {
margin-bottom: 0;
}
color: #333;
font-size: 12px;
font-weight: normal;
line-height: 1.2;
margin: 0 0 30px;
&.margin-bottom-0 {
margin-bottom: 0;
}
}
.card-title-container {
align-items: center;
display: flex;
justify-content: space-between;
padding: 25px $card-horizontal-padding;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
align-items: center;
display: flex;
justify-content: space-between;
padding: 25px $card-horizontal-padding;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
}
.card-title-controls {
align-items: center;
display: flex;
justify-content: flex-end;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
.card-title-control {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
align-items: center;
display: flex;
justify-content: flex-end;
@include media-breakpoint-down(sm) {
margin-bottom: 20px;
margin-right: 0;
&:last-child {
margin-bottom: 0;
}
flex-direction: column;
}
.card-title-control {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
@include media-breakpoint-down(sm) {
margin-bottom: 20px;
margin-right: 0;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
.card-body {
padding: $card-horizontal-padding;
padding: $card-horizontal-padding;
}
.card-body-flex-column-space-between {
display: flex;
flex-direction: column;
justify-content: space-between;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-server-response-body {
max-height: 400px;
overflow-y: auto;
max-height: 400px;
overflow-y: auto;
}
.card-chain-blocks {
height: auto;
[class*="col-"]:last-child {
.tile {
margin-bottom: 0;
height: auto;
[class*="col-"]:last-child {
.tile {
margin-bottom: 0;
}
}
}
}
.card-chain-transactions {
height: auto;
.tile {
margin-bottom: 0;
}
height: auto;
.tile {
margin-bottom: 0;
}
}
.card-tabs {
align-items: center;
border-top-left-radius: $card-default-border-radius;
border-top-right-radius: $card-default-border-radius;
border-bottom: 1px solid $base-border-color;
display: flex;
justify-content: flex-start;
overflow: hidden;
@include media-breakpoint-down(md) {
flex-direction: column;
}
align-items: center;
border-top-left-radius: $card-default-border-radius;
border-top-right-radius: $card-default-border-radius;
border-bottom: 1px solid $base-border-color;
display: flex;
justify-content: flex-start;
overflow: hidden;
@include media-breakpoint-down(md) {
flex-direction: column;
}
}
.card-tab {
align-items: center;
background-color: $card-background-color;
color: #333;
cursor: pointer;
display: flex;
font-size: 14px;
font-weight: normal;
height: 70px;
padding: 0 25px;
text-align: center;
transition: $transition-cont;
&:hover {
background-color: rgba($card-tab-active, .15);
color: $card-tab-active;
text-decoration: none;
}
@include media-breakpoint-down(md) {
display: none;
width: 100%;
}
.fa-check-circle {
color: $card-tab-icon-color;
margin-left: 6px;
}
&.active {
background-color: $card-tab-active;
color: #fff;
cursor: default;
text-decoration: none;
.fa-check-circle {
color: $card-tab-icon-color-active;
align-items: center;
background-color: $card-background-color;
color: #333;
cursor: pointer;
display: flex;
font-size: 14px;
font-weight: normal;
height: 70px;
padding: 0 25px;
text-align: center;
transition: $transition-cont;
&:hover {
background-color: rgba($card-tab-active, .15);
color: $card-tab-active;
text-decoration: none;
}
@include media-breakpoint-down(md) {
cursor: pointer;
display: flex;
order: -1;
&::after {
border-bottom: 0;
border-left: 0.3em solid transparent;
border-right: 0.3em solid transparent;
border-top: 0.3em solid;
content: "";
display: inline-block;
height: 0;
margin-left: 10px;
width: 0;
}
&.noCaret::after {
display: none;
}
width: 100%;
}
.fa-check-circle {
color: $card-tab-icon-color;
margin-left: 6px;
}
&.active {
background-color: $card-tab-active;
color: #fff;
cursor: default;
text-decoration: none;
.fa-check-circle {
color: $card-tab-icon-color-active;
}
@include media-breakpoint-down(md) {
cursor: pointer;
display: flex;
order: -1;
&::after {
border-bottom: 0;
border-left: 0.3em solid transparent;
border-right: 0.3em solid transparent;
border-top: 0.3em solid;
content: "";
display: inline-block;
height: 0;
margin-left: 10px;
width: 0;
}
&.noCaret::after {
display: none;
}
}
}
}
}

86
apps/block_scout_web/assets/css/components/_custom_tooltips_block_details.scss
Unescape View File

@ -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*/

363
apps/block_scout_web/assets/css/components/_dashboard-banner.scss
Unescape View File

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

83
apps/block_scout_web/assets/css/components/_transaction.scss
Unescape View File

@ -1,46 +1,53 @@
.transaction-bottom-panel {
display: flex;
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
display: flex;
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
}
.transaction-bottom-panel {
display: flex;
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
display: flex;
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
}
.download-all-transactions {
text-align: center;
color: #a3a9b5;
font-size: 13px;
margin-top: 10px;
@media (min-width: 768px) {
margin-top: 30px;
}
.download-all-transactions-link {
display: inline-flex;
align-items: center;
text-decoration: none;
svg {
position: relative;
margin-left: 2px;
top: -3px;
left: 3px;
path {
fill: $primary;
}
}
&:hover {
text-decoration: underline;
}
}
text-align: center;
color: #a3a9b5;
font-size: 13px;
margin-top: 10px;
@media (min-width: 768px) {
margin-top: 30px;
}
.download-all-transactions-link {
display: inline-flex;
align-items: center;
text-decoration: none;
svg {
position: relative;
margin-left: 2px;
top: -3px;
left: 3px;
path {
fill: $primary;
}
}
&:hover {
text-decoration: underline;
}
}
}
.block-detail-number {
width: 25%;
@include media-breakpoint-down(sm) {
width: 60%;
}
}

10
apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
Unescape View File

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

4
apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex
Unescape View File

@ -73,7 +73,7 @@
<section>
<div class="d-flex justify-content-between align-items-baseline">
<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" %>
</button>
</div>
@ -89,7 +89,7 @@
<% {:selfdestructed, transaction_init} -> %>
<div class="d-flex justify-content-between align-items-baseline">
<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" %>
</button>
</div>

47
apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex
Unescape View File

@ -8,7 +8,7 @@
<%= gettext("%{block_type} Details", block_type: block_type(@block)) %>
</h1>
<!-- 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 %>
<%= gettext("Block Height: %{height}", height: @block.number) %> <%= if @block.number == 0, do: "- " <> gettext("Genesis Block")%>
<% else %>
@ -19,24 +19,19 @@
<div class="d-flex justify-content-start text-muted block-details-row">
<!-- # of Transactions -->
<span class="mr-4 block-detail-el"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span>
<%= if @block.size do %>
<!-- Block Size -->
<span class="mr-4 block-detail-el"> <%= Cldr.Unit.new(:byte, @block.size) |> cldr_unit_to_string!() %> </span>
<% end %>
<!-- Block Age -->
<span class="mr-4 block-detail-el" data-from-now="<%= @block.timestamp %>"></span>
</div>
<hr>
<!-- Block details description list -->
<!-- Block Hash -->
<dl class="row">
<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>
<%= unless @block.number == 0 do %>
@ -44,11 +39,13 @@
<dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Parent Hash" %></dt>
<dd class="col-sm-9">
<span data-toggle="tooltip" data-placement="top" title="" data-original-title="The SHA256 hash of the parent block." >
<%= link(
@block.parent_hash,
class: "transaction__link",
to: block_path(@conn, :show, @block.number - 1)
) %>
</span>
</dd>
</dl>
<% end %>
@ -56,8 +53,8 @@
<!-- Difficulty value -->
<dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Difficulty" %></dt>
<dd class="col-sm-9">
<span><%= @block.difficulty |> BlockScoutWeb.Cldr.Number.to_string! %></span>
<dd class="col-sm-9" >
<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>
</dl>
@ -65,13 +62,13 @@
<!-- Total Difficulty -->
<dl class="row">
<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>
<!-- Nonce -->
<dl class="row">
<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>
<%= if length(@block.uncle_relations) > 0 do %>
@ -83,6 +80,9 @@
<%= link(
gettext("Position %{index}", index: index),
class: "transaction__link",
"data-toggle": "tooltip",
"data-placement": "top" ,
"data-original-title": "Index position(s) of referenced stale blocks." ,
"data-test": "uncle_link",
"data-uncle-hash": to_string(relation.uncle_hash),
to: block_path(@conn, :show, relation.uncle_hash)
@ -91,20 +91,19 @@
</dd>
</dl>
<% end %>
<!-- Otherwise it will be displayed in its own block -->
<%= if show_reward?(@block.rewards) do %>
<dl class="row">
<dt class="col-sm-3 text-muted"><%= gettext "Gas Used" %></dt>
<dd class="col-sm-9">
<span><%= @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 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" 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>
</dl>
<dl class="row mb-0">
<dt class="col-sm-3 text-muted"><%= gettext "Gas Limit" %></dt>
<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>
</dl>
<% end %>
@ -119,9 +118,12 @@
<div class="card card-background-1 flex-grow-1">
<div class="card-body card-body-flex-column-space-between">
<h2 class="card-title balance-card-title"><%= gettext "Miner" %></h2>
<div class="text-right">
<div class="text-right tooltipCustom">
<!-- 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,
"_link.html",
address: @block.miner,
@ -133,13 +135,17 @@
</div>
<!-- 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">
<%= if show_reward?(@block.rewards) do %>
<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 %>
<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 %>
</div>
<% 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>
</h3>
<p class="address-current-balance"><%= @block.gas_limit |> BlockScoutWeb.Cldr.Number.to_string! %><%= gettext "Gas Limit" %></p>
</div>
<% end %>
</div>

36
apps/block_scout_web/priv/gettext/default.pot
Unescape View File

@ -349,7 +349,7 @@ msgid "Details"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:58
#: lib/block_scout_web/templates/block/overview.html.eex:55
msgid "Difficulty"
msgstr ""
@ -422,15 +422,15 @@ msgstr ""
#, elixir-format
#: 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:152
#: lib/block_scout_web/templates/block/overview.html.eex:104
#: lib/block_scout_web/templates/block/overview.html.eex:158
msgid "Gas Limit"
msgstr ""
#, elixir-format
#: 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:146
#: lib/block_scout_web/templates/block/overview.html.eex:97
#: lib/block_scout_web/templates/block/overview.html.eex:152
msgid "Gas Used"
msgstr ""
@ -446,7 +446,7 @@ msgid "Gwei"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:38
#: lib/block_scout_web/templates/block/overview.html.eex:33
msgid "Hash"
msgstr ""
@ -524,7 +524,7 @@ msgstr ""
#, elixir-format
#: 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
msgid "Miner"
msgstr ""
@ -574,7 +574,7 @@ msgid "No"
msgstr ""
#, 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
msgid "Nonce"
msgstr ""
@ -608,7 +608,7 @@ msgid "Parameters"
msgstr ""
#, 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"
msgstr ""
@ -625,7 +625,7 @@ msgid "Pending Transactions"
msgstr ""
#, 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}"
msgstr ""
@ -838,15 +838,10 @@ msgid "Top Accounts - %{subnetwork} Explorer"
msgstr ""
#, 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"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
msgid "Total Supply"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/chain/show.html.eex:56
msgid "Total transactions"
@ -906,7 +901,7 @@ msgid "Twitter"
msgstr ""
#, 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
msgid "Uncles"
msgstr ""
@ -1279,7 +1274,7 @@ msgid "Validator Info"
msgstr ""
#, 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"
msgstr ""
@ -1842,3 +1837,8 @@ msgstr ""
#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
msgid "Type"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
msgid "Total Supply"
msgstr ""

36
apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
Unescape View File

@ -349,7 +349,7 @@ msgid "Details"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:58
#: lib/block_scout_web/templates/block/overview.html.eex:55
msgid "Difficulty"
msgstr ""
@ -422,15 +422,15 @@ msgstr ""
#, elixir-format
#: 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:152
#: lib/block_scout_web/templates/block/overview.html.eex:104
#: lib/block_scout_web/templates/block/overview.html.eex:158
msgid "Gas Limit"
msgstr ""
#, elixir-format
#: 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:146
#: lib/block_scout_web/templates/block/overview.html.eex:97
#: lib/block_scout_web/templates/block/overview.html.eex:152
msgid "Gas Used"
msgstr ""
@ -446,7 +446,7 @@ msgid "Gwei"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/block/overview.html.eex:38
#: lib/block_scout_web/templates/block/overview.html.eex:33
msgid "Hash"
msgstr ""
@ -524,7 +524,7 @@ msgstr ""
#, elixir-format
#: 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
msgid "Miner"
msgstr ""
@ -574,7 +574,7 @@ msgid "No"
msgstr ""
#, 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
msgid "Nonce"
msgstr ""
@ -608,7 +608,7 @@ msgid "Parameters"
msgstr ""
#, 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"
msgstr ""
@ -625,7 +625,7 @@ msgid "Pending Transactions"
msgstr ""
#, 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}"
msgstr ""
@ -838,15 +838,10 @@ msgid "Top Accounts - %{subnetwork} Explorer"
msgstr ""
#, 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"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
msgid "Total Supply"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/chain/show.html.eex:56
msgid "Total transactions"
@ -906,7 +901,7 @@ msgid "Twitter"
msgstr ""
#, 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
msgid "Uncles"
msgstr ""
@ -1280,7 +1275,7 @@ msgid "Validator Info"
msgstr ""
#, 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"
msgstr ""
@ -1843,3 +1838,8 @@ msgstr ""
#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
msgid "Type"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
msgid "Total Supply"
msgstr ""

Write Preview
Loading…
Cancel
Save