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-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";
@ -35,6 +38,7 @@ $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";
@ -46,10 +50,13 @@ $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";
@ -107,7 +114,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@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;
@ -117,5 +126,3 @@ $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,214 +7,244 @@ $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;
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 {
@include media-breakpoint-down(sm) {
flex-direction: column;
}
.block-detail-el {
&+.block-detail-el {
@include media-breakpoint-down(sm) {
margin-top: 6px;
}
}
margin-top: 6px;
}
}
}
}
}
.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;
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;
}
}
&.margin-bottom-md {
margin-bottom: 25px;
}
&.margin-bottom-sm {
margin-bottom: 15px;
}
&.margin-bottom-xs {
margin-bottom: 10px;
}
&.margin-bottom-0 {
margin-bottom: 0;
font-size: 18px;
font-weight: normal;
line-height: 1.2rem;
margin-bottom: 2rem;
&.lg-card-title {
@media (max-width: 374px) {
font-size: 13px;
}
.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;
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;
}
.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;
}
}
@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;
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;
}
@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;
}
}
}
}
}
}

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">
<%= gettext("%{block_type} Details", block_type: block_type(@block)) %>
</h1>
<!-- 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.">
<%= if block_type(@block) == "Block" do %>
<!-- 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.">
<%= if block_type(@block) == "Block" do %>
<%= gettext("Block Height: %{height}", height: @block.number) %> <%= if @block.number == 0, do: "- " <> gettext("Genesis Block")%>
<% else %>
<%= gettext("%{block_type} Height:", block_type: block_type(@block)) %>
<%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
<% end %>
<% end %>
</h3>
<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">
<dl class="row">
<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>
</dl>
@ -91,6 +95,7 @@
</dd>
</dl>
<% end %>
<!-- Otherwise it will be displayed in its own block -->
<%= if show_reward?(@block.rewards) do %>
<dl class="row">
@ -135,17 +140,13 @@
</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" 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>
<% end %>
</div>
<% else %>

Write Preview
Loading…
Cancel
Save