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

(fix) dashboard stats

Browse Source
pull/1844/head
Gabriel Rodriguez Alsina 6 years ago
parent eb2c425f53
commit 2437d3afac
3 changed files with 51 additions and 89 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. 5
      apps/block_scout_web/assets/css/_mixins.scss
  2. 65
      apps/block_scout_web/assets/css/components/_dashboard-banner.scss
  3. 68
      apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

5
apps/block_scout_web/assets/css/_mixins.scss
Unescape View File

@ -24,9 +24,8 @@
margin-top: -3rem; margin-top: -3rem;
} }
@mixin stats-item($border-color: #fff, $text-color: #fff) { @mixin stats-item($border-color: #fff, $text-color: #fff, $value-color: #fff) {
&-item { &-item {
color: $text-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -47,6 +46,7 @@
} }
&-label { &-label {
color: $text-color;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
} }
@ -60,6 +60,7 @@
} }
&-value { &-value {
color: $value-color;
display: block; display: block;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 200; font-weight: 200;

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

@ -3,11 +3,12 @@ $dashboard-banner-gradient-end: lighten(
$dashboard-banner-gradient-start, $dashboard-banner-gradient-start,
5% 5%
) !default; ) !default;
$dashboard-banner-network-graph-background-color: #fff !default; $dashboard-banner-network-plain-container-background-color: lighten($dashboard-banner-gradient-end, 5%)!default;
$dashboard-line-color-price: $primary !default; $dashboard-line-color-price: $primary !default;
$dashboard-line-color-market: $secondary !default; $dashboard-line-color-market: $secondary !default;
$dashboard-stats-item-color: #fff !default; $dashboard-stats-item-label-color: #fff !default;
$dashboard-stats-item-border-color: #fff !default; $dashboard-stats-item-value-color: rgba(#fff, 0.8) !default;
$dashboard-stats-item-border-color: $primary !default;
$dashboard-banner-network-stats-static-image: false !default; $dashboard-banner-network-stats-static-image: false !default;
$dashboard-banner-network-stats-static-image-height: 150px !default; $dashboard-banner-network-stats-static-image-height: 150px !default;
@ -18,7 +19,7 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
position: relative; position: relative;
&::after { &::after {
background-color: $dashboard-banner-network-graph-background-color; background-color: $dashboard-banner-network-plain-container-background-color;
bottom: 0; bottom: 0;
content: ""; content: "";
display: block; display: block;
@ -31,14 +32,6 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
display: none; display: none;
} }
} }
&.dashboard-banner-container-disabled-graph {
padding-top: 0;
&::after {
display: none;
}
}
} }
.dashboard-banner { .dashboard-banner {
@ -55,13 +48,13 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
} }
} }
.dashboard-banner-network-graph { .dashboard-banner-network-plain-container {
align-items: center; align-items: center;
background-color: $dashboard-banner-network-graph-background-color; background-color: $dashboard-banner-network-plain-container-background-color;
border-top-left-radius: 10px; border-top-left-radius: 10px;
display: flex; display: flex;
height: 205px; height: 205px;
justify-content: space-between; justify-content: center;
margin: 0 0 0 60px; margin: 0 0 0 60px;
max-width: 100%; max-width: 100%;
padding: 30px 0 30px 30px; padding: 30px 0 30px 30px;
@ -170,30 +163,12 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
} }
.dashboard-banner-network-stats { .dashboard-banner-network-stats {
column-gap: 40px; column-gap: 100px;
display: grid; display: grid;
flex-shrink: 0; flex-shrink: 0;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
padding-bottom: 30px;
row-gap: 45px;
.dashboard-banner-container-disabled-graph & { @include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color);
align-items: center;
display: flex;
justify-content: space-between;
min-height: $dashboard-banner-network-stats-static-image-height;
padding-bottom: 0;
width: 100%;
@include media-breakpoint-down(sm) {
align-items: flex-start;
flex-direction: column;
padding-bottom: 30px;
padding-top: 30px;
}
}
@include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-color);
.dashboard-banner-network-stats-item { .dashboard-banner-network-stats-item {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
@ -205,21 +180,3 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
} }
} }
} }
.dashboard-banner-network-stats-static-image {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
flex-shrink: 0;
height: $dashboard-banner-network-stats-static-image-height;
order: 10;
width: 300px;
@if $dashboard-banner-network-stats-static-image {
background-image: url($dashboard-banner-network-stats-static-image);
}
@include media-breakpoint-down(md) {
display: none;
}
}

68
apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex
Unescape View File

@ -1,7 +1,42 @@
<div class='dashboard-banner-container' data-page="chain-details"> <div class='dashboard-banner-container' data-page="chain-details">
<div class="container"> <div class="container">
<div class="dashboard-banner"> <div class="dashboard-banner">
<!-- --> <!-- Graph and legend -->
<div class="dashboard-banner-network-graph">
<!-- Graph -->
<div class="dashboard-banner-chart" style="display: none">
<div data-chart-loading-message class="tile tile-muted text-center mt-5">
<span class="loading-spinner-small mr-2">
<span class="loading-spinner-block-1"></span>
<span class="loading-spinner-block-2"></span>
</span>
<%= gettext("Loading chart") %>...
</div>
<button data-chart-error-message class="alert alert-danger col-12 text-left mt-5" style="display: none;">
<span><%= gettext("There was a problem loading the chart.") %></span>
</button>
<canvas data-chart="marketHistoryChart" data-market_history_chart_path="<%= @chart_data_path %>" width="350" height="152" style="display: none;"></canvas>
</div>
<!-- Legend -->
<div class="dashboard-banner-chart-legend">
<div class="dashboard-banner-chart-legend-item">
<span class="dashboard-banner-chart-legend-label">
<%= gettext "Price" %>
</span>
<span class="dashboard-banner-chart-legend-value" data-selector="exchange-rate" data-wei-value="<%= Explorer.Chain.Wei.from(Decimal.new(1), :ether).value %>" data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
</span>
</div>
<div class="dashboard-banner-chart-legend-item">
<span class="dashboard-banner-chart-legend-label">
<%= gettext "Market Cap" %>
</span>
<span class="dashboard-banner-chart-legend-value" data-selector="market-cap" data-usd-value="<%= @exchange_rate.market_cap_usd %>">
</span>
</div>
</div>
</div>
<!-- Stats -->
<div class="dashboard-banner-network-plain-container">
<div class='dashboard-banner-network-stats'> <div class='dashboard-banner-network-stats'>
<%= case @average_block_time do %> <%= case @average_block_time do %>
<% {:error, :disabled} -> %> <% {:error, :disabled} -> %>
@ -33,37 +68,6 @@
</span> </span>
</div> </div>
</div> </div>
<!-- -->
<div class="dashboard-banner-network-graph">
<div class="dashboard-banner-chart">
<div data-chart-loading-message class="tile tile-muted text-center mt-5">
<span class="loading-spinner-small mr-2">
<span class="loading-spinner-block-1"></span>
<span class="loading-spinner-block-2"></span>
</span>
<%= gettext("Loading chart") %>...
</div>
<button data-chart-error-message class="alert alert-danger col-12 text-left mt-5" style="display: none;">
<span><%= gettext("There was a problem loading the chart.") %></span>
</button>
<canvas data-chart="marketHistoryChart" data-market_history_chart_path="<%= @chart_data_path %>" width="350" height="152" style="display: none;"></canvas>
</div>
<div class="dashboard-banner-chart-legend">
<div class="dashboard-banner-chart-legend-item">
<span class="dashboard-banner-chart-legend-label">
<%= gettext "Price" %>
</span>
<span class="dashboard-banner-chart-legend-value" data-selector="exchange-rate" data-wei-value="<%= Explorer.Chain.Wei.from(Decimal.new(1), :ether).value %>" data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
</span>
</div>
<div class="dashboard-banner-chart-legend-item">
<span class="dashboard-banner-chart-legend-label">
<%= gettext "Market Cap" %>
</span>
<span class="dashboard-banner-chart-legend-value" data-selector="market-cap" data-usd-value="<%= @exchange_rate.market_cap_usd %>">
</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save