Revert some unintentional changes

pull/2659/head
Victor Baranov 5 years ago
parent 57bc96176a
commit a72242ac90
  1. 11
      apps/block_scout_web/assets/css/app.scss
  2. 30
      apps/block_scout_web/assets/css/components/_card.scss
  3. 9
      apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex

@ -13,10 +13,13 @@ $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";
@ -35,6 +38,7 @@ $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";
@ -46,10 +50,13 @@ $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";
@ -107,7 +114,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@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 "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;
@ -117,5 +126,3 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
darkprimary: $dark-primary; darkprimary: $dark-primary;
darksecondary: $dark-secondary; darksecondary: $dark-secondary;
} }

@ -7,17 +7,20 @@ $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) {
@ -31,6 +34,7 @@ $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;
@ -41,6 +45,7 @@ $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);
} }
@ -51,26 +56,33 @@ $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;
} }
@ -83,6 +95,7 @@ $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;
} }
@ -93,6 +106,7 @@ $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;
} }
@ -102,17 +116,22 @@ $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;
} }
@ -137,6 +156,7 @@ $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;
@ -146,6 +166,7 @@ $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;
} }
@ -159,6 +180,7 @@ $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;
} }
@ -176,31 +198,38 @@ $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;
@ -212,6 +241,7 @@ $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;
} }

@ -19,15 +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>
@ -91,6 +95,7 @@
</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">
@ -137,15 +142,11 @@
<!-- 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" 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."> <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 %>

Loading…
Cancel
Save