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

Revert some unintentional changes

Browse Source
pull/2659/head
Victor Baranov 5 years ago
parent 57bc96176a
commit a72242ac90
3 changed files with 207 additions and 169 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. 11
      apps/block_scout_web/assets/css/app.scss
  2. 344
      apps/block_scout_web/assets/css/components/_card.scss
  3. 21
      apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex

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

@ -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;
} }

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

@ -7,214 +7,244 @@ $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 {
flex-direction: row; .block-details-row {
flex-direction: row;
@include media-breakpoint-down(sm) {
flex-direction: column;
}
.block-detail-el {
& + .block-detail-el {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
flex-direction: column; margin-top: 6px;
}
.block-detail-el {
&+.block-detail-el {
@include media-breakpoint-down(sm) {
margin-top: 6px;
}
}
} }
}
} }
}
} }
.card-background-1 { .card-background-1 {
background-color: $card-background-1; 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; color: $card-background-1-text-color;
a:not(.dropdown-item), }
a:not(.dropdown-item):hover {
color: $card-background-1-text-color;
}
} }
.card-header { .card-header {
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 {
margin: (-$card-spacer-y) (-$card-spacer-x); &-tabs {
} margin: (-$card-spacer-y) (-$card-spacer-x);
}
} }
.card-title { .card-title {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
line-height: 1.2rem; line-height: 1.2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
&.lg-card-title {
@media (max-width: 374px) { &.lg-card-title {
font-size: 13px; @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; &.margin-bottom-md {
@include media-breakpoint-down(sm) { margin-bottom: 25px;
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 { .card-subtitle {
color: #333; color: #333;
font-size: 12px; font-size: 12px;
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;
}
} }
.card-title-container { .card-title-container {
align-items: center; align-items: center;
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) {
flex-direction: column; @include media-breakpoint-down(sm) {
} flex-direction: column;
}
} }
.card-title-controls { .card-title-controls {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@include media-breakpoint-down(sm) {
flex-direction: column; @include media-breakpoint-down(sm) {
flex-direction: column;
}
.card-title-control {
margin-right: 20px;
&:last-child {
margin-right: 0;
} }
.card-title-control {
margin-right: 20px; @include media-breakpoint-down(sm) {
&:last-child { margin-bottom: 20px;
margin-right: 0; margin-right: 0;
}
@include media-breakpoint-down(sm) { &:last-child {
margin-bottom: 20px; margin-bottom: 0;
margin-right: 0; }
&:last-child {
margin-bottom: 0;
}
}
} }
}
} }
.card-body { .card-body {
padding: $card-horizontal-padding; padding: $card-horizontal-padding;
} }
.card-body-flex-column-space-between { .card-body-flex-column-space-between {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.card-server-response-body { .card-server-response-body {
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
} }
.card-chain-blocks { .card-chain-blocks {
height: auto; height: auto;
[class*="col-"]:last-child {
.tile { [class*="col-"]:last-child {
margin-bottom: 0; .tile {
} margin-bottom: 0;
} }
}
} }
.card-chain-transactions { .card-chain-transactions {
height: auto; height: auto;
.tile {
margin-bottom: 0; .tile {
} margin-bottom: 0;
}
} }
.card-tabs { .card-tabs {
align-items: center; align-items: center;
border-top-left-radius: $card-default-border-radius; border-top-left-radius: $card-default-border-radius;
border-top-right-radius: $card-default-border-radius; border-top-right-radius: $card-default-border-radius;
border-bottom: 1px solid $base-border-color; border-bottom: 1px solid $base-border-color;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
overflow: hidden; overflow: hidden;
@include media-breakpoint-down(md) {
flex-direction: column; @include media-breakpoint-down(md) {
} flex-direction: column;
}
} }
.card-tab { .card-tab {
align-items: center; align-items: center;
background-color: $card-background-color; background-color: $card-background-color;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
height: 70px; height: 70px;
padding: 0 25px; padding: 0 25px;
text-align: center; text-align: center;
transition: $transition-cont; transition: $transition-cont;
&:hover {
background-color: rgba($card-tab-active, .15); &:hover {
color: $card-tab-active; background-color: rgba($card-tab-active, .15);
text-decoration: none; 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;
} }
@include media-breakpoint-down(md) { @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; 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;
}
}
} }
}
} }

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

@ -7,29 +7,33 @@
<h1 class="card-title" data-test="detail_type"> <h1 class="card-title" data-test="detail_type">
<%= 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 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."> <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 %>
<%= gettext("%{block_type} Height:", block_type: block_type(@block)) %> <%= gettext("%{block_type} Height:", block_type: block_type(@block)) %>
<%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %> <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
<% end %> <% end %>
</h3> </h3>
<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" data-toggle="tooltip" data-placement="top" title="" data-original-title="The SHA256 hash of the block."><%= 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>
@ -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">
@ -135,17 +140,13 @@
</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" 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 %>

Write Preview
Loading…
Cancel
Save