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

(add) dashboard gradient and layout

Browse Source
pull/1704/head
Gabriel Rodriguez Alsina 6 years ago
parent 4f676cdf4a
commit f0d762e2fa
3 changed files with 103 additions and 102 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. 105
      apps/block_scout_web/assets/css/components/_dashboard-banner.scss
  2. 7
      apps/block_scout_web/assets/css/theme/_posdao_variables.scss
  3. 63
      apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

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

@ -1,31 +1,24 @@
$dashboard-banner-gradient-start: $primary !default;
$dashboard-banner-gradient-end: lighten($dashboard-banner-gradient-start, 5%) !default;
$dashboard-banner-network-graph-background-color: #fff !default;
.dashboard-banner-container { .dashboard-banner-container {
position: relative; background-color: $primary;
background-image: linear-gradient(to bottom, $dashboard-banner-gradient-start, $dashboard-banner-gradient-end);
box-shadow: 0 5px 40px -5px rgba(#000, 0.25);
margin-top: -3rem; margin-top: -3rem;
background-color: $white; padding: 48px 0 0 0;
box-shadow: 0 5px 40px -5px rgba($black, 0.25); position: relative;
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 68px;
background-color: $white;
box-shadow: 0 0 40px -5px rgba($black, 0.25);
}
&:after { &:after {
background-color: $dashboard-banner-network-graph-background-color;
bottom: 0;
content: ""; content: "";
display: block; display: block;
left: 70%;
position: absolute; position: absolute;
top: 3rem;
right: 0; right: 0;
bottom: 0; top: 3rem;
left: 70%;
background-color: $primary;
box-shadow: 0 0 40px -5px rgba($black, 0.25);
@media (max-width: 992px) { @media (max-width: 992px) {
top: 2rem; top: 2rem;
@ -35,46 +28,31 @@
} }
.dashboard-banner { .dashboard-banner {
position: relative; align-items: flex-end;
display: grid; display: flex;
grid-template-rows: 3rem 2fr 1fr; justify-content: space-between;
grid-template-columns: 1fr 4fr;
grid-template-areas:
"chart ."
"chart stats"
"legend stats";
margin-top: -1rem;
margin-bottom: 3rem; margin-bottom: 3rem;
position: relative;
z-index: 9; z-index: 9;
@media (max-width: 992px) { @media (max-width: 992px) {
grid-template-rows: 2rem auto; flex-direction: column;
grid-template-columns: auto;
} }
} }
.dashboard-banner-graphic {
position: absolute;
right: 0;
bottom: 0;
z-index: 10;
}
.dashboard-banner-chart { .dashboard-banner-chart {
grid-area: chart; height: calc(152px + 1rem);
padding: 1rem 1rem 1rem 0; padding: 1rem 1rem 1rem 0;
width: calc(350px + 1rem); width: calc(350px + 1rem);
height: calc(152px + 1rem);
} }
.dashboard-banner-chart-legend { .dashboard-banner-chart-legend {
grid-area: legend;
display: flex; display: flex;
padding: 1rem 0.3rem; padding: 1rem 0.3rem;
&-item { &-item {
padding-left: 0.5rem;
flex-grow: 1; flex-grow: 1;
padding-left: 0.5rem;
&:first-of-type { &:first-of-type {
border-left: 4px solid $primary; border-left: 4px solid $primary;
@ -86,8 +64,8 @@
} }
&-label { &-label {
display: block;
color: $text-muted; color: $text-muted;
display: block;
} }
&-value { &-value {
@ -96,24 +74,33 @@
} }
.dashboard-banner-network-stats { .dashboard-banner-network-stats {
grid-area: stats; column-gap: 40px;
display: flex; display: grid;
align-items: center; grid-template-columns: 1fr 1fr;
justify-content: space-around; padding-bottom: 30px;
padding-right: 1rem; row-gap: 45px;
background-color: $primary;
box-shadow: -10px 0 15px 0 rgba($black, 0.14);
@media (max-width: 992px) { @media (max-width: 992px) {
flex-direction: column;
align-items: flex-start; align-items: flex-start;
flex-direction: column;
padding: 0.5rem 2rem; padding: 0.5rem 2rem;
} }
&-item { &-item {
color: #fff;
padding-left: 1rem; padding-left: 1rem;
color: $white; position: relative;
border-left: 4px solid rgba($white, 0.6);
&::before {
background-color: rgba(#fff, 0.5);
border-radius: 2px;
content: "";
height: 100%;
left: -4px;
position: absolute;
top: 0;
width: 4px;
}
} }
&-label { &-label {
@ -125,9 +112,21 @@
display: block; display: block;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 200; font-weight: 200;
white-space: nowrap;
@media (max-width: 992px) { @media (max-width: 992px) {
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
} }
.dashboard-banner-network-graph {
align-items: center;
background-color: $dashboard-banner-network-graph-background-color;
border-top-left-radius: 10px;
display: flex;
height: 205px;
justify-content: space-around;
margin: 0 0 0 60px;
width: 750px;
}

7
apps/block_scout_web/assets/css/theme/_posdao_variables.scss
Unescape View File

@ -1,8 +1,7 @@
$primary: #15bba6; $primary: #15bba6;
$secondary: #ff0000; $secondary: #17314f;
$tertiary: #00FF00; $tertiary: #00FF00;
$header-links-color-active: #333; $header-links-color-active: #333;
$dashboard-banner-gradient-start: $secondary;
$gradient-start: #17314f; $dashboard-banner-gradient-end: #1e4168;
$gradient-end: #1e4168;

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

@ -1,36 +1,7 @@
<div class="dashboard-banner-container d-none d-md-block" data-page="chain-details"> <div class="dashboard-banner-container d-none d-md-block" data-page="chain-details">
<img src="<%= static_path(@conn, "/images/cube.svg") %>" alt="cube_graphic" class="dashboard-banner-graphic">
<div class="container"> <div class="container">
<div class="dashboard-banner"> <div class="dashboard-banner">
<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 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} -> %>
@ -62,6 +33,38 @@
</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> </div>

Write Preview
Loading…
Cancel
Save